Modern image formats can reduce transfer sizes, while JPEG remains a useful fallback. Yet exporting three copies of an image does not automatically make a website faster: the page must choose and serve them correctly.
Understand the role of each format
AVIF can offer strong compression for many photographs, WebP offers broad support and JPG provides a familiar fallback. Quality and compatibility vary by content and browser. Inspect real outputs instead of declaring one format always superior.
Implement actual source selection
Use a supported <picture> structure or server-side content negotiation when appropriate. If a database field references only a .jpg file and the template always renders it, storing matching AVIF and WebP files does nothing for delivery. Check the browser's network requests to see which format it receives.
Match dimensions to the display location
Generate thumbnail, card and hero sizes as needed. An image 1600 pixels wide should not be delivered unchanged to a tiny mobile preview when responsive sources could be used. Specify dimensions to reserve layout space and avoid CLS regressions.
Write meaningful names and alt text
Use descriptive filenames without stuffing keywords. Alternative text should communicate the image's purpose in its surrounding context; purely decorative imagery may need empty alt text. On a multilingual site, localise meaningful descriptions rather than copying French words everywhere.
Audit import and processing behaviour
After database imports or migrations, confirm physical paths, MIME types and the relationship between originals and variants. Check that regeneration and caching do not create mismatched URLs. Make sure deleted entries do not leave broken images.
Test an article image in the browser
Open a page in desktop and mobile views, inspect src, srcset and response content types, and compare transferred sizes. Verify fallback display, dimensions and alt text before claiming that all formats are active.
Frequently asked questions
Will uploading AVIF files automatically make my site use them?
No. The website must select and serve those files through its rendering or server configuration.
Should every image use the same compression settings?
No. Choose settings according to content, dimensions and visible quality.
Related guides on Concepty
- Mobile website performance: five checks before installing another optimisation plugin
- PrestaShop product pages: improve the buying experience without clutter
- Core Web Vitals for online shops
For a specific implementation or compatibility question, explore Concepty services or contact Concepty.