Web performance guide

Resize images for responsive sites and Core Web Vitals

A practical guide to responsive image dimensions, Core Web Vitals, srcset, and compression without layout shifts.

Updated July 20, 2026 by Tinify.dev

Serving a 3000-pixel image in a 400-pixel card wastes bytes and decoding work. Good image performance starts by producing the dimensions the layout actually needs, then letting the browser select the closest variant.

Start with the rendered size

Inspect the image at each layout breakpoint. Create a small set of useful widths instead of a variant for every possible screen. Keep the aspect ratio unless the design intentionally uses a crop.

For example:

<img
  src="garden-960.webp"
  srcset="garden-480.webp 480w, garden-960.webp 960w, garden-1440.webp 1440w"
  sizes="(max-width: 640px) 100vw, 50vw"
  width="960"
  height="640"
  alt="A garden after summer rain"
/>

The browser uses srcset and sizes to choose a candidate. The web.dev responsive image guide explains how those values work together.

Protect Core Web Vitals

Google recommends evaluating Core Web Vitals at the 75th percentile. The current good thresholds are LCP within 2.5 seconds, INP at or below 200 milliseconds, and CLS at or below 0.1. See Google's Core Web Vitals documentation for the definitions and measurement guidance.

Images affect those metrics in a few predictable ways:

Set width and height, or an equivalent aspect-ratio, so the browser reserves space and avoids layout shifts.
Do not lazy-load the likely LCP image. Lower-page images are better lazy-loading candidates.
Resize oversized sources before compression. Compression alone does not remove unnecessary pixels.
Keep image decoding and client-side animation work modest on lower-powered devices.

Resize without surprises

Tinify accepts exact width and height, proportional scaling, or an aspect-ratio-preserving fit. Values must be positive, and the result must stay within the 50-megapixel safety limit.

Two files may share the same name, so a reliable batch workflow identifies them by job ID rather than filename. Resize and crop can legitimately increase byte size; Tinify reports that as an increase instead of showing a negative saving.

Validate the page, not only the file

After exporting, test the real page at mobile and desktop widths. Check the chosen currentSrc, layout stability, visible sharpness, and transfer size. Google's image SEO guidance also recommends descriptive surrounding content, useful alternative text, and accessible pages.