Images that are too large or in an older format
Resize each image to no more than the size it is shown at, compress it, and serve it as WebP or AVIF, with smaller copies in srcset for small screens. SERPCompass flags image files over 200 KB, and JPEG, PNG, GIF, BMP or TIFF files over 100 KB. Shopify, Wix and Squarespace resize and convert images themselves; there, upload sensibly sized files.
Why it matters
Google's image guidelines note that images are often the largest contributor to a page's overall size, which makes pages slow and expensive to load, and ask site owners to use current image optimization and responsive image techniques.
The largest image in view is often a page's Largest Contentful Paint element, and its download is one of the four parts of LCP that web.dev describes. web.dev also says that for most sites the download is not the biggest part, so check the server response and render-blocking files in the LCP guide as well.
Chrome's documentation describes AVIF and WebP as formats with better compression and quality than JPEG and PNG, and says that, ideally, a page never serves an image larger than the version shown on screen. Google Search indexes WebP and AVIF images as it does JPEG and PNG.
Both numbers are ours. SERPCompass flags image files over 200 KB as too large, and files over 100 KB in an older format (JPEG, PNG, GIF, BMP or TIFF) as worth converting. Lighthouse, Chrome's own audit, judges each image by the bytes it could save instead, so the two can disagree on a borderline image.
The audit findings this guide fixes: Images larger than 200 KB; Images over 100 KB not in WebP or AVIF.
Find every page with this problem
Run the free scan on your domain. On every page it crawls, it collects each image the page references: the src of every <img>, every candidate in its srcset, and the srcset of <source> elements in a <picture>. It asks your server for each image's headers only, never the whole file, and reads the size (Content-Length) and type (Content-Type) the server declares. Files over 200 KB are flagged as too large; JPEG, PNG, GIF, BMP and TIFF files over 100 KB as an older format. Only images on your own domain and its subdomains are checked, so images a site builder or an image service serves from its own domain are not. Two things to know when you read the results. Every srcset candidate counts, so a large file meant only for wide screens is listed too. And the check asks for each image the way Chrome does, accepting AVIF and WebP, so a server or CDN that picks the format for each browser, as Shopify's does, sends it what Chrome receives. To see what a browser really downloads, open the page, open your browser's developer tools, choose the Network panel, filter by images and reload: it lists each image's type and size. The scan shows your most urgent findings with the number of pages each affects; the Gap Report and a SERPCompass workspace list the pages, with the flagged images, their sizes and types.
How to fix it on your platform
WordPress
- Select the image in the editor and, in the Image block's settings, open the Settings tab and choose a Resolution that fits where the image is shown: Thumbnail, Medium or Large instead of Full Size for an image shown small.
- Insert images from the Media Library. WordPress adds
srcsetandsizesto images in post content, so browsers can pick a smaller copy. - Compress images before you upload them. WordPress's optimization guide asks for optimized image files in the right format and compression, and names WebP as a modern format to consider.
- Upload WebP (WordPress 5.8 and later) or AVIF (6.5 and later) files as you would JPEG. Both depend on your server's image library: to check, go to Tools > Site Health, open the Info tab and expand Media Handling.
- WordPress does not convert JPEG or PNG uploads by itself: the smaller copies it makes keep the uploaded format. A developer can make it write AVIF copies of JPEG uploads with the
image_editor_output_formatfilter; the original upload is always kept.
Sources: Image block (WordPress documentation); Properly size images (Chrome for Developers); wp_filter_content_tags() (WordPress developer reference); Optimization (WordPress advanced administration handbook); WordPress 5.8 adds WebP support (Make WordPress Core); WordPress 6.5 adds AVIF support (Make WordPress Core).
Shopify
- Shopify serves images through its image CDN, which picks the best format the visitor's browser supports, such as WebP or AVIF, and makes different sizes for different places in your theme. There is no format to convert yourself.
- Upload images no larger than they need to be. Shopify says 2048 x 2048 px usually displays best for square product images, and advises resizing images to match their display size.
- In theme code, ask for a size with the
image_urlfilter'swidthand print the image withimage_tag, which addssrcset,widthandheight. Do not build CDN addresses by hand. - Shopify's CDN chooses the format for each browser. The audit asks for each image the way Chrome does, so an image it lists is one Chrome is sent at that size or format; check it in your browser's developer tools before converting.
Sources: Product media types (Shopify Help Center); Improving your online store performance (Shopify Help Center); image_url (Shopify Liquid reference); image_tag (Shopify Liquid reference); Performance best practices for Shopify themes (Shopify.dev).
Wix
- Wix says it resizes and compresses images automatically in most cases, serves them in AVIF, and sends each device the version that suits it. This cannot be turned off.
- Compress images over 25 MB yourself before uploading: Wix does not compress them.
- Use GIFs sparingly. Wix does not compress them automatically, and they are often large.
- Wix serves images from its own media domain, which our audit does not size-check, so these findings will not list them.
Sources: Wix image optimization (Wix SEO Learning Hub); Request: disabling the image optimization done by Wix (Wix Help Center).
Squarespace
- Upload images about 2500 pixels wide; Squarespace warns that images under 1500 pixels wide may look blurry. It recommends files of 500 KB or less.
- Squarespace makes up to seven versions of each upload, from 100 to 2500 pixels wide, and serves the one that fits the visitor's screen.
- Keep the WebP image format toggle in the Image Settings panel on. By default Squarespace converts uploads to WebP; with the toggle off, images go back to their original format within 24 hours.
- Squarespace serves images from its own content delivery domain, which our audit does not size-check, so these findings will not list them.
Source: Formatting your images for display on the web (Squarespace Help Center).
Plain HTML
- Resize each image to no more than the largest size it is shown at, allowing for high-density screens, instead of publishing the camera's original.
- Compress it. Chrome's documentation names tools such as Squoosh, ImageOptim and Imagemin, which let you set the compression level.
- Serve AVIF or WebP with a
<picture>element: one<source>per format with itstype, and an<img>with a JPEG or PNGsrcas the fallback for browsers that support neither. - Offer several widths in
srcsetand say how wide the image is shown insizes, so a phone downloads a smaller file than a wide screen. - Replace large animated GIFs with MP4 or WebM video.
Sources: Properly size images (Chrome for Developers); Improve image delivery (Chrome for Developers); The Picture element (MDN); Google image SEO best practices (Google Search Central); Serve responsive images (web.dev); The Image Embed element (MDN).
Examples
-
Bad
<img src="/uploads/IMG_4031.JPG" alt="Our bakery counter">A phone photo published as it came off the camera: a multi-megabyte JPEG for an image shown a few hundred pixels wide.
-
Good
<picture> <source type="image/avif" srcset="/img/counter-600.avif 600w, /img/counter-1200.avif 1200w" sizes="(max-width: 700px) 100vw, 700px"> <source type="image/webp" srcset="/img/counter-600.webp 600w, /img/counter-1200.webp 1200w" sizes="(max-width: 700px) 100vw, 700px"> <img src="/img/counter-1200.jpg" width="1200" height="800" alt="Our bakery counter"> </picture>AVIF first, then WebP, then a JPEG fallback; two widths of each, so a phone takes the 600-pixel file.
-
Bad
/img/team.png 1.4 MB PNG photographA photograph saved as PNG. WordPress's own guide notes that PNG usually makes larger photo files than JPEG.
-
Good
/img/team-1200.webp 96 KB WebP, 1200 px wideThe same photo resized to the width it is shown at and saved as WebP: under both of our thresholds.
Common mistakes
- Uploading photos straight from a phone or camera, at full resolution.
- Shrinking an image with HTML or CSS width only. The browser still downloads the whole file and scales it down.
- Saving photographs as PNG.
- Serving only AVIF or WebP with no fallback. Chrome's documentation says to keep a JPEG or PNG fallback for older browsers, which the
<img>inside a<picture>provides. - Converting images by hand on a platform that already converts them, such as Shopify, Wix or Squarespace.
- Using a large animated GIF where a short video would be far smaller.
Questions and answers
How big should an image file be?
There is no fixed rule. SERPCompass flags files over 200 KB, and older-format files over 100 KB; Squarespace recommends uploading images of 500 KB or less; Lighthouse judges each image by how much it could save. Aim for the smallest file that still looks sharp at the size it is shown.
Should I use WebP or AVIF?
Chrome's documentation describes both as compressing better than JPEG and PNG, with AVIF usually the smaller at the same quality, but notes that AVIF support is more limited. A picture element can offer AVIF first, WebP second and a JPEG or PNG fallback, and each browser takes the first format it supports.
Does Google index WebP and AVIF images?
Yes. Google Search supports images in the src attribute of an img element in BMP, GIF, JPEG, PNG, WebP, SVG and AVIF formats. Google recommends always giving a fallback in src when you use srcset or a picture element.
Does the audit see the WebP or AVIF my CDN serves?
Yes. Our check asks for each image the way Chrome does, saying it accepts AVIF and WebP, so a CDN that chooses the format by what the browser accepts, as Shopify's does, sends us what Chrome receives. Images served from another domain, such as a site builder's image service, are not checked at all.
Do I still need small images if I use srcset?
Yes. The browser downloads one candidate from srcset, the one it judges fits the screen, so the smaller candidates are the ones phones receive. Each candidate should be compressed and sized for the width it serves; our audit checks every candidate, including the widest.
More guides
- Slow-loading pages and a poor Largest Contentful Paint
- Files sent uncompressed, without a cache lifetime or unminified
- Layout shift: content that jumps while the page loads
- Images missing alt text
- All guides
- Free tools: checks for robots.txt and llms.txt that need no account.
Sources
- Google image SEO best practices (Google Search Central)
- Improve image delivery (Chrome for Developers)
- Serve images in modern formats (Chrome for Developers)
- Properly size images (Chrome for Developers)
- Serve responsive images (web.dev)
- Optimize Largest Contentful Paint (web.dev)
- The Picture element (MDN)
- The Image Embed element (MDN)
- Image block (WordPress documentation)
- wp_filter_content_tags() (WordPress developer reference)
- WordPress 5.8 adds WebP support (Make WordPress Core)
- WordPress 6.5 adds AVIF support (Make WordPress Core)
- Optimization (WordPress advanced administration handbook)
- Image size and quality (WordPress documentation)
- Product media types (Shopify Help Center)
- Improving your online store performance (Shopify Help Center)
- image_url (Shopify Liquid reference)
- image_tag (Shopify Liquid reference)
- Performance best practices for Shopify themes (Shopify.dev)
- Wix image optimization (Wix SEO Learning Hub)
- Request: disabling the image optimization done by Wix (Wix Help Center)
- Formatting your images for display on the web (Squarespace Help Center)
Start with a free scan of your site.
Two to five minutes, no account. You get your three most urgent findings, and the exact count of everything else.