How to Resize Images for the Web: Dimensions, Formats and Best Practices

Images often account for the largest share of a web page's total weight. Serving photos and graphics at their original camera resolution wastes bandwidth, slows down page loads and frustrates users on mobile connections. Resizing images to the exact dimensions you need is one of the simplest performance wins available.

Why Resizing Matters

A typical smartphone photo is 4000 x 3000 pixels or larger. If you display that image in a 800 x 600 container on your website, the browser still downloads the full file before scaling it down on screen. That means your visitor is downloading megabytes of data they will never see at full resolution. Resizing before upload reduces file size dramatically, often by 80% or more, and ensures the browser can render the page faster.

Beyond performance, correctly sized images prevent layout shifts. When the browser knows the exact dimensions, it can reserve the right amount of space before the image loads, keeping the page stable and improving your Core Web Vitals scores.

Common Image Dimensions for the Web

There is no single correct size for web images, but certain dimensions appear repeatedly across modern websites and platforms:

• Hero banners: 1920 x 1080 or 1600 x 900 for full-width headers. Some designs use 2560 x 1440 for retina displays.
• Blog thumbnails: 800 x 450 (16:9) or 600 x 400 (3:2) are popular choices that balance quality and file size.
• Social media cards: 1200 x 630 for Open Graph images (Facebook, LinkedIn), 1200 x 675 for Twitter summary cards.
• Product images: 800 x 800 or 1000 x 1000 squares are standard for e-commerce listings.
• Avatars and icons: 128 x 128 to 256 x 256, often served at 2x for retina screens.
• Favicons: 32 x 32 (ICO), 180 x 180 (Apple touch icon), 192 x 192 and 512 x 512 (PWA manifest).

Preserving the Aspect Ratio

When you change the width or height of an image, the aspect ratio determines whether the result looks natural or distorted. If the original image is 1600 x 1200 (a 4:3 ratio) and you resize it to 800 x 800, the image will be squished horizontally unless you crop it first.

The safest approach is to lock the aspect ratio and only specify one dimension. Set the width to 800 and let the height calculate automatically (in this case 600), or set the height and let the width follow. Most image resizing tools, including browser-based ones, offer this lock option by default.

If you need a specific target size that does not match the original ratio, consider using a "fit" mode (which adds padding or letterboxing) or a "cover" mode (which crops to fill the frame). Both approaches avoid stretching the image.

Choosing an Output Format

The format you export to has a big impact on file size and quality:

• JPEG: Best for photographs and images with many colors. Supports quality settings from 0 to 100. A quality of 80 to 85 is usually the sweet spot where file size drops significantly but visual degradation is barely noticeable.
• PNG: Best for graphics with sharp edges, text overlays, transparency or screenshots. Lossless by default, so files are larger than JPEG for photographic content.
• WebP: A modern format that supports both lossy and lossless compression. WebP files are typically 25 to 35% smaller than JPEG at equivalent visual quality. All modern browsers support it.

As a general rule, use WebP when your audience supports it, JPEG for photographic fallbacks and PNG only when you need transparency or pixel-perfect rendering.

Quality vs File Size Tradeoff

Lossy formats like JPEG and WebP let you choose a quality level. Higher quality means larger files. The relationship is not linear. Going from quality 100 to 85 might reduce file size by 60% with almost no visible difference. Going from 85 to 50 saves another 40% but introduces noticeable artifacts, especially around text and sharp edges.

For most web use cases, a quality setting between 75 and 85 provides the best balance. Always compare the before and after visually at your target display size. Artifacts that are obvious at 100% zoom may be invisible at the size the image will actually render on screen.

How Browser-Based Resizing Works

Client-side image resizing uses the HTML Canvas API. The process loads the image into an Image element, draws it onto a canvas at the target dimensions, then exports the canvas as a data URL or Blob. Here is the basic flow:

const canvas = document.createElement("canvas");
canvas.width = targetWidth;
canvas.height = targetHeight;

const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, targetWidth, targetHeight);

canvas.toBlob(
  (blob) => { /* download or upload the blob */ },
  "image/webp",
  0.85 // quality
);

This approach is privacy-friendly because the image never leaves the user's browser. No server upload is required, and the entire operation runs in memory on the client device.

Responsive Images with srcset

Even after resizing, you may want to serve different sizes for different screen widths. The HTML srcset attribute tells the browser which image file to download based on the viewport width and device pixel ratio:

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="Hero image"
/>

With this markup, a phone on a slow connection downloads the 400px version while a desktop retina display gets the 1600px version. Combined with proper resizing, this technique can cut image bandwidth by 50% or more for mobile visitors.

Best Practices

• Always resize images to the largest size they will be displayed at, not larger. Serve 2x versions only for hero images or key visuals where sharpness matters.
• Lock the aspect ratio to avoid distortion. Only unlock it when you intentionally want to crop or stretch.
• Use WebP as your primary format. Fall back to JPEG for older browsers if needed.
• Set quality between 75 and 85 for lossy formats. Test visually at the display size.
• Include explicit width and height attributes on your img tags to prevent layout shifts.
• Use loading="lazy" for below-the-fold images and fetchpriority="high" for the LCP image.
• Combine resizing with compression. Resize first to reduce the pixel count, then compress to reduce the byte count.