Why Image Optimization Matters
Images account for over 50% of total data volume on most websites. An uncompressed photo can be 2–5 MB — while your entire HTML file might weigh only 50 KB. This means: Images are the biggest lever for improving your website's loading time.
Beyond that, images are their own SEO opportunity. Google Image Search generates significant traffic. And alt text helps both accessibility and the understanding of AI systems analyzing your content.
Image optimization simultaneously improves three things: loading time (Core Web Vitals), rankings (Google Image Search), and accessibility (alt text for screen readers).
Modern Image Formats: WebP and AVIF
WebP is an image format developed by Google that's 25–34% smaller than JPEG at comparable quality and significantly smaller than PNG. It's supported by all modern browsers (Chrome, Firefox, Safari, Edge). There's no longer any reason to use JPEG or PNG as your default format.
AVIF is even newer and compresses even more than WebP — up to 50% smaller than JPEG at the same quality. Browser support is now good (Chrome, Firefox, Safari version 16+) but not yet as universal as WebP.
Recommendation: Use WebP as your default format. It offers the best balance of compression, quality, and browser compatibility. Convert your images with free online tools like Squoosh (squoosh.app) or the command-line tool cwebp.
Alt Text: Descriptions for Humans and Machines
The alt text (alternative text) describes the content of an image in text form. It's displayed when an image can't load, read aloud by screen readers for visually impaired users, and used by search engines and AI models to understand the image content.
Good alt text is descriptive and specific: alt="Diagram of the three Core Web Vitals metrics LCP, INP, and CLS with their thresholds" is better than alt="Image" or alt="Core Web Vitals".
Avoid keyword stuffing in alt text. The text should honestly describe the image, not be used as an opportunity for extra keywords. Google recognizes this and penalizes it.
Lazy Loading: Load Images Only When Visible
Lazy loading means images are only loaded when the user scrolls to them. Images below the visible area aren't loaded during the initial page load. This reduces initial loading time and improves the LCP value.
Implementation is simple: Add the attribute loading="lazy" to all images that aren't in the visible area on page load:
<img src="image.webp" alt="Description" width="800" height="450" loading="lazy">
Important: The image in the visible area (the LCP element) should NOT be lazy loaded. Set fetchpriority="high" there instead so it loads as quickly as possible.
Width and Height: Avoiding Layout Shifts
Always define width and height attributes for images. Without these attributes, the browser doesn't reserve space for the image — and when it loads, the entire layout shifts. This increases the CLS value (Cumulative Layout Shift) and leads to a worse user experience.
Checklist for Every Image
Format: Use WebP, not JPEG or PNG.
Size: No larger than necessary. An image displayed at 800px width on the website doesn't need to be uploaded at 4000px width.
Compression: Quality level 80–85% is sufficient for most uses. Below that you'll see artifacts, above that you barely save file size.
Alt text: Descriptive, specific, without keyword stuffing.
Width/Height: Always define.
Lazy loading: For all images outside the initial visible area.
Sources
- Google Search Central: Official documentation on search engine optimization best practices. developers.google.com
FAQ
WebP is an image format developed by Google that's 25–34% smaller than JPEG at comparable quality. It's supported by all modern browsers and is the recommended format for website images.
Alt text describes the content of an image in text form. It's read aloud by screen readers, analyzed by search engines, and displayed when an image can't load. Every image on your website should have a descriptive alt text.
Lazy loading means images are only loaded when the user scrolls to them. It reduces the initial loading time of the page. You activate it with the HTML attribute loading="lazy" on the img tag.
Last updated: March 25, 2026