Performance Optimization: Image Optimization Techniques

Images are the single largest contributor to page weight on most small business websites. According to the HTTP Archive Web Almanac 2024, images account for approximately 40% of a webpage’s total byte weight on average. Before you touch a single line of JavaScript or CSS, cutting image weight in half can reduce your total page size by 20%.

This post is part two of the Performance Optimization series. Part one covers Core Web Vitals and the specific scores you are trying to move. Here, we focus on the techniques that move them fastest.

Why images are the first place to look

Every byte a browser downloads before a page becomes usable delays your visitors. Images are almost always the biggest item on that list, and they are also the easiest to fix without touching application code.

How image weight drags down LCP scores

LCP (Largest Contentful Paint) measures how long it takes for the page’s main visual block to render. On most small business sites, that block is a hero image. If that image is a 3 MB uncompressed JPEG served at 1,200px wide to a phone displaying it at 400px, the browser downloads three times more data than it needs before the page looks usable.

That one decision (serving an oversized uncompressed image) can account for the entire gap between a “Good” LCP score and a “Needs Improvement” one. Part one of this series covers what those thresholds mean.

Choosing the right format

The format you save an image in determines its baseline file size before any compression is applied.

JPEG, PNG, WebP, and AVIF

JPEG is the standard for photographs and complex images with gradients. It produces small files at the cost of some visual quality (lossy compression). Use it as your fallback for older systems.

PNG preserves every pixel exactly (lossless) and supports transparency. The trade-off is large files. Use PNG only when you need a transparent background or pixel-accurate rendering, such as product cutout images.

WebP is the practical default for most web images today. Google’s WebP compression study shows WebP is typically 25 to 30% smaller than an equivalent JPEG at the same visual quality. All current browsers support it.

AVIF pushes compression further. According to Google and web.dev, AVIF can deliver greater than 50% file size savings compared to JPEG. The trade-off is slower encoding, which makes it best suited for build-time processing rather than on-the-fly resizing.

When to use SVG

SVG stores shapes as math rather than pixels, which means it scales to any size without losing quality and compresses extremely well for simple graphics. Use SVG for logos, icons, and any illustration built from clean shapes. Do not use SVG for photographs.

Compression without visible quality loss

Choosing WebP or AVIF gets you most of the way there. Compression settings finish the job.

Lossy vs. lossless

Lossy compression discards data the human eye does not reliably detect. A WebP image saved at quality 80 is visually indistinguishable from quality 100, but the file is often 60 to 70% smaller. Lossless compression removes metadata and redundant data without changing any pixels. For photographs, lossy is almost always the right choice. For diagrams, screenshots, and images with text overlaid, lossless preserves legibility.

Tools for batch compression

You do not need to compress images manually. Several free tools handle the process automatically:

• Squoosh (squoosh.app) is a browser-based tool from Google that lets you compare compressed formats side by side before exporting.
• Sharp is a Node.js library that integrates into build pipelines to convert, resize, and compress images at build time.
• Astro’s built-in image component wraps Sharp and handles format conversion, resizing, and lazy loading automatically when you use the <Img> component from astro:assets.

Image optimization decisions made during development stay in place for the life of the site. The development and launch phase of your first website build is the right moment to establish this pipeline, not after launch.

Sizing images correctly

Format and compression choices are wasted if you serve a 2,400px image to a 400px phone screen. The browser downloads all 2,400 pixels before it can display any of them.

Serving at display size

Serve images at (or close to) the size they will actually be displayed. If your hero image displays at a maximum of 1,200px on desktop and 400px on mobile, generate two versions. Most image tools and frameworks automate this step.

Responsive images and srcset

HTML’s srcset attribute lets the browser choose the most appropriate image size for its current screen. You provide multiple file references at different widths, and the browser picks the one that matches the device.

<img
  src="hero-1200.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="Custom website built for Houston restaurant"
/>

A well-configured srcset means a visitor on a mid-range Android phone in Midtown Houston downloads a 40 KB image instead of a 400 KB one.

Lazy loading

Not every image on a page needs to load before the visitor can see anything. Images below the fold can wait.

Native lazy loading in HTML

Modern browsers support lazy loading natively. According to Google and web.dev, adding loading="lazy" to any <img> element tells the browser to skip that image on the initial page load and fetch it only when the visitor scrolls near it.

<img src="team-photo.webp" loading="lazy" alt="Team at a Houston client site" />

This single attribute can meaningfully reduce the data a visitor downloads before the page becomes usable.

Never lazy-load your hero image

Your hero image, the main visual in the first viewport, should never be lazy-loaded. Google explicitly recommends using loading="eager" (or omitting the attribute entirely) and adding fetchpriority="high" to your LCP image. Lazy-loading a hero image tells the browser to deprioritize it, which delays LCP and directly hurts your ranking signal.

The rule is simple: lazy-load everything below the fold, and never lazy-load anything in the initial viewport.

Image SEO: filenames and alt text

Google’s image SEO best practices state that descriptive filenames and alt text help Google understand what an image depicts, which determines whether it appears in Google Images for relevant searches. A filename of IMG_4892.jpg tells Google nothing. A filename of houston-custom-website-design-costa-custom-pools.webp tells Google exactly what it is looking at.

Alt text serves a dual function: it describes the image for screen readers (accessibility) and provides context for search crawlers. Write alt text that describes what the image shows, not what you want to rank for. The SEO benefit comes from relevance, not keyword stuffing.

CDN delivery

Even a perfectly optimized image still has to travel from a server to a visitor’s browser. A content delivery network (CDN) stores copies of your images on servers distributed across locations, so a visitor in the Galleria area of Houston receives files from a nearby server rather than a data center across the country.

Most modern hosting platforms (Netlify, Vercel, Cloudflare Pages) include CDN delivery by default. For media-heavy sites like motion giraffx, combining aggressive image optimization with CDN delivery produces measurable improvements in real-world load times. For photography portfolios like Antonio Bernal’s site, these techniques are the difference between a site that feels fast and one that makes visitors wait.

Image optimization checklist

Use this before every launch or major site update:

• Convert all photographs to WebP (or AVIF if your build pipeline supports it)
• Use PNG only for images requiring full transparency
• Use SVG for logos and icons
• Compress photographs at quality 75 to 85 using lossy compression
• Resize images to match their display dimensions
• Add srcset with at least two or three size variants for hero and gallery images
• Add loading="lazy" to all below-the-fold images
• Ensure your hero/LCP image has fetchpriority="high" and no loading="lazy"
• Write descriptive filenames (no IMG_ prefixes)
• Write descriptive alt text for every image
• Confirm images are served through a CDN

Every site built through our web design process includes this checklist as a standard step. Get in touch if you want a performance review of your current site.

What comes next

Image optimization cuts the largest single chunk of page weight. Part three of this series covers code splitting and lazy loading JavaScript, which addresses the other major cause of slow sites.

Frequently asked questions

What image format is best for websites?

WebP is the practical default for most web images. It is 25 to 30% smaller than JPEG at the same visual quality, and all major browsers support it. AVIF offers even greater savings (over 50% versus JPEG) but encodes more slowly, making it best suited for sites that process images at build time. Use PNG only for images that require full transparency, and SVG for logos and icons.

How do I compress images without losing quality?

Use lossless compression for images where pixel accuracy matters (screenshots, diagrams) and lossy compression for photos. Tools like Squoosh, Sharp, or your framework’s built-in image pipeline handle this automatically. A quality setting of 75 to 85 in WebP or JPEG removes data the human eye does not detect, while keeping the image visually identical on screen.

Does image size affect SEO?

Yes, in two ways. Large images slow page load times, which directly affects your LCP score, a confirmed Google ranking factor. Google also uses descriptive filenames and alt text to understand what an image depicts, which determines whether it appears in Google Images for relevant searches.

What is lazy loading for images?

Lazy loading defers image downloads until a visitor scrolls near them. In HTML, you add loading="lazy" to any <img> element. The browser then skips that image on the initial load, reducing the amount of data downloaded before the page becomes usable. One important exception: never lazy-load your hero image or any image visible on first load, as this delays your LCP score.