Why image optimization is important
Large or late-loading images can delay the main content and worsen LCP. Start with the images actually loaded by the page and measure their contribution. Smaller transfers can improve loading, but do not guarantee search rankings or a particular conversion increase.
Choosing an image format
Compare JPEG, PNG, WebP and AVIF using representative images and an acceptable visual quality level. The smallest result depends on the image, encoder and settings. Check the browsers you support and provide a fallback when needed. SVG is useful for suitable vector artwork.
| Format | Strengths | Trade-offs | Typical uses |
|---|---|---|---|
| JPEG | Often efficient for photographs | Lossy compression; no alpha transparency | Photos |
| PNG | Lossless encoding and transparency | Can be large for photos | Graphics requiring lossless detail |
| WebP | Lossy or lossless encoding, transparency | Verify older target browsers and actual file size | Photos, graphics, animation |
| AVIF | Can compress well at useful quality | Encoding cost and target-browser support need checking | Photos and graphics |
| SVG | Scales as vector artwork | Not a replacement for photographic raster images | Icons, logos, illustrations |
Responsive images: srcset and sizes
Use srcset to list image candidates and sizes to describe their rendered width. The browser chooses a candidate using that information and device conditions. The slot widths below are examples: match them to your actual CSS. This example is for an offscreen image; replace the illustrative alt text with an appropriate description and use the real aspect ratio.
<img
src="example-400w.jpg"
srcset="example-400w.jpg 400w, example-800w.jpg 800w, example-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Mountain lake"
width="1200"
height="800"
loading="lazy"
/>
Lazy loading for offscreen images
loading="lazy" lets the browser defer an offscreen image until it approaches the viewport. It may start loading before the image becomes visible. The exact timing depends on the browser and conditions.
- Deferring non-critical images can save initial transfer and reduce competing requests.
- Do not lazy-load the main above-the-fold image, particularly the likely LCP image. Delaying that image can worsen LCP rather than improve it.
- Reserve space with suitable dimensions or an aspect ratio to reduce layout shifts.
Example for an image below the initial viewport. The dimensions are illustrative; use those of the actual file:
<img src="example.webp" alt="Mountain lake" width="1200" height="800" loading="lazy" />
Tools and services for optimization
| Tool | Description | Link |
|---|---|---|
| TinyPNG | Online service for compressing PNGs and JPEGs | TinyPNG |
| ImageOptim | Image Optimization on macOS | ImageOptim |
| Squoosh | A powerful tool from Google | Squoosh |
Practical tips and examples
- Compare formats at an acceptable visual quality; add a fallback where needed.
- Match
srcsetcandidates andsizesto the actual layout and device needs. - Apply
loading="lazy"to offscreen images, keeping the likely LCP image eager. Native lazy loading usually needs no Intersection Observer; custom behavior should solve a specific requirement. - Automate resizing and compression in the build or delivery pipeline, then inspect the output.
- Compare PageSpeed Insights and relevant Web Vitals before and after, including LCP and CLS, under comparable conditions.
Verify the published result
Check the requested image candidate, transferred bytes, visual quality and loading priority. Repeat on representative mobile and desktop layouts. Confirm that the main image appears promptly and the layout remains stable.
Reduce unnecessary bytes while preserving the content and visual quality the reader needs.
Use our speed audit to investigate a page, then verify the specific image changes in the browser. Record measured improvements separately from untested assumptions.