How to Resize Images for Web Optimization – Guide

A modern smartphone camera produces a 12–24 megapixel photo at 3–8 MB. Serving that file on a web page is the single most common cause of slow page loads — and slow pages directly lower Google rankings, increase bounce rates, and reduce conversions.

Google's Core Web Vitals report assigns a Largest Contentful Paint (LCP) score to your page. LCP measures how long it takes for the largest visible element — usually a hero image — to fully load. Pages with LCP under 2.5 seconds are rated "Good." Most unoptimized images push LCP above 4 seconds on mobile, which Google rates "Poor" and deprioritizes in rankings.

Why image size directly affects rankings

The fix is straightforward: resize images to the display dimensions (never serve larger than needed) and convert to the most efficient format. Both steps are free and require no coding.

Reference table: optimal dimensions by use case

Use this as your go-to reference when preparing images. The target file sizes assume WebP format with 80% quality — adjust for JPEG by adding ~30%.

Format decision matrix: WebP vs JPEG vs PNG vs AVIF

Format choice is often more impactful than dimension choice. A 1200px JPEG at 90% quality can be 400 KB; the same image as WebP at 80% quality is typically 100–140 KB with no visible difference.

Decision rules

• Default choice for new websites: WebP for all raster images. Convert existing JPEG/PNG assets using Image Converter or WebP Converter.
• Transparency required: Use WebP (not PNG — WebP supports transparency at better compression).
• Logo or icon: SVG if the asset was created as a vector. PNG if it's a raster scan.
• Email campaigns: JPEG — email clients have poor WebP support. Keep to 100–200 KB.
• Maximum compression (cutting-edge sites): AVIF with JPEG or WebP fallback via <picture> element.

File size benchmarks — the same image, different formats

The table below shows approximate file sizes for a typical outdoor photograph (complex colors, sky, foliage) at 1200×800px across formats and quality settings. These are realistic averages — actual results vary by image content.

Step-by-step: resize and optimize images for web

Retina and HiDPI images — when to use 2× assets

Modern devices render at device pixel ratios (DPR) of 2× (MacBook Retina, iPhone, most flagship Android) or 3× (iPhone Pro, some Android). A CSS image slot of 800px physical CSS pixels is rendered at 1600px physical pixels on a 2× screen. If you only serve an 800px image, it will appear blurry on retina displays.

The srcset solution

Use the srcset attribute to serve the right image for each screen density. Prepare three sizes:

The browser automatically selects the appropriate source based on the device's pixel density and the sizes attribute. The 1× file is served on low-DPI screens; the 2× file on Retina; the 3× file on super-HiDPI. No JavaScript needed.

Core Web Vitals: how images affect LCP and CLS

Largest Contentful Paint (LCP)

LCP is Google's primary measure of perceived load speed — it records when the largest visible element on the page finishes loading. For most pages, that element is a hero image or above-the-fold banner. Google's thresholds:

An unoptimized 3 MB hero image on a typical 4G connection (10 Mbps) takes approximately 2.4 seconds to transfer alone — before the browser decodes and renders it. Optimized to 150 KB WebP, transfer time drops to ~0.12 seconds.

Cumulative Layout Shift (CLS)

CLS measures visual stability — how much the page content shifts while loading. Images without explicit width/height attributes cause layout shift because the browser doesn't know how much space to reserve until the image loads. The fix is simple: always add width and height attributes.

The browser uses the ratio of width/height to calculate aspect ratio and reserve the correct space before the image arrives. Even if CSS scales the image differently, the ratio prevents layout shift.

Developer tips: srcset, lazy loading, and CDN

Lazy loading

Add loading="lazy" to all images below the fold. The browser will not fetch these images until they are about to enter the viewport — reducing initial page load bandwidth significantly on image-heavy pages.

Do not lazy-load the LCP image (hero). It should load as early as possible. Use fetchpriority="high" on the LCP image to signal the browser to prioritize it.

The picture element for format fallbacks

The browser picks the first format it supports. AVIF for cutting-edge browsers, WebP for all modern browsers, JPEG as a universal fallback. This pattern delivers maximum compression without sacrificing compatibility.

CDN image optimization

If you're using Cloudflare, Vercel, or a CDN with image optimization, you can often skip manual format conversion. Cloudflare's Polish feature and Vercel's Image Optimization API automatically serve WebP or AVIF to compatible browsers from the original JPEG/PNG you upload.

If you're not on an image-transforming CDN, manual optimization using the tools above is the most reliable approach — the file sizes are deterministic and you know exactly what will be served.

Naming and alt text for SEO

• File names: Use descriptive, keyword-rich names with hyphens: laptop-on-desk-productivity.webp, not IMG_4523.jpg.
• Alt text: Describe the image content for screen readers and Google Image Search. 8–15 words, factual, no keyword stuffing.
• Structured data: For product images, add ImageObject schema. For blog images, include the image URL in the Article schema's image property.

Image optimization checklist