The Practical Guide to Image Optimization for Faster Websites

When we audit a slow website, the first thing we open is the network panel, and the first thing we usually find is images. A 4 MB hero photo straight from a camera, a logo saved as a huge PNG, a product grid that downloads thirty full-size images before the visitor scrolls an inch. Images are often the single largest share of a page's weight, and they are very often the element that decides your Largest Contentful Paint.

The good news is that image optimization is one of the most rewarding performance tasks there is. It doesn't usually require rewriting your application or changing your hosting. It requires picking the right format, compressing sensibly, telling the browser which size to download, and loading things in the right order. Done well, it can make a page feel dramatically faster on a mid-range phone over a mobile connection, which is exactly where many of your visitors are.

This guide walks through the workflow we follow in our projects, from choosing formats to writing alt text, with code you can copy and a checklist at the end.

Why images matter so much for speed and SEO

Images affect three things that matter to both visitors and search engines:

• Loading speed. Large files take longer to download, especially on mobile networks. If your hero image is the largest element above the fold, it is your LCP element, and Google's "good" threshold for LCP is 2.5 seconds or less.
• Visual stability. Images without reserved space push content around as they load. That movement is measured as Cumulative Layout Shift, where "good" is 0.1 or less.
• Discoverability and accessibility. Descriptive file names and alt text help screen reader users understand your content and help search engines, including image search, understand what an image shows.

If you want the bigger picture on these metrics, our Core Web Vitals guide for small business owners explains each one in plain language.

Choosing the right format

There is no single best format. Each one is good at something different, and picking the wrong one is the most common source of waste we see.

Format	Best for	Avoid for	Notes
JPEG	Photos, as a universal fallback	Logos, text, sharp edges	Lossy; supported everywhere; progressive encoding helps perceived speed
PNG	Screenshots, graphics needing lossless quality or transparency	Photos	Lossless files of photos are often many times larger than a JPEG
WebP	Photos and graphics, with or without transparency	Very few cases today	Broadly supported in modern browsers; typically noticeably smaller than JPEG at similar quality
AVIF	Photos where you want the smallest possible file	Situations where encoding time matters a lot	Often smaller than WebP; slower to encode; support is good in current browsers
SVG	Logos, icons, simple illustrations	Photos, complex artwork	Vector, scales to any size; minify it and avoid embedded raster images

Our default choices

• Logos and icons: SVG, run through a minifier such as SVGO.
• Photos and product shots: AVIF or WebP, with JPEG as a fallback if you need to support older browsers.
• Screenshots with text: WebP (lossless or high quality) or PNG if the tooling requires it.
• Animated GIFs: replace them with a short muted MP4 or WebM video. GIFs are notoriously heavy.

Compression: finding the quality sweet spot

Compression is where most of the savings come from. Lossy formats let you trade a little visual detail for a big reduction in file size, and on most photos that detail is invisible at normal viewing sizes.

Practical guidance

• Start around quality 70 to 80 for JPEG and WebP, then compare side by side. AVIF quality scales differently, so judge by eye rather than by number.
• Resize before you compress. A 6000-pixel-wide photo displayed at 800 pixels wastes bandwidth no matter how well it is compressed.
• Strip metadata. Camera EXIF data, color profiles you don't need, and editor thumbnails add weight. Keep the sRGB profile if colors look off without it.
• Set a size budget. In our projects we aim for hero images under roughly 150 to 250 KB and thumbnails well under 50 KB. These are guidelines, not laws; a full-bleed photography site will need more.

Tools we actually use

For one-off images, Squoosh is a great browser tool for comparing formats and quality settings visually. For build pipelines, the sharp library for Node.js is fast and reliable. On WordPress, a reputable optimization plugin can convert and compress uploads automatically. Whatever you use, automate it so nobody has to remember.

Responsive images with srcset and sizes

A phone with a 400-pixel-wide viewport doesn't need the same file as a 27-inch monitor. Responsive images let you offer several sizes and let the browser pick the most appropriate one based on screen size and pixel density.

Here is a pattern we use often:

<img
  src="/images/team-800.jpg"
  srcset="/images/team-400.jpg 400w,
          /images/team-800.jpg 800w,
          /images/team-1200.jpg 1200w,
          /images/team-1600.jpg 1600w"
  sizes="(max-width: 768px) 100vw, 50vw"
  width="1600"
  height="1067"
  alt="Our team reviewing a website wireframe on a whiteboard"
  loading="lazy"
  decoding="async">

How to read it

• srcset lists the available files and their real pixel widths (the w descriptor).
• sizes tells the browser how wide the image will be displayed. Here: full viewport width on screens up to 768 pixels, half the viewport otherwise.
• src is the fallback for browsers that ignore srcset.

The most common mistake is leaving out sizes. Without it, the browser assumes the image is the full viewport width and may download a larger file than necessary.

Serving modern formats with fallbacks

If you want AVIF with a WebP and JPEG fallback, wrap the image in a picture element:

<picture>
  <source type="image/avif" srcset="/images/hero-800.avif 800w, /images/hero-1600.avif 1600w" sizes="100vw">
  <source type="image/webp" srcset="/images/hero-800.webp 800w, /images/hero-1600.webp 1600w" sizes="100vw">
  <img src="/images/hero-1600.jpg" width="1600" height="900" alt="Storefront of a local bakery at sunrise">
</picture>

The browser picks the first source it supports. Frameworks like Next.js generate much of this for you through their image components, which is one reason we like them, but it is still worth understanding what ends up in the HTML.

Lazy loading and prioritizing the LCP image

Lazy loading delays offscreen images until the visitor scrolls near them. Native lazy loading is as simple as adding loading="lazy". It saves bandwidth and frees the network for the things that matter first.

The important exception

Never lazy load the image that is your LCP element, usually the hero image or the first product photo. Lazy loading it delays the very thing Google measures. Instead, tell the browser it is important:

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

The fetchpriority="high" attribute nudges the browser to fetch this image ahead of lower-priority resources. Use it on one or two images per page at most; if everything is high priority, nothing is.

Other loading tips

• If the LCP image is set as a CSS background, the browser discovers it late. Prefer a real img element, or add a preload link in the head.
• Avoid hiding the hero image behind a JavaScript slider that renders only after scripts load.
• Use decoding="async" on non-critical images so decoding doesn't block other work.

Preventing layout shift with width and height

When a browser doesn't know an image's dimensions, it reserves no space, then shoves the content down when the image arrives. That is the jumpy experience that makes visitors tap the wrong button.

The fix is simple: always include width and height attributes that match the image's intrinsic aspect ratio. Modern browsers use them to calculate the aspect ratio before the image loads, even if your CSS makes the image responsive with a rule like width 100% and height auto. For containers that crop images, the CSS aspect-ratio property does the same job.

This also applies to ads, embeds, and iframes. If your site will run display ads, reserve space for ad slots too, or they will become your biggest source of CLS.

CDNs and image services

A content delivery network stores copies of your files on servers around the world, so a visitor in London doesn't wait on a server in Virginia. Many CDNs and dedicated image services go further and transform images on the fly: resizing, converting to AVIF or WebP based on browser support, and compressing automatically.

When an image service is worth it

• You have a large or growing catalog, such as an online store with thousands of product photos.
• Non-technical staff upload images through a CMS and you can't rely on manual optimization.
• You need many sizes and crops of the same image for different layouts.

Options range from features built into your host or framework, like Next.js image optimization or Shopify's image CDN, to CDN add-ons and standalone image platforms. Pricing models vary widely, often based on transformations, bandwidth, or storage, so estimate your monthly volume before committing. For smaller brochure sites, a good build-time pipeline and an ordinary CDN are usually enough.

Alt text for accessibility and SEO

Alt text is read aloud by screen readers and shown when an image fails to load. It is also one of the signals search engines use to understand images. Write it for people first.

Writing good alt text

• Describe the content and purpose in a short sentence: "Barista pouring latte art into a ceramic cup" is better than "coffee".
• Skip "image of" or "picture of". Screen readers already announce that it is an image.
• Use empty alt for decorative images (alt="") so screen readers skip them.
• For linked images, describe the destination, such as "Eraquon home page" for a logo link.
• Don't stuff keywords. A natural description that happens to include relevant terms is fine; a list of keywords helps nobody.

Descriptive file names like blue-linen-sofa.webp instead of IMG_4821.jpg are a small extra signal and make your media library easier to manage. For more on accessible content, see our guide to web accessibility for small businesses.

Our image optimization workflow checklist

1. Pick the format: SVG for logos and icons, AVIF or WebP for photos, video instead of GIFs.
2. Resize originals to the largest size you will actually display, plus a 2x version for high-density screens where it matters.
3. Compress with a quality setting chosen by visual comparison, and strip unnecessary metadata.
4. Generate several widths and serve them with srcset and an accurate sizes value.
5. Add width and height to every image.
6. Lazy load offscreen images; never lazy load the LCP image.
7. Add fetchpriority="high" to the LCP image and make sure it is discoverable in the HTML.
8. Write meaningful alt text, or empty alt for decorative images.
9. Serve images from a CDN, ideally with automatic format negotiation.
10. Test with Lighthouse and PageSpeed Insights, and check real-user data in Search Console over time.

FAQ

Should I convert every image to AVIF?

For photos, AVIF usually produces the smallest files, but WebP is a perfectly good choice and encodes faster. Serving both with a picture element or an image service that negotiates the format gives you the best of both.

Does lazy loading hurt SEO?

Native lazy loading with loading="lazy" is well supported and search engines can discover those images. The risk comes from custom JavaScript lazy loaders that hide image URLs, and from lazy loading the LCP image.

How do I know if images are my problem?

Run PageSpeed Insights on your key pages. Look for audits about properly sizing images, serving next-gen formats, and the LCP element. If the LCP element is an image and it is large, you have found your starting point.

Need a hand?

Image optimization is often the fastest win in a broader performance project. If you'd like us to look at your site, our performance optimization service covers images, scripts, fonts, and hosting, or you can start with a free audit and see where the biggest gains are.