Image Optimization

Introduction

Images often make up a large part of a page's download size. Optimizing them can make a site feel faster, especially on mobile networks.

Good image optimization balances quality, file size, layout stability, accessibility, and responsive delivery.

Image Optimization Workflow

A consistent workflow helps you avoid the most common image problems before they reach the browser.

• Choose the right format for the image content.
• Crop and resize the image to the dimensions the design actually needs.
• Compress the image to reduce file size.
• Add meaningful alt text or empty alt="" for decorative images.
• Add width and height to reserve space and reduce layout shift.
• Use responsive images when the same image appears at different sizes.
• Lazy-load below-the-fold images with loading="lazy".
• Test the result in Lighthouse, DevTools, or the Network panel.

Dimensions vs File Size

Pixel dimensions describe how many pixels are in the source file, such as 2400 x 1600.

Displayed size is how large the image appears in the layout, often controlled by CSS.

File size is how much data the browser downloads, such as 85 KB or 2.4 MB.

Avoid uploading a huge source image and shrinking it with CSS. The browser still downloads the huge file.

Choosing the Right Image Format

Different formats are good at different jobs. The right choice depends on the image content, transparency needs, browser support, and quality expectations.

Format Notes

• JPEG is useful for photos, but it does not support transparency.
• PNG is useful for sharp edges and transparency, but large photos can become heavy.
• SVG is best for simple logos, icons, and vector graphics.
• WebP usually compresses better than JPEG or PNG and supports transparency.
• AVIF can be even smaller than WebP, but always check visual quality and browser needs.

Resizing Images

Resize source images before adding them to a site. If a card image displays around 600px wide, the source image probably does not need to be 3000px wide.

Keep larger versions only when the design truly needs them, such as full-width hero images, high-density screens, or zoomable galleries.

Compressing Images

Compression reduces file size. Lossy compression removes image data to make files smaller. Lossless compression keeps the original image data but may not shrink files as much.

Image Optimization Tools

• Squoosh for comparing formats, resizing, and compression settings.
• TinyPNG for quick PNG, JPEG, and WebP compression.
• Adobe Photoshop or similar editors for cropping, resizing, and export settings.
• Lighthouse and the Chrome DevTools Network panel for checking page impact.

Image Markup Basics

A solid img tag includes the image path, meaningful alt text, and dimensions that reserve layout space while the image loads.

<img
  src="team-photo.webp"
  width="800"
  height="533"
  alt="Design team reviewing wireframes around a table"
  decoding="async"
>

Writing Alt Text

alt text describes the purpose or content of an image for people who cannot see it. It also helps when images fail to load.

Do not stuff keywords into alt text. Write for people first.

Responsive Images with Srcset and Sizes

srcset gives the browser multiple image file options. sizes tells the browser how wide the image will appear in the layout.

sizes describes the rendered display width, not the original image width.

<img
  src="project-800.webp"
  srcset="project-400.webp 400w, project-800.webp 800w, project-1200.webp 1200w"
  sizes="(max-width: 700px) 100vw, 700px"
  width="800"
  height="533"
  alt="Portfolio project displayed on a laptop"
  loading="lazy"
  decoding="async"
>

When to Use Picture

Use picture when the browser needs different image files for reasons beyond simple size selection.

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img
    src="hero.jpg"
    width="1200"
    height="675"
    alt="Finished website shown on a desktop monitor"
  >
</picture>

Lazy Loading

Use native lazy loading for images that appear below the first viewport. This lets the browser delay downloading images until they are likely to be needed.

For beginners, loading="lazy" is usually the right first choice. JavaScript lazy loading is only needed for more custom behavior.

<img
  src="gallery-image.webp"
  width="600"
  height="400"
  alt="Gallery wall with student web design mockups"
  loading="lazy"
  decoding="async"
>

Hero and LCP Images

The main above-the-fold image often affects Largest Contentful Paint, or LCP. This is usually a hero image, feature image, or large first-screen visual.

Do not lazy-load the main hero image. The browser should discover and load it early.

Use fetchpriority="high" only for the most important above-the-fold image. Do not add it to every image.

<img
  src="hero.webp"
  width="1400"
  height="800"
  alt="Student portfolio homepage displayed on a laptop"
  fetchpriority="high"
  decoding="async"
>

Testing Image Performance

• Use the Chrome DevTools Network panel to sort images by file size.
• Use Lighthouse to check image sizing, modern formats, lazy loading, and layout shift warnings.
• Test on mobile viewport sizes, not just desktop.
• Compare visual quality after compression. Smaller is not better if the image looks broken.

Common Mistakes