Optimising web images: size, quality and loading
A practical image workflow for portfolios and business websites: choose formats, serve suitable sizes, preserve useful detail and check the result.
The right image is the lightest file that still communicates what the visitor needs to see. A full-screen photograph and a project thumbnail have different jobs. Start with an inventory of the files your page actually downloads before changing compression settings.
Inspect a real page
Open the browser Network panel, filter images and reload. Record transferred size, pixel dimensions and where each image appears. Identify the main image, thumbnails, logos and galleries. Look for a large original being downloaded into a small card, or several off-screen photographs requested at once.
The photographer template illustrates a useful constraint: visual detail is part of the product being presented. A project screenshot must also keep interface text readable. Saving bytes is only useful if the picture still does its job.
Compare formats on your own images
For photographs, export JPEG, WebP or AVIF variants and compare them at their displayed size. Use a trusted SVG for a vector logo. Consider PNG for assets that require lossless detail or transparency. Inspect gradients, fine lettering and faces before choosing a version. Compression savings depend on the image; a fixed percentage is not a reliable promise. MDN's image performance guide.
Keep your originals outside the public asset folder. They give you room to crop or export differently later.
Supply suitable dimensions
Prepare image variants for the actual layout. srcset provides available widths and sizes describes how much space the image occupies. The browser can then choose a suitable file. Supply width and height, or a matching aspect ratio, so the page reserves space before loading.
For example, a two-column project grid needs different variants from a full-width gallery. Check the selected file in Network at both widths. An incorrect sizes value can cause oversized downloads even when variants exist.
Separate the first image from the rest
Make the main visible image discoverable immediately. It should not wait for a scroll handler or a JavaScript component to mount. Use native lazy loading for images further down the page and keep their image elements in the initial HTML.
This portfolio now uses that approach for its project cards and case studies, including LR Studios. A failed animation or load handler should not leave an otherwise downloaded image permanently transparent.
Describe what the picture contributes
Alternative text should explain the image in context. A screenshot can identify the screen and the feature demonstrated. A decorative picture can have empty alternative text. Avoid repeating the same keyword string for every image.
For a tradesperson's website, a caption describing the work shown helps a prospective customer understand the project. Check permission before sharing identifiable customer locations or details.
Check the published result
Reload with a small viewport and a slow connection. Verify the downloaded file, inspect its quality and watch for layout shifts. Open the large gallery view as well as the thumbnail. Compare LCP and CLS before and after under the same conditions.
Record the export sizes and naming convention so future uploads follow the same method. If the gallery needs restructuring, include that work in the website project scope.