A Practical Guide to Image Sizing for Website Performance

Understanding Digital Image Fundamentals

Before diving into optimization techniques, understanding the basics of digital images helps you make informed decisions about sizing and compression.

Pixels vs. Display Size

A pixel is the smallest unit of a digital image. When we say an image is "1920x1080 pixels," that's its intrinsic size—the actual data it contains. The display size is how large the image appears on screen, controlled by CSS or HTML attributes.

The relationship between these two determines whether your image appears sharp or blurry. An image displayed larger than its pixel dimensions will appear soft. An image displayed smaller than its pixel dimensions wastes bandwidth—the browser downloads data it immediately discards.

The DPI Myth

Aspect Ratio and Cropping

Aspect ratio is the proportional relationship between width and height. Common ratios include 16:9 (widescreen), 4:3 (traditional), 1:1 (square), and 3:2 (photography). Maintaining consistent aspect ratios across your site creates visual harmony and simplifies responsive design.

When resizing images, decide whether to crop to fit a target ratio or letterbox to preserve the original. For most web use, cropping to a consistent ratio provides the cleanest results.

Raster vs. Vector

For logos and icons, use SVG whenever possible. Vector graphics remain crisp at any size and typically have smaller file sizes than raster equivalents for simple shapes.

Choosing the Right Image Format

The format you choose affects both file size and quality. Modern formats offer significant compression improvements over legacy options, but browser support varies.

JPG (JPEG)

JPG remains the workhorse format for photographs and images with complex color gradients. It uses lossy compression, discarding image data to reduce file size. At quality settings of 80-85, JPG produces excellent results with file sizes 60-75% smaller than uncompressed images.

JPG struggles with sharp edges and text, where compression artifacts become visible. It also lacks transparency support. Use JPG for photographs and complex imagery where slight quality loss is acceptable. Compress JPG images to reduce file sizes while maintaining quality.

PNG

PNG uses lossless compression, preserving every pixel exactly. This makes it ideal for images requiring perfect quality: logos, screenshots, graphics with text, and images needing transparency.

The tradeoff is larger file sizes. A PNG photograph can be 3-5x larger than an equivalent JPG. Use PNG only when you need transparency or pixel-perfect reproduction. Compress PNG images to reduce file sizes without quality loss.

WebP

WebP is a modern format developed by Google that supports both lossy and lossless compression, plus transparency and animation. A lossy WebP is typically 25-35% smaller than a comparable JPG with equivalent visual quality.

With browser support now exceeding 96%, WebP is a practical default for most web images. You can convert JPG to WebP or PNG to WebP in bulk to modernize existing image libraries.

AVIF

AVIF offers the best compression efficiency currently available, often producing files 50% smaller than JPG with no perceptible quality loss. It supports both lossy and lossless compression, transparency, and high dynamic range.

The main limitation is browser support—currently around 95% globally. AVIF also has slower encoding times, making it less practical for real-time processing. Use AVIF as a progressive enhancement, with WebP or JPG fallbacks. You can convert JPG to AVIF or PNG to AVIF in bulk for maximum compression.

Format Comparison

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

To create format variants for the <picture> element, convert your source images to multiple formats using Convert.FAST. Process entire folders at once to generate AVIF, WebP, and JPG versions of every image.

For a deeper understanding of compression trade-offs, see our guide on image formats. For detailed compression quality settings and metadata handling, see our guide on how to optimize images for web.

Serving Responsive Images for Every Device

Modern websites must serve users on devices ranging from small mobile phones to 4K desktop monitors. Responsive images ensure each device receives an appropriately sized file—not a one-size-fits-all approach that wastes bandwidth on mobile or looks blurry on desktop.

Understanding srcset

The srcset attribute provides the browser with multiple image sources at different widths. The browser then selects the most appropriate one based on the viewport size and device pixel ratio.

<img
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w,
          hero-1600.jpg 1600w,
          hero-2000.jpg 2000w"
  sizes="100vw"
  src="hero-1200.jpg"
  alt="Hero image"
  width="1200"
  height="600">

The sizes Attribute

The sizes attribute tells the browser how wide the image will actually display at different viewport sizes. This helps it select the optimal source from srcset before downloading.

<img
  srcset="product-300.jpg 300w,
          product-600.jpg 600w,
          product-900.jpg 900w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         300px"
  src="product-600.jpg"
  alt="Product image">

Art Direction with Picture

Sometimes you need different crops or compositions for different screen sizes—not just different resolutions of the same image. The <picture> element enables art direction by letting you specify completely different images for different media conditions.

<picture>
  <source media="(min-width: 1024px)" srcset="hero-wide.jpg">
  <source media="(min-width: 640px)" srcset="hero-medium.jpg">
  <img src="hero-mobile.jpg" alt="Hero image">
</picture>

Retina and High-DPI Displays

Modern displays often have pixel ratios of 2x or 3x, meaning they pack more physical pixels into each CSS pixel. To appear sharp on these displays, images need to be served at 2x their displayed dimensions.

• 1x displays — Standard resolution. A 400px container needs a 400px image.
• 2x displays (Retina) — Most modern phones and laptops. A 400px container needs an 800px image for sharpness.
• 3x displays — High-end phones (iPhone Pro). A 400px container ideally needs a 1200px image.

Always Set Width and Height

Always include width and height attributes on your images. This allows browsers to reserve the correct space before the image loads, preventing Cumulative Layout Shift (CLS). Use CSS to make images responsive while maintaining aspect ratio:

img {
  max-width: 100%;
  height: auto;
}

Streamlining Your Image Sizing Workflow

Manual image optimization is tedious and error-prone when dealing with dozens or hundreds of images. Automation ensures consistent quality and sizing across your entire image library.

Desktop Tools for Manual Processing

For occasional image work, desktop applications provide quick, visual editing:

• Adobe Photoshop — Industry standard with "Save for Web" export presets. Offers precise control over quality and dimensions.
• GIMP — Free, open-source alternative with similar capabilities for resizing and exporting.
• Preview (macOS) — Built-in tool that handles basic resizing and format conversion for quick tasks.
• Squoosh — Google's free web app for comparing compression settings visually before export.

Build-Time Automation

Modern web frameworks include built-in image optimization that automatically generates multiple sizes and formats during the build process:

• Next.js Image — The <Image> component automatically optimizes, resizes, and serves images in modern formats with lazy loading.
• Nuxt Image — Similar functionality for Vue applications, with automatic srcset generation and format conversion.
• Astro — Built-in astro:assets handles optimization with support for WebP and AVIF output.
• Gatsby — gatsby-plugin-image provides automatic responsive image generation during build.

Command-Line Processing

For batch processing outside a framework, command-line tools offer powerful automation:

# Resize all JPGs to 1200px wide, maintaining aspect ratio
mogrify -resize 1200x -quality 85 *.jpg

# Generate multiple sizes for responsive images
for size in 400 800 1200 1600; do
  convert input.jpg -resize ${size}x -quality 85 output-${size}.jpg
done

Bulk Processing for Existing Libraries

For migrating existing image libraries or one-time optimization projects, bulk compression tools process hundreds or thousands of images at once. This is essential for sites with legacy content that was never properly optimized.

Frequently Asked Questions

Here are direct answers to common questions about image sizing for websites.