Open the network tab on almost any website and one category dominates the download size: images. They routinely account for half or more of total page weight, and the largest image is very often the element that decides your Largest Contentful Paint score. The encouraging part is that image optimization is mechanical. There is a correct format, a correct size and a correct loading strategy for every image, and once the pipeline is set up, it runs itself.

Choosing the Right Format in 2026

JPEG remains the universal baseline for photographs. Every device on earth renders it, and at quality 80 to 85 it looks clean for most photos.

PNG exists for two jobs only: transparency and sharp edged graphics like screenshots with text. Using PNG for photographs is the single most expensive format mistake, files come out five to ten times larger than needed.

WebP is the workhorse of the modern web. It compresses photos 25 to 35 percent smaller than JPEG at comparable quality, supports transparency, and has been supported by every major browser for years. There is no longer any reason not to serve it.

AVIF is the top performer, typically 40 to 50 percent smaller than JPEG, with excellent detail retention at low sizes. Browser support became effectively universal across modern browsers, so in 2026 AVIF is a safe first choice, with WebP as the fallback layer. Its one cost is slower encoding, which matters only at build time, not for visitors.

SVG is for logos, icons and illustrations. It scales infinitely, weighs almost nothing after minification, and stays razor sharp on every screen.

Animated GIF should be considered deprecated. A short muted looping MP4 or WebM delivers the same effect at a tenth of the size.

Serving Modern Formats With Fallbacks

The picture element lets the browser pick the best format it supports, newest first:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Mechanic charging a car air conditioning system" width="1600" height="900">
</picture>

Browsers read the sources top to bottom and stop at the first format they understand. Old clients simply fall through to the JPEG.

Responsive Sizes: Stop Sending Desktop Images to Phones

A 1920 pixel hero delivered to a 390 pixel wide phone wastes most of its bytes. The srcset and sizes attributes let the browser download only what the layout needs:

<img
  src="/img/team-800.jpg"
  srcset="/img/team-400.jpg 400w, /img/team-800.jpg 800w, /img/team-1600.jpg 1600w"
  sizes="(max-width: 700px) 100vw, 50vw"
  alt="The workshop team in front of the garage"
  width="800" height="533" loading="lazy">

Three or four width variants per image cover practically every device. Generating them is a one line job for any image tool, and content systems and static site generators can automate it entirely.

Lazy Loading: Powerful, and Routinely Misused

The loading attribute with the value lazy tells the browser to postpone downloading an image until it approaches the viewport. Applied to below the fold content, galleries and long article images, it removes a huge amount of work from the initial page load.

The classic mistake is applying it everywhere, including the hero. Lazy loading the largest above the fold image actively delays it, because the browser deprioritizes exactly the resource your LCP score is waiting for. The rule has two halves: everything below the fold gets loading lazy, while the LCP image gets the opposite treatment, eager loading plus a priority hint:

<img src="/img/hero.avif" alt="..." width="1600" height="900" fetchpriority="high">

Adding decoding async on large images is a further small win, letting the browser decode pixels off the main thread.

Dimensions Prevent Layout Shift

Every img element should carry width and height attributes matching its intrinsic ratio. The browser uses them to reserve the exact space before the file arrives, which eliminates the jump that happens when images pop in and push content down. That jump is measured by Cumulative Layout Shift, one of the Core Web Vitals we break down in our Core Web Vitals guide, and unsized images are its most common cause.

Compression Targets That Work

Numbers that hold up across thousands of real sites: JPEG quality 80 to 85, WebP quality 75 to 82, AVIF quality 45 to 60 on typical encoder scales. Strip camera metadata, it can add hundreds of kilobytes of invisible payload. As budget guidance, a full width hero should land under roughly 200 kilobytes, content images under 100, and thumbnails under 30. From the command line, two free tools cover everything:

cwebp -q 80 photo.jpg -o photo.webp
avifenc --min 0 --max 63 -a end-usage=q -a cq-level=28 photo.jpg photo.avif

At the workflow level, the golden rule is that optimization must be automatic. A build step, an upload hook or a CDN with on the fly transforms guarantees every future image is processed, while manual optimization guarantees that one day someone uploads a 9 megabyte original straight from a phone.

Alt Text: The Cheapest Optimization of All

Every meaningful image needs an alt attribute describing what it shows. It serves screen reader users, it is how image search understands your pictures, and increasingly it is how multimodal AI systems interpret your pages. Write a plain factual description, not a keyword list. Purely decorative images get an empty alt attribute so assistive tools skip them.

Check Your Whole Image Stack in One Scan

The CheckMy.site scanner examines the images on your page as part of its performance and accessibility categories: modern format usage, oversized files, missing dimensions, lazy loading coverage and missing alt attributes, alongside 150 other checks. Images are usually the largest single performance win available on a website, and unlike most optimization work, the result is visible to every visitor on the very next load.