Image Optimization

Image optimization means making your images load as fast as possible without making them look bad. This includes compressing file sizes, choosing the right file format, sizing images to fit their display area, and using modern techniques like lazy loading so images only load when visitors scroll to them.

Images are usually the heaviest files on a web page. According to HTTP Archive, images account for about 42% of a typical web page's total weight. If your images aren't optimized, they're probably the single biggest reason your site loads slowly.

Why It Matters

Page speed directly affects your business. Google reports that 53% of mobile visitors leave a site that takes more than 3 seconds to load. Unoptimized images are the number one cause of slow-loading pages. A single hero image that's 5MB instead of 200KB can add seconds to your load time.

Google also uses page speed as a ranking factor. Slow sites rank lower. The Core Web Vitals metrics that Google tracks are heavily influenced by image performance. The Largest Contentful Paint (LCP) metric, which measures how quickly your main content loads, is almost always determined by your largest image.

For small business owners, image optimization is one of the highest-impact, lowest-effort improvements you can make. You don't need to redesign anything. You just need to make your existing images smaller and smarter.

The Basics

Use the right format. JPEG is good for photographs. PNG is good for graphics with transparency. WebP is a modern format that's smaller than both while maintaining quality, and it's supported by all major browsers. If your site serves images in WebP, you're already ahead of most competitors.

Resize before uploading. If your image displays at 800 pixels wide on your site, don't upload a 4,000-pixel-wide original. Resize it to the actual display size (or 2x for sharp display on retina screens). This alone can cut file sizes by 80% or more.

Compress your images. Tools like TinyPNG, ShortPixel, and Squoosh can reduce image file sizes by 50-80% with no visible quality loss. Make this a habit every time you add a new image to your site.

Use lazy loading. Lazy loading tells the browser to only load images when they're about to scroll into view. Images below the fold don't load until the visitor scrolls down, which makes the initial page load much faster.

Add alt text. Every image should have alt text that describes what the image shows. This helps with SEO, accessibility, and acts as a fallback if the image fails to load.

Use responsive images. Modern websites can serve different image sizes depending on the visitor's device. A phone doesn't need the same high-resolution image that a desktop does. Your website builder or CMS may handle this automatically, but it's worth checking.

FAQ

How do I know if my images are slowing down my site?

Run your site through Google PageSpeed Insights (pagespeed.web.dev). It will flag specific images that are too large and estimate how much time you'd save by optimizing them. It also checks whether you're using modern formats and lazy loading.

What's the ideal file size for a web image?

As a general rule, aim for under 200KB per image. Hero images and full-width banners might be 150-300KB. Thumbnails and icons should be well under 50KB. If any single image on your site is over 1MB, it almost certainly needs to be compressed or resized.

Should I use WebP for all my images?

WebP is a great default for most images. It produces smaller files than JPEG and PNG at comparable quality. All modern browsers support it. Some CMS platforms and CDNs can automatically convert your images to WebP, so you may not even need to do it manually.