How to optimize images for web performance

Images are usually the heaviest part of a web page, and on most pages the largest thing visible on first load is an image. That makes them the single biggest factor in how fast a page feels. The good news is that the fixes are well understood. This checklist covers them in the order that pays off most.

How images affect Core Web Vitals

Google’s Core Web Vitals measure real visitors’ experience, and a page passes when at least 75% of visits meet the “good” threshold. Two of the three metrics depend heavily on images.

1. Serve the right dimensions

An image should be no larger than the space it fills, multiplied by the screen’s pixel density. Most phones and many laptops have 2× screens, so an image shown 800 CSS pixels wide needs a file about 1600 pixels wide. Anything beyond that is downloaded and thrown away.

• Full-width hero images: 1920–2560 px wide.
• Images in an article column: 1200–1600 px.
• Cards and thumbnails: 400–800 px.

Camera and phone photos are often 4000 pixels wide or more, so resizing alone can remove most of their weight. The image resizer scales a whole folder to fit a width and height, keeping proportions and leaving smaller images as they are.

2. Use modern formats, with a fallback

WebP is usually 25–35% smaller than JPG at the same visual quality and works in every modern browser. AVIF is often smaller again and is supported by current versions of Chrome, Edge, Firefox and Safari. The picture element lets each browser take the best format it supports:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Product on a desk"
       width="1920" height="1080">
</picture>

If you only want one format, WebP is the safe choice for websites today. Our comparison of JPG, PNG and WebP explains the trade-offs.

3. Compress at a sensible quality

Photos exported from editors and cameras are often saved at quality 90 or higher, which is far more than a screen needs. Re-encoding at 75 usually cuts the size dramatically with no visible change. Graphics and screenshots are different: keep them sharp with PNG palette reduction or lossless WebP rather than lossy settings that blur text.

4. Let the browser pick the size with srcset

One file cannot suit a phone and a 4K monitor. With srcset and sizes, you list several widths and tell the browser how wide the image will be shown; it downloads the smallest one that looks sharp.

<img src="/img/photo-1200.webp"
     srcset="/img/photo-800.webp 800w,
             /img/photo-1200.webp 1200w,
             /img/photo-1920.webp 1920w"
     sizes="(max-width: 768px) 100vw, 800px"
     width="1200" height="800" alt="…">

Many frameworks and hosting platforms generate these versions for you. If yours does not, export each width once with Graviton’s Resize, typing 1920, 1280 and 800 as the width, and keep a consistent naming scheme.

5. Load the important image first

• Add fetchpriority="high" to the LCP image so the browser requests it early.
• Never lazy-load the LCP image. Use loading="lazy" only for images below the fold.
• Always set width and height (or a CSS aspect-ratio) so the browser reserves space and the layout does not shift.

Don’t forget the images outside img tags

• CSS background images are found late, after the stylesheet loads, and they cannot use loading or fetchpriority. If a background image is your LCP element, preload it with <link rel="preload" as="image">, or switch it to a normal img element.
• Logos and icons are usually best as SVG, which stays sharp at any size and is often tiny. Use PNG or WebP only when the artwork is not available as vectors.
• Animated GIFs are often the heaviest file on a page. A short muted video is far smaller; if it has to stay a GIF, compress it and keep every frame with the GIF compressor.

6. Cache images for a long time

Images rarely change, so returning visitors should not download them twice. Give each version a unique file name (for example with a content hash) and serve it with a long cache lifetime such as Cache-Control: public, max-age=31536000, immutable. A CDN shortens the distance the bytes travel.

Measure before and after

Run PageSpeed Insights on your key pages. It shows field data from real Chrome users when enough is available, and a lab test that flags oversized and poorly compressed images. In Chrome DevTools, the Network panel filtered to images shows each file’s size, and hovering an image in the Elements panel shows its rendered size next to its intrinsic size. A large gap between the two means the image needs resizing.

A simple workflow with Graviton

Graviton is a browser tool, so it suits images you prepare by hand before uploading them to your site or CMS: drop in up to 250 images, resize them to 1920 px and convert them to WebP or AVIF. Download them one by one or as a ZIP: 3 a day on Free, unlimited on Pro. Files keep their names with the new extension, so updating references is simple. Everything runs on your device, and images are never uploaded. For images your app generates on the fly, an image CDN or a build step is the better fit.

Ready to go further? Try converting your largest photos with JPG to AVIF, or turn transparent graphics into smaller files with PNG to WebP.