Mobile image format and size: What criteria truly impact your SEO?

Why does Google still insist on optimizing mobile images?

Since mobile-first indexing, Google crawls and indexes the mobile version of your site first. Heavy or poorly formatted images slow down loading times, degrade Core Web Vitals (especially LCP), and directly penalize your ranking.

The issue remains significant: a majority of sites still serve the same desktop images to mobile, with files of 2-3 MB that blow users' data budgets. Google is aware of this and continues to hammer this message because adoption is still too slow.

What does 'choosing the right format' actually mean?

Google refers to modern formats like WebP, AVIF, or JPEG XL, which offer superior compression compared to traditional JPEG and PNG. A WebP can reduce weight by 25-35% while maintaining the same visual quality.

The catch? Browser compatibility. AVIF offers the best performance but requires a fallback via the picture tag. If your tech stack doesn’t allow for this flexibility, WebP remains the optimal compromise: universally supported since 2020, offering significant weight savings.

What does Google mean by 'resized images that match the device'?

Serving an image of 1920px wide to a mobile screen of 375px is a clear waste of bandwidth. Google expects you to generate multiple versions of each image and serve the one that fits the device's resolution.

Technically, this involves using the srcset and sizes attributes of the img tag, or server-side solutions that detect the viewport and dynamically serve the correct size. Modern CDNs like Cloudflare or ImageKit automate this process, but many CMSs do it poorly by default.

• The mobile-first indexing makes mobile images critical for your crawling and ranking
• WebP and AVIF formats significantly reduce weight without perceptible quality loss
• The srcset/sizes attributes allow serving images tailored to each screen resolution
• Poor image sizing directly impacts LCP, a critical Core Web Vitals metric for SEO
• Specialized CDNs automate resizing and format conversion on the fly

Is this recommendation enough to improve your Core Web Vitals?

Google deliberately remains vague on thresholds. Optimizing image format and size does improve the LCP, but to what extent? On tested production sites, switching from JPEG to WebP + srcset reduced LCP by an average of 0.8 to 1.2 seconds. Significant, but not miraculous if your server responds in 3 seconds.

The real trap: Google doesn’t mention lazy loading, loading priority, or preloading for above-the-fold images. These techniques often have a more significant impact than just the format. [To verify]: Google suggests that format + size are sufficient, but field observations indicate that the loading strategy takes precedence.

Can image compression harm your SEO?

Compressing too aggressively degrades the perceptible quality, especially on Retina screens, which now represent over 60% of mobile traffic. A blurry or pixelated image increases bounce rates, a UX signal that Google captures via Chrome.

Finding a balance is tricky. In practice, a quality score of 80-85 for WebP offers the best weight/quality compromise for the majority of content. Critical images (e-commerce products, editorial visuals) deserve a score of 90. Testing on real devices is essential, as simulators can be misleading.

Do all CMSs handle responsive images correctly?

WordPress generates srcset since version 4.4, but with arbitrary breakpoints that may not match your design. Shopify does better with its image.srcset Liquid object, but requires manual setup.

Headless CMSs like Strapi or Contentful often outsource to a DAM that handles this properly. The problem remains with custom sites or old proprietary CMSs: implementing a robust dynamic resizing system requires non-trivial backend development. [To verify]: many sites believe they have responsive images because their img has a width of 100%, but are actually still serving the same source.

What concrete actions can you implement now?

Start with an audit of your images using PageSpeed Insights or Lighthouse. These tools pinpoint oversized or poorly formatted images. Focus first on strategic pages: home, major categories, top product listings.

Next, implement the automatic generation of multiple versions for each upload. Most modern CMSs do this natively, but check the settings: how many sizes are generated? What formats? If your stack allows it, enable automatic WebP conversion and configure a JPEG fallback for older browsers.

How can you verify that your implementation is actually working?

Inspect the source code of a mobile page and look for the srcset attributes on your img tags. You should see multiple URLs with width descriptors (e.g., image-800w.webp 800w, image-1200w.webp 1200w). Then test it on a real Android device with DevTools open to confirm that the correct file is being downloaded.

Measure the impact on LCP before/after with a tool like WebPageTest on a simulated 3G connection. If the gain exceeds 500ms, you are on the right track. Below 200ms, your bottleneck is elsewhere (server, blocking CSS, third-party JS).

What critical errors should you avoid during optimization?

Never serve an image smaller than its container on Retina screens: the device will stretch it, resulting in a blurry outcome. The rule: serve 1.5x to 2x the CSS display size for these screens. A 400px CSS container requires a real image size of 600-800px.

Also, be cautious with the SVG format for photos: it is a vector format unsuitable for bitmap images. Reserve it for logos, icons, and illustrations. Finally, do not neglect the width and height attributes on your img tags: their absence causes layout shifts, penalizing your CLS.

• Audit images with PageSpeed Insights and prioritize strategic pages
• Enable automatic generation of multiple sizes and formats (minimum WebP)
• Implement srcset and sizes on all content img tags
• Test real loading on Android and iOS devices with DevTools
• Measure the LCP impact before/after on a simulated 3G connection
• Add explicit width/height to avoid layout shifts