Images for the web: WebP, AVIF or JPG, and how to speed up your site

🖼️ Why images slow a site

A phone photo is several megabytes and thousands of pixels wide, yet it is shown at 400 pixels. The visitor downloads all of it and sees a small part. That immediately hits LCP, mobile data and patience.

🧾 Formats in short

• JPG: universal, good for photos, but heavy compared to newer formats.
• PNG: for graphics with transparency, but heavy for photos.
• WebP: a modern format supported by all current browsers, usually much lighter than JPG at similar quality.
• AVIF: even more efficient compression, supported in current browsers, but slower to produce.
• SVG: for logos, icons and illustrations. Vector, small and sharp on every screen.

Rule of thumb: AVIF and WebP for photos, SVG for logos and icons, JPG as a fallback where needed.

📐 Five rules

1. The right dimension. Do not ship a 4000-pixel image where 800 is displayed.
2. Several sizes (srcset) so a phone gets a smaller image than a desktop.
3. Lazy loading (loading="lazy") for images below the first screen. Do not defer the main image at the top.
4. Set width and height, so the page does not jump while the image loads (CLS).
5. Descriptive alt text saying what is in the image, useful for accessibility and SEO.

🏷️ File names

Instead of IMG_2045.jpg use restaurant-belgrade-terrace.webp. Short, descriptive, no spaces or diacritics.

🛠️ How we do it

In our process every image is automatically produced in AVIF and WebP in several sizes, with set dimensions and lazy loading, and illustrations are SVG. That is why our sites are light even with a lot of visuals. More in Core Web Vitals and on the website development page.