Large Images Example
My miniature of the whale required six oxen and a modest bridge.
The short answer
- What it is
- Large images are image files with a size well beyond what the page needs. This check flags any image over 300 KB.
- Why it matters
- Heavy files take longer to download, most of all on mobile networks. When the biggest image is also the main content, it delays Largest Contentful Paint.
- How a crawler should report it
- List each image over 300 KB with its URL, size in KB, format, and the pages that use it. Add a legacy format warning if the file is a JPEG or PNG.
- Live examples
/lab/large-image/(positive)/lab/large-image/near-miss/(near miss)
Finding Image Files That Weigh Down a Page
Large images are often photos that went straight from a camera to a website. The file may be 5,000 pixels wide and appear in a 600 pixel column. Designers may export at maximum quality to be safe. PNG is also a common trap, since it stays large when used for photos. A CMS may keep the original upload and serve it, even though smaller copies exist.
The browser has to download the whole file before it can show the final result. It then spends more time and memory decoding it, and scales it down to fit. On a phone, that costs battery and data as well as time. Search engines can crawl large images, but a slow page gives a worse experience. Google's guidance on page experience points site owners toward fast loading, and big hero images are a frequent cause of slow pages.
To detect large images, request each image and read the Content-Length header, or measure the bytes that arrive. Compare the natural size of the file with the size at which it is displayed. The 300 KB limit used here is a practical rule of thumb and not a limit set by Google. A full-screen hero can reasonably weigh more than a thumbnail, so judge each file by its job.
Start by resizing images to the largest size they will really be shown at. Use srcset and sizes so that small screens get small files. Compress with a modern format such as WebP or AVIF. Add loading="lazy" to images below the fold, but never to the main image at the top. Give that main image fetchpriority="high" so the browser requests it early. An image CDN can automate most of this work.