Optimize images for your website

Why images matter for page speed

Images are usually the heaviest part of a web page, and very often the largest visible element too. That makes them central to Largest Contentful Paint (LCP), the Core Web Vitals metric for how fast the main content appears. A good LCP is 2.5 seconds or less. Images also affect Cumulative Layout Shift (CLS) when they load without reserved space and push the content around.

Optimizing images comes down to six habits, roughly in order of impact:

1. Serve the right pixel dimensions.
2. Use a modern format.
3. Compress to visually lossless quality.
4. Reserve space with width and height.
5. Lazy-load what’s off screen.
6. Prioritize the LCP image.

1. Right-size for the display

A 4000 px photo in an 800 px column makes every visitor download about 25 times more pixels than they can see. Resize to the largest size the image is displayed at, and up to twice that for high-density screens.

A practical set of widths for content images is 640, 960, 1280, and 1920 px. Create them with Resize by Width. Run it once per width on the same batch of originals, so each size comes from the full-quality source.

Then let the browser pick the right file with srcset and sizes:

<img
  src="/img/team-1280.jpg"
  srcset="/img/team-640.jpg 640w,
          /img/team-960.jpg 960w,
          /img/team-1280.jpg 1280w,
          /img/team-1920.jpg 1920w"
  sizes="(min-width: 1024px) 800px, 100vw"
  alt="Our support team at the Lisbon office"
  width="1280"
  height="853">

sizes tells the browser how wide the image will be displayed: 800 px on large screens and the full viewport width otherwise. The browser combines that with the device’s pixel density to choose a candidate from srcset.

2. Use AVIF and WebP, with a fallback

At the same visual quality, WebP is typically 25–35% smaller than JPG, and AVIF often goes further, especially on photos with smooth areas. Both support transparency. All current major browsers decode both, but a <picture> element with a JPG fallback costs nothing and covers old devices and unusual webviews:

<picture>
  <source type="image/avif"
          srcset="/img/team-960.avif 960w, /img/team-1920.avif 1920w"
          sizes="(min-width: 1024px) 800px, 100vw">
  <source type="image/webp"
          srcset="/img/team-960.webp 960w, /img/team-1920.webp 1920w"
          sizes="(min-width: 1024px) 800px, 100vw">
  <img src="/img/team-1280.jpg"
       srcset="/img/team-960.jpg 960w, /img/team-1920.jpg 1920w"
       sizes="(min-width: 1024px) 800px, 100vw"
       alt="Our support team at the Lisbon office"
       width="1280" height="853"
       loading="lazy" decoding="async">
</picture>

The browser uses the first <source> whose type it supports. Order matters, so list AVIF first, then WebP. The <img> provides the fallback and carries alt, dimensions, and loading hints.

To produce the files, use Convert to AVIF and Convert to WebP. AVIF encoding is noticeably slower, taking seconds per large photo, so expect a batch to take a moment. It runs in a background worker, so the page stays responsive.

3. Compress to “visually identical”

Choosing one quality number for every image is guesswork. A detailed landscape needs more quality than a plain product shot. The Image Optimizer handles this automatically. It encodes each image at several quality levels, measures visual similarity to the original with SSIM, and keeps the smallest version that still looks identical. It also strips metadata and can cap the long edge at 1920, 2560, or 3840 px. PNGs are optimized losslessly, so the pixels don’t change.

If you’re going straight to AVIF, Optimize AVIF takes JPG, PNG, WebP, or AVIF input and produces perception-tuned AVIF.

4. Always set width and height

Without dimensions, the browser doesn’t know how much space to reserve until the image downloads, so the text below jumps down. That’s layout shift, and it hurts CLS.

Set width and height to the image’s intrinsic pixel size, or any values with the same aspect ratio, and let CSS handle the responsive scaling:

img {
  max-width: 100%;
  height: auto;
}

Modern browsers compute the aspect ratio from the attributes and reserve the correct space even before the file arrives. You can check an image’s exact pixel size and aspect ratio with the Image Dimensions Checker.

5. Lazy-load below the fold, not above it

loading="lazy" delays downloading an image until it’s about to scroll into view. Use it on images further down the page, such as article images below the first screen, galleries, and footers.

Don’t lazy-load the LCP image. Lazy loading the hero means the browser waits until layout is known before even requesting it, which directly delays LCP. The same applies to anything visible in the first viewport on common screen sizes.

6. Prioritize the LCP image

For the main above-the-fold image, do the opposite and tell the browser it’s important:

<img src="/img/hero-1600.webp"
     srcset="/img/hero-1000.webp 1000w, /img/hero-1600.webp 1600w, /img/hero-2400.webp 2400w"
     sizes="100vw"
     alt="Hikers on a ridge at sunrise"
     width="1600" height="900"
     fetchpriority="high">

fetchpriority="high" moves the request ahead of less important resources. Use it on one image per page, or two at most. If the hero is a CSS background, the browser can’t discover it early. Prefer an <img>, or add a preload:

<link rel="preload" as="image" href="/img/hero-1600.webp"
      imagesrcset="/img/hero-1000.webp 1000w, /img/hero-1600.webp 1600w"
      imagesizes="100vw" fetchpriority="high">

A repeatable workflow

1. Keep full-resolution originals in a separate folder. Never optimize the masters.
2. Resize copies to your width set (for example, 640, 960, 1280, 1920) with Resize by Width.
3. Convert each size to AVIF and WebP. Optimize the JPG fallbacks with the Image Optimizer.
4. Add <picture> with srcset, sizes, width, and height.
5. Lazy-load below the fold. Mark the hero with fetchpriority="high".
6. Measure with your browser’s performance tools and confirm which element is the LCP.

Other quick wins

• Logos and icons: Use SVG where you have a vector source, and compress it to remove editor metadata.
• Screenshots: Reduce the PNG palette or convert to WebP. Never ship 5 MB PNG screenshots.
• Social preview images: These aren’t part of your page load, but a 1200×630 image keeps link previews sharp. See the Open Graph Image Resizer.

All the Pixellin tools above run in your browser, so unreleased product images and client assets never leave your machine during the build.