Written by 4SYSTEMPublished on Updated on
Web accessibility and performance · 6 min reading
When optimizing web images, make three separate decisions: the right format for the content, the dimensions needed to display, and when to load. A product photo, a logo and an image located at the bottom of the page do not have the same needs. Keep the originals, compare the exports to their actual usage size and check the file actually downloaded by the browser.
Key points
- The format, dimensions and weight are three different characteristics.
- Prepare images according to their use, not a single size.
- Do not delay the image that is the main content when loading.
- A lighter file remains to be checked visually and on the page.
Choose the format according to the content
The MDN format guide distinguishes their uses. WebP and AVIF allow compression suitable for web images, including support for transparency. JPEG remains an option for photography. PNG uses lossless compression; SVG describes vector shapes, suitable for logos, icons or diagrams.
Photographs and product details
Compare WebP, AVIF or JPEG exports with acceptable visual quality. Examine difficult areas: texture, edges, small print, gradients and product color. The quality setting is not directly comparable between formats or tools. The choice must come from the exported image, not just from a value in the software.
Logos, diagrams and transparency
For a logo for which you have a vector source, choose a suitable SVG export. Renaming a photograph to SVG does not turn it into a vector drawing. For a raster capture or graphic, composed of pixels, where precision matters, compare lossless exports. Transparency alone does not impose PNG: WebP and AVIF can also keep it.
If you offer several formats, the component must provide a fallback solution compatible with the targeted browsers. Also check support from your content management tool and image processing.
Adapt dimensions to location
The dimensions correspond to the pixels of the image; the weight corresponds to the data in the file. A compressed image may remain oversized. Conversely, a small image may lack detail in a zoom product. Start by distinguishing between grid thumbnail, main visual and enlarged view, then note their display sizes.
The browser can choose from several variants using srcset. The sizes attribute describes the expected display space when variants are indicated by their width. The density of the screen also plays a role in this choice. The MDN guide to adaptive images explains this selection. These attributes do not create the files: your system must produce and serve the corresponding variants.
Do not confuse resolution and cropping
Multiple resolutions can show the same composition. A mobile crop changes the visible content. The picture element makes it possible to propose different compositions. For a store, check that any cropping does not remove useful information about the product. Keep a separate detailed view when the visitor needs to examine a material or assembly.
Load images at the right time
Lazy loading, with loading="lazy", lets the browser wait for an image to approach the visible area. It is suitable for non-critical visuals located further down the page. The img element MDN reference describes this operation: triggering depends on the browser, not on a universal distance to impose.
However, do not apply lazy loading to the image identified as element LCP. The web.dev optimization guide for LCP warns that this unnecessarily delays his request. High priority via fetchpriority can be considered for the main image, but distributing it to all images removes the point of prioritization.
Also provide width and height with the intrinsic dimensions and a consistent ratio. These attributes allow the browser to reserve space before downloading, according to MDN. The layout can always adapt the displayed size. Above all, check that the reserved ratio corresponds to the visual actually presented.
Illustrative example: a photo used everywhere
In this fictitious example, a lighting store uses the same original for the grid, product pages and zoom. The correction begins by separating the uses: variants adapted to the grid, readable main image and detailed version for enlargement.
The team compares the formats on the contours and texture of the luminaire. It keeps the main visual available upon loading, defers additional images off-screen and reserves their space. The check then concerns the files actually requested on the telephone and computer. No target weight or speed gain is assumed.
Operational checklist
- Keep originals outside of exports intended for current display.
- Inventory each location, its size and its need for detail.
- Compare format, weight and visual quality of exports.
- Produce the necessary variants and check srcset and sizes.
- Control cropping and fallbacks.
- Reserve space and choose loading according to position.
- Check downloaded file, then zoom and scroll.
Limitations and common errors
Converting the entire catalog without a check sample may degrade product details. Compressing further does not fix loading triggered too late. An extension that optimizes files does not prove that the browser is receiving the correct variant. Finally, important text shouldn't exist only in an image: keep essential information accessible within the content of the page.
Frequently asked questions
Should we convert all images to AVIF?
No. Compare the exports, required compatibility and operation of your tool. The format does not replace suitable dimensions or well-chosen loading.
What maximum weight should be imposed?
There is no single relevant value for an icon, main photo and detailed zoom. Set your criteria by location, then test the page and readability.
Is alt text used to speed up an image?
No. The alt attribute provides a textual alternative, particularly for accessibility, as indicated by MDN. Describe the useful information in the context of the page; do not fill this attribute with keywords. For a purely decorative image that conveys no information, use a blank alternative, alt="", rather than an unnecessary description.
Next step
Choose a product pages and a grid. For their images, note location, displayed dimensions, downloaded file and loading method. Then validate an export and its integration before applying the method to the rest of the catalog.
Sources and resources
A FIRST EXCHANGE
A project to develop?
Tell us about your site, campaigns or emails. We will define with you the next actions to take.
