How to Optimize Images for Your Website and Improve PageSpeed

Load speed has been a confirmed Google ranking factor since 2018 for desktop and 2021 for mobile. Beyond that, it directly affects conversion rate: every extra second of load time increases page abandonment by up to 32%, according to Google's own data. And in e-commerce, Portent studies show pages that load in 1 second convert up to 3 times more than pages that take 5 seconds.

Images typically account for 50–80% of a web page's total weight. Optimizing them correctly is therefore the highest-impact intervention for any site's performance.

What PageSpeed Insights checks about images

Google PageSpeed Insights (PSI) analyzes your page and flags image-related issues in several categories. The most common are:

• "Serve images in next-gen formats": appears when the site uses JPG or PNG where WebP (or AVIF) would significantly reduce size.
• "Properly size images": appears when the image sent to the server is larger than the space it's displayed in. Example: sending a 2000px photo to display at 400px.
• "Defer offscreen images": appears when images below the fold load along with the rest of the page instead of only when the user scrolls to them (lazy loading).
• "Efficiently encode images": appears when the compression applied to images still has room for reduction without noticeable quality loss.
• "LCP image": identifies which image is the page's Largest Contentful Paint — the main element that determines one of the Core Web Vitals metrics.

The 6 principles of image optimization for the web

1. Use the right format for each type of image

Choosing the format is the highest-impact decision, even before any compression:

WebP produces files 25–35% smaller than JPG and 20–30% smaller than PNG at equivalent visual quality. In 2026, compatibility exceeds 97% of browsers in use — there's no longer a technical reason to avoid it on new sites.

2. Compress without giving up visible quality

Compression is the process of reducing file size while keeping the image's dimensions. For JPG photos, lowering quality from 100% to 80% produces files 5–10 times smaller with an imperceptible difference on screen. That's the ideal range for the web.

Practical file-size references by image type:

• Hero / main banner: under 200 KB
• Product photo (e-commerce): 50–150 KB
• Blog article image: 50–120 KB
• Thumbnail: 10–30 KB
• Logo (PNG/WebP): under 30 KB
• SVG icons: under 5 KB

3. Upload images at their real display size

This is the most common mistake and also one of the most impactful: uploading images much larger than the space they're displayed in. The browser downloads the full image and then discards the excess pixels when rendering.

Examples of the cost of this mistake:

• A 3000×3000px product photo shown in a 600×600px box: the browser downloads 9 million pixels and uses only 360,000 — 96% wasted.
• A 4000px-wide banner on a site with a max layout of 1440px: 63% of downloaded pixels are discarded immediately.

The rule is simple: the image sent to the server should be at most double the display dimensions (double to cover Retina/HiDPI screens). For a 600px-wide space, upload at most 1200px.

Use the ImageTools Image Resizer to adjust dimensions before uploading, entering exact values in pixels or percentage.

4. Implement lazy loading

Lazy loading is the technique of loading images only when they're about to enter the visible screen area, instead of downloading all page images at once on initial load. The impact is significant: on pages with many images (like product listings or long articles), lazy loading can reduce the initial page weight by 60–80%.

The simplest implementation is native in modern HTML — just add the loading="lazy" attribute to image tags:

<!-- Image that should load immediately (above the fold) -->
<img src="main-banner.webp" alt="Banner" loading="eager">

<!-- Images that can wait (below the fold) -->
<img src="product-1.webp" alt="Product 1" loading="lazy">
<img src="product-2.webp" alt="Product 2" loading="lazy">

Important: never apply loading="lazy" to the main image above the fold (hero, banner, first product photo). Doing so delays LCP — the most important Core Web Vitals metric — and directly hurts your PageSpeed score.

5. Set width and height on image tags

When the browser starts loading a page, it builds the layout before knowing the image sizes. If width and height aren't set, the browser doesn't reserve the correct space — and when the image loads, the layout "jumps," shifting text and buttons. This is what PageSpeed measures as Cumulative Layout Shift (CLS), another Core Web Vital.

<!-- No dimensions: causes layout shift -->
<img src="product.webp" alt="Product">

<!-- With dimensions: reserves the correct space from the start -->
<img src="product.webp" alt="Product" width="600" height="600">

The width and height values in HTML don't need to match the visual display size — they just define the aspect ratio. CSS handles the display size.

6. Use responsive images with srcset

The srcset attribute lets you provide different versions of an image for different devices — sending a smaller image to phones and a larger one to desktops. The browser automatically picks the most suitable version for the user's screen.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="Product"
  width="800"
  height="800"
  loading="lazy"
>

For e-commerce sites with many product photos, srcset can reduce the data transferred to mobile users by 40–60%.

Complete image optimization checklist

Use this list before publishing any page or updating existing images:

• ☐ Images in WebP (or SVG for vectors)
• ☐ Compression applied — photos under 150 KB whenever possible
• ☐ Correct dimensions — no more than double the display space
• ☐ loading="lazy" on all images below the fold
• ☐ loading="eager" (or no attribute) on the main image above the fold
• ☐ width and height set on every <img> tag
• ☐ Descriptive alt attribute on all images (accessibility + SEO)
• ☐ srcset for images that appear at very different sizes on mobile vs. desktop
• ☐ LCP image without loading="lazy" and with fetchpriority="high" if possible

Optimization by platform

WordPress

WordPress automatically converts to WebP starting with version 6.1 if the server supports it. To be sure: install an optimization plugin like Imagify, ShortPixel, or Smush — they compress, convert to WebP, and add lazy loading automatically to images already in the media library.

Shopify

Shopify has automatically converted images to WebP and served the correct version per device since 2021. What the store owner still needs to control manually is the size of uploaded images — 2048×2048px is recommended for product photos, which Shopify resizes for each display context.

Wix, Squarespace, and other builders

Most modern builders already apply compression and lazy loading automatically. What still depends on the user is uploading images with reasonable dimensions — uploading 8 MB camera photos overloads the server and can result in variants larger than necessary.

Plain HTML/CSS sites or frameworks (Next.js, Nuxt, etc.)

In these cases, all optimization is the developer's responsibility. Next.js's <Image> component, for example, automates lazy loading, srcset, and WebP conversion. For frameworks without that abstraction, manual optimization following the checklist above is necessary.

How to measure the impact of optimizations

After applying optimizations, measure the result with these tools:

• Google PageSpeed Insights (pagespeed.web.dev) — full analysis with per-element diagnostics, separated for mobile and desktop.
• Google Search Console → Page Experience report — shows the state of Core Web Vitals with real user data from your site.
• WebPageTest.org — detailed technical analysis with a loading waterfall, useful for identifying exactly which image is delaying LCP.
• Chrome DevTools → Network — filter by "Img" to see all loaded images, their sizes, and download times.

Frequently asked questions