# Image optimization

> Image optimization means serving images in the right size and format and loading the ones below the fold only when they are needed.

- **Check ID:** P6
- **Area:** [Performance](https://be1st.ai/glossary/performance)
- **Tool:** [SEO + Security + Performance](https://be1st.ai/tools/ssp-audit)
- **Page:** https://be1st.ai/glossary/performance/image-optimization

## Why it matters

Images are typically the largest part of a page (50-70% of data). Without lazy loading, all images are loaded at once, even those the user will never see. Without srcset, mobile devices download unnecessarily large desktop images. Modern formats like WebP are 25-35% smaller than JPEG.

## In practice

Medium uses lazy loading and srcset for all images in articles: it only loads images visible in the viewport and sends smaller versions to mobile. If your blog has 20 images at 500 KB each without lazy loading, the user downloads 10 MB of data immediately on page load.

## How be1st checks it

Checks whether images use lazy loading (loading='lazy') and responsive sizes via the srcset attribute. Images above the fold (the first two, fetchpriority='high', the logo in the header) should not be lazy loaded, so this is not held against them. Modern formats (WebP, AVIF) are recommended, but the check does not score them. Lazy loading defers loading of images outside the viewport, and srcset allows the browser to select the right image size for the given device.

[SEO + Security + Performance](https://be1st.ai/tools/ssp-audit), Performance tab.

Every check ends as: Pass, Warning, Fail.

## Sources

- [Browser-level image lazy loading for the web](https://web.dev/articles/browser-level-image-lazy-loading) (web.dev)
- [Serve responsive images](https://web.dev/articles/serve-responsive-images) (web.dev)
- [The Image Embed element - img](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) (MDN Web Docs)

## Related terms

- [Total page weight](https://be1st.ai/glossary/performance/total-page-weight): Total page weight is the combined size of everything a page downloads: HTML, CSS, JavaScript, images and fonts.
- [Request count](https://be1st.ai/glossary/performance/request-count): Request count is the number of HTTP requests a browser makes to load a page. Every file, from a script to an icon, is one request.
- [CSS coverage](https://be1st.ai/glossary/performance/css-coverage): CSS coverage is the share of a page's downloaded CSS that the page actually uses. The rest is unused code the browser still has to process.
- [JS coverage](https://be1st.ai/glossary/performance/js-coverage): JS coverage is the share of a page's downloaded JavaScript that actually runs on the page. Unused code still costs download and parsing time.
- [Response time (TTFB)](https://be1st.ai/glossary/performance/response-time-ttfb): Time to First Byte (TTFB) is the time from sending a request to receiving the first byte of the server's answer. It shows how fast the server and the network respond.
- [HTML size (performance)](https://be1st.ai/glossary/performance/html-size): HTML size is the weight of a page's HTML document in kilobytes. The browser has to download and parse all of it before it can show the page.