Mobile devices now account for more than 60% of global web traffic. Yet images remain the single biggest cause of slow mobile pages — they are heavy, often oversized, and frequently delivered in legacy formats. Research by Google shows that a one-second delay in mobile page load time leads to a 7% drop in conversions. For content creators and web developers, image optimization is one of the highest-leverage improvements you can make.

This guide walks through every technique that matters: sizing, format selection, compression targets, lazy loading, and responsive image markup. Each section includes concrete numbers so you know exactly what to aim for.

1. Right-size images for mobile screens

Most smartphone screens are between 360 px and 428 px wide in CSS pixels. Even accounting for high-DPI (Retina) displays — which double the physical pixel density — a content image rarely needs to be wider than 800 px to look sharp on any mobile screen in use today.

The problem is that cameras and design tools produce images that are 3000–6000 px wide. Uploading a 4000 px wide photo to fill an 800 px column means the browser downloads 25 times more pixel data than it needs, then scales the image down in CSS. The user's mobile data plan pays for every unnecessary byte.

Content images (blog, product): resize to a maximum of 800 px wide before uploading
Hero images: 1200–1600 px wide is sufficient for full-bleed layouts on large phones and tablets
Thumbnails and avatars: rarely need to exceed 200–300 px wide
Never upload the original camera file directly to a web page

Use Picovert Image Resizer to resize images to the correct dimensions before uploading. You can batch-process multiple files at once.

2. Choose the right format

Format choice has an outsized impact on file size. The two modern formats to know are WebP and AVIF:

WebP: 25–35% smaller than JPEG at equivalent perceptual quality. Supported by all major browsers since 2020 — Chrome, Firefox, Safari, and Edge. The safest modern format for broad compatibility.
AVIF: 40–50% smaller than JPEG. Supported by Chrome, Firefox, and Safari (iOS 16+). Browser support reached approximately 90% globally in 2025. Use it when you can accept that a small percentage of older browsers will fall back to a WebP or JPEG version.
JPEG: Still acceptable for photos if WebP is not an option, but always compress before uploading. Never use JPEG for images with text or sharp geometric edges — the block artifacts are visible.
PNG: Reserve for logos, icons, screenshots, and images that require transparency. PNG is lossless, so photo-style PNG files are 3–5× larger than equivalent WebP files. Using PNG for photographs is one of the most common and costly mistakes on mobile sites.

If your images are currently JPEG or PNG, convert them to WebP using Picovert Image Converter before uploading. The size savings alone can cut your page weight by 30%.

3. Compress images aggressively for mobile

Even after choosing the right format, most images need explicit compression to hit mobile-friendly file sizes. The difference between quality 95 and quality 75 in WebP is nearly invisible to the human eye at typical screen sizes — but the file size difference can be 3× or more.

Target file sizes for mobile:

Standard content images (blog, product detail): under 100 KB
Hero images: under 150–200 KB
Thumbnails (grids, carousels): under 30 KB
Favicons and small icons: under 5 KB

A WebP quality setting of 70–80 hits the sweet spot between visual quality and file size for most photographs. For images with fine text or technical diagrams, stay closer to 80–85.

Use Picovert Image Compressor to compress your images to these targets. You can adjust quality and preview the result before downloading.

4. Resize before uploading, not after

A common workflow mistake is to upload a full-resolution image and rely on CSS max-width: 100% to scale it down visually. CSS scaling is display-only — the browser still downloads every byte of the original file. The fix is to resize the image to the actual display width before it ever reaches your server or CDN.

Rule of thumb: the image file width (in pixels) should match the largest size at which it will be displayed on screen, multiplied by 2 to account for Retina displays. For an 800 px column on a standard layout, that means uploading an image no wider than 1600 px. For a 400 px thumbnail, no wider than 800 px.

Picovert Image Resizer lets you set an exact target width and will preserve the aspect ratio automatically. You can also batch-resize multiple images in a single session.

5. Enable lazy loading

The loading="lazy" attribute on the <img> tag tells the browser to defer downloading the image until it is close to entering the viewport. On a long page with many images, this can reduce initial page load weight by 50–80% — the user only ever downloads images they actually scroll to.

<img
  src="product-photo.webp"
  alt="Product name and description"
  width="800"
  height="600"
  loading="lazy"
>

Do not use loading="lazy" on the first image on the page (hero image, above-the-fold banner). Lazy-loading the LCP element delays your Largest Contentful Paint score and hurts Core Web Vitals.
Do use it on every image below the fold: body images, product grids, author avatars, related article thumbnails.
Most modern CMS platforms (WordPress 5.5+, Shopify, Squarespace) add loading="lazy" automatically. Verify that yours does.

6. Use responsive images with srcset

The srcset attribute lets you provide multiple image sizes and let the browser choose the most appropriate one based on the device's screen width and pixel density. A mobile phone downloads the small version; a desktop monitor downloads the large version. Nobody downloads more than they need.

<img
  src="hero-800w.webp"
  srcset="
    hero-400w.webp  400w,
    hero-800w.webp  800w,
    hero-1200w.webp 1200w
  "
  sizes="(max-width: 480px) 400px, (max-width: 900px) 800px, 1200px"
  alt="Hero image description"
  width="1200"
  height="800"
  loading="eager"
>

The sizes attribute tells the browser how wide the image will be rendered at each breakpoint, so it can calculate which source to fetch before the CSS has loaded. Always pair srcset with sizes — without sizes, the browser assumes 100vw and may download a larger image than necessary.

Generate your size variants with Picovert Image Resizer, then compress each variant with Image Compressor.

7. Avoid common mistakes

Using PNG for photos: A photo saved as PNG is typically 3–5× larger than the same photo in WebP. Always use WebP or JPEG for photographic content.
Not compressing hero images: Hero images are often above the fold and are the LCP element. A 2 MB hero image is one of the worst things you can have on a mobile page. Compress heroes to under 150 KB.
Embedding 2000 px images in 400 px containers: CSS scales the display but not the download. Always match the image dimensions to the container dimensions.
Forgetting width and height attributes: Without explicit dimensions, the browser cannot reserve space for the image before it loads, causing layout shifts (CLS). Always specify both attributes.
Lazy-loading above-the-fold images: This delays the LCP event and drops your Core Web Vitals score. Use loading="eager" or omit the attribute on hero images.
Ignoring thumbnail compression: A page that loads 20 thumbnails at 200 KB each is downloading 4 MB of images. Each thumbnail should be under 30 KB.

Mobile image optimization checklist

Format is WebP (preferred) or AVIF — not JPEG or PNG unless necessary
Content images are under 100 KB; thumbnails are under 30 KB; heroes are under 150 KB
Image width matches the display width (max 800 px for content, 1600 px for heroes)
loading="lazy" is set on every below-the-fold image
Above-the-fold hero image does not have loading="lazy"
width and height attributes are set on every image
srcset and sizes are used to serve different sizes at different breakpoints
PNG is only used for logos, icons, and images requiring transparency
Original camera files are never uploaded directly — always resize and compress first
Page is tested in Chrome DevTools device emulation with throttled mobile network

The fastest path to improvement is to start with your heaviest images. Use Picovert Image Compressor to bring file sizes under 100 KB, and Picovert Image Resizer to match dimensions to your layout — both tools run entirely in your browser with no upload required.