MiniPxMiniPx
PricingBlogAccount

Image compression for SEO

Faster pages, better Core Web Vitals, better rankings. The practical guide + a free tool that does responsive sets without a CDN.

Generate a responsive set →

One input becomes 4 sizes × 3 formats. Pro feature.

Image Compression for SEO — Free, Fast & Private

Images are usually the biggest contributor to slow page loads, and the Largest Contentful Paint (LCP) is often the hero image on a marketing page or article. Google's Core Web Vitals score directly affects SEO ranking — slow LCP, slow CLS, slow INP all hurt visibility. Compressing images well is one of the highest-leverage SEO optimisations available.

The minimum bar in 2026: serve modern formats (AVIF and WebP) with a JPEG fallback, deliver responsive sizes via srcset, and keep the LCP image under 100 KB on mobile. None of this requires a paid CDN — MiniPx generates the full set client-side and you upload it to whatever static host you already use.

Format choice in 2026

AVIF gives the best compression ratio (typically 30-50% smaller than equivalent-quality JPEG). WebP is a safer fallback with broader support. JPEG remains the universal fallback for very old browsers. The right strategy is to serve all three via <picture>, letting the browser pick the best supported format.

Responsive sizes via srcset

Serving a 4K hero image to a phone is wasteful. Use srcset to give browsers multiple sizes (typically 150 / 640 / 1280 / 2560 px wide) and let the browser pick the right one based on viewport and DPR. The MiniPx responsive set generator takes one input and produces the full matrix in one go.

Beyond formats: LCP optimisations

Once your images are compressed well, the remaining LCP wins are: preload the hero image via <link rel="preload" as="image">, use fetchpriority="high" on the <img> tag, set explicit width and height attributes to prevent CLS, and serve from a CDN if your hosting is slow. None of those require a special image tool — they're HTML hygiene.

The MiniPx + Netlify/Vercel workflow

Use MiniPx Pro to produce a responsive set (4 sizes × 3 formats = 12 files) named with the template hero-{width}.{ext}. Drop the ZIP into your repo's public/img/ directory. Reference via <picture> with three <source> tags (AVIF, WebP, JPEG) plus appropriate srcset + sizes attributes. Netlify or Vercel's CDN serves them globally. Cost: zero. Performance: usually beats third-party image CDNs because there's no extra round-trip.

How it works

  1. Audit current image weight: Run PageSpeed Insights or Lighthouse. Look at LCP size and the Network tab's image transfer total.
  2. Generate a responsive set with AVIF + WebP + JPG: Use the MiniPx responsive image generator. One input becomes 12 outputs across 4 sizes and 3 formats.
  3. Serve via <picture> + srcset: Replace your single <img> with a <picture> containing three <source> tags (AVIF, WebP, JPEG) and the correct srcset/sizes for your layout breakpoints.
  4. Preload the LCP image: Add <link rel="preload" as="image" href="..." imagesrcset="..." imagesizes="..."> in <head> for the hero. fetchpriority="high" on the <img> tag too.
  5. Re-run PageSpeed: Confirm LCP improved. Mobile LCP under 2.5s is the target.

Frequently asked questions

How much does image compression affect SEO?
Indirectly via Core Web Vitals. Google uses LCP, CLS, and INP as ranking signals. Faster image delivery improves LCP, which improves your ranking — especially on mobile, where image weight matters most.
Do I need a paid CDN for responsive images?
No. Cloudinary, Imgix, and Bunny are great but $20-100/month at scale. MiniPx generates the full responsive set client-side; you upload to whatever static host (Netlify, Vercel, S3, your own server) you already pay for.
AVIF or WebP — which should I prioritise?
Serve both via <picture>. AVIF wins on file size (30-50% smaller than WebP at equivalent quality) but has slightly worse encode speed. Browsers pick the best supported format automatically.
What's the right number of breakpoints?
Four is usually enough: 150px (low-DPR phones / thumbnails), 640px (single-column mobile), 1280px (most laptops), 2560px (4K and high-DPR retina). More breakpoints = diminishing returns + more files to manage.
Does Lighthouse actually penalise raw JPEGs?
Yes — Lighthouse explicitly flags "Serve images in next-gen formats" if you're shipping only JPEG/PNG. Switching to AVIF + WebP usually adds 10-30 points to the Performance score for image-heavy pages.
Pairs well with which tools here?
/responsive-image-generator/ for the set, /multi-format-image-export/ for AVIF/WebP/JPG fan-out, /image-bulk-rename/ for predictable filenames, /saved-presets-image-compression/ to bundle the whole workflow into one click.

All Image Tools

AI Tools

Pro Tools

Compress

Convert

Resize

Compress to Size

Compress for Platform

Tools & Utilities

By Device

Compare