Web images: WebP, AVIF and alt text for a fast website

You published the new catalog, the photos look beautiful, and the customer opens the page on their phone, out on the street. They see a gray box for four seconds, look away and message your competitor. The photo that cost you the most to produce may be exactly the one that costs you the sale.

Which image format should I use on my website?

Use WebP or AVIF as your main format and keep JPEG or PNG only as a fallback. According to web.dev, these modern formats generally compress better than the older ones and work in all modern browsers. Their lossy versions are a good alternative to JPEG for photos, and lossless WebP can be more efficient than PNG.

Format	Best for	Transparency
JPEG	Photos, full compatibility	No
PNG	Logos and sharp screenshots	Yes
WebP	Photos and graphics in general	Yes
AVIF	Photos with good compression	Yes

The trade-off is that lossy compression discards information, and some colors may not match the equivalent JPEG. Always check the result before uploading.

Can Google index my WebP and AVIF images?

Yes, Google understands them without any problem. The Google Search Central image guide lists BMP, GIF, JPEG, PNG, WebP, SVG and AVIF as supported formats. It also recommends that the file extension match its real type and that the name be short and descriptive, for example zapatos-cuero-negro.webp and not img1.jpg.

Common mistake: uploading photos straight from the camera or phone, several megabytes each, and trusting the browser to “shrink” them. They are downloaded in full anyway. Resize and compress before publishing.

What do I write in the alternative text (alt)?

Describe what is shown, in a useful way and specific to that page. Google calls it the most important attribute of an image. Its example is clear: “puppy” is better than nothing, but “Dalmatian puppy playing fetch” is better still. Use keywords only if they come naturally: the guide warns that stuffing alt text with keywords creates a bad experience and can look like spam.

If you use versions for different screen sizes, Google says you can serve them with picture or srcset, always with a fallback src. And if your site has several languages, translate the file names and alt text too, as we explain in hreflang for multilingual sites.

When should I not use lazy loading?

On the main image of the page, the one that appears when it opens. web.dev is blunt: “never lazy-load your LCP image”, because it adds an unnecessary delay. For that image, consider fetchpriority="high", but in moderation: giving high priority to more than one or two images stops helping.

The goal, according to the same source, is an LCP of 2.5 seconds or less for at least 75% of visits. If you want to understand all three metrics, read website speed and Core Web Vitals.

What checklist do I follow before publishing an image?

Five quick checks avoid almost all problems:

1. Modern format (WebP or AVIF) and a reasonable file size.
2. Short, descriptive file name, no img1.
3. Useful, specific alt text, without keyword stuffing.
4. Width and height defined, so the page does not jump while loading.
5. Lazy loading on images lower down, never on the main one.

In addition, the image shown when your link is shared on social media has its own rules: we cover them in Open Graph, how your link looks when shared. And when you publish new pages, tell Google as we explain in Search Console and sitemap.

In short

A slow photo or one without a description wastes the work of whoever took it and the patience of whoever waits for it. Choose WebP or AVIF, write an honest alt text, do not lazy-load the main image and measure again. If you want us to review your site end to end, see our web development service.