WebP Images: Compress Without Quality Loss - Ighenatt Blog

Images are the heaviest resource on most web pages. According to HTTP Archive, they represent 50% of the total weight of an average page. Optimizing them correctly has a direct impact on load speed and, consequently, on SEO and user experience.

WebP is the format that best balances compression and quality in 2026, but using it well involves more than converting files: it requires implementing srcset, sizes and a coherent lazy loading strategy.

Why images are the number one cause of slow websites

When a page loads, the browser downloads HTML, CSS, JavaScript and images. Of all these resources, images typically represent the largest volume of bytes transferred. An unoptimized hero photo can weigh 2-5MB, more than all the HTML, CSS and JS combined.

The impact on Core Web Vitals is direct:

• LCP (Largest Contentful Paint): the main image on a page is usually the LCP element. If it is too heavy, the LCP degrades proportionally to the download time.
• CLS (Cumulative Layout Shift): images without defined dimensions (width and height) cause layout jumps when they finish loading.
• Total load time: each unoptimized image consumes bandwidth that could be used for other critical resources.

Google has identified unoptimized images as one of the most frequent improvement opportunities in Lighthouse. The reason is simple: most sites serve images in JPEG or PNG format at resolutions higher than the device needs.

WebP vs JPEG vs PNG vs AVIF: when to use each format

Each format has an optimal use case:

JPEG remains valid for photographs where universal compatibility is a priority. Its lossy compression produces visible artefacts at high compression levels, but at quality 75-85 it delivers acceptable results.

PNG is necessary when the image requires transparency or contains text, thin lines or rasterized vector graphics. Its lossless compression generates heavier files than JPEG for photographs.

WebP outperforms both in most scenarios. According to Google’s compression study, WebP reduces size by 25-34% compared to JPEG and 26% compared to PNG at equivalent visual quality. It supports both lossy and lossless compression, transparency and animations. In 2026, 97% of browsers support it.

AVIF offers superior compression to WebP (up to 50% less than JPEG), but with limitations: browser support is 89%, encoding is slower and some CDNs do not serve it correctly. It is the ideal option as the primary format when used with a fallback to WebP.

The recommended strategy is to serve AVIF as the first option, WebP as the fallback and JPEG as a last resort, using the HTML <picture> element.

How to convert images to WebP: tools and automation

Manual conversion

Squoosh (squoosh.app) is Google’s tool for individual conversion. It allows you to visually compare the original image with the compressed one, adjust quality and see the size savings in real time. It runs in the browser without installing anything.

cwebp is Google’s official command-line tool. It allows you to automate conversion with bash scripts to process entire directories.

Automation in the build

Modern frameworks automate conversion during the build:

• Astro uses Sharp to automatically generate WebP and AVIF with the <Image> component. It configures quality per format and generates variants at build time.
• Next.js converts images to WebP on demand with its next/image component.
• CDNs such as Cloudflare can convert images to WebP automatically based on the browser’s Accept header, with no code changes.

Automation is preferable to manual conversion because it guarantees that all new images are optimized without depending on the team remembering to do so.

src, srcset and sizes attributes: correct implementation for SEO

The srcset attribute allows the browser to choose the most appropriate image based on screen width and pixel density. Without srcset, all devices download the same image, meaning a mobile with a 375px screen downloads the same 1920px image as a desktop monitor.

The correct implementation combines srcset with sizes:

• srcset defines the available versions and their actual width in pixels.
• sizes tells the browser what width the image will occupy in the layout, so it can choose the right version before downloading.

It is important to always include width and height attributes on images so the browser can reserve the correct space before loading them. This prevents CLS (Cumulative Layout Shift), one of the most common causes of LCP problems.

A descriptive alt attribute is mandatory for accessibility and SEO. Google uses it to index images in Google Images and to understand the context of the page. A generic alt like “image” is almost as bad as leaving it empty.

Image lazy loading: when to use it and when not to

The loading="lazy" attribute tells the browser to defer loading the image until it is close to the viewport. This reduces the initial page weight and improves perceived load time.

When to use lazy loading

• Images below the fold (those the user does not see without scrolling).
• Image galleries.
• Images in article or product listings.
• Thumbnails and avatars.

When NOT to use lazy loading

• The LCP image: applying lazy loading to the hero or main image of the page delays its loading and worsens the LCP. This image must load as early as possible.
• Above-the-fold images: any image visible without scrolling must load immediately.

For the LCP image, the correct combination is:

• loading="eager" (or simply not adding loading="lazy")
• fetchpriority="high" to tell the browser it is a priority resource
• A <link rel="preload"> in the head to start the download as early as possible

The difference between applying lazy loading and preload to the LCP image can be 1-3 seconds on slow connections.

Frequently asked questions about image optimization

Do all browsers support WebP?

In 2026, WebP support reaches 97% of browsers, including Chrome, Firefox, Safari (since version 14), Edge and Opera. Browsers without support are old versions representing less than 3% of global traffic. For that residual percentage, the <picture> element with a fallback to JPEG covers all cases.

Is the alt attribute required on all images?

Yes. The alt attribute is mandatory for accessibility and SEO. Google uses it to understand the image content and may show it in Google Images results. Purely decorative images should have alt="" (empty), but never omit the attribute entirely.

How do images affect LCP?

The hero image or main image on the page is usually the element that defines the LCP. If this image is heavy, unoptimized or has lazy loading applied, the LCP will degrade. The solution involves using WebP or AVIF, applying preload with fetchpriority="high" and not using lazy loading on the LCP image.

Optimizing images is one of the improvements with the best effort-to-impact ratio in web performance. If you want us to analyse your site’s speed and implement an image optimization strategy tailored to your technology, talk to our team.