Image Optimization Best Practices

Images are almost always the heaviest part of a website. For many small business sites, a single unoptimized hero image can account for over 50% of the total page size. When your images are too large, your Largest Contentful Paint (LCP) score drops, your bounce rate climbs, and your search engine rankings suffer.

Optimizing images is not about making them look "worse." It is about delivering the highest possible visual quality at the lowest possible file size.

Choose the Right Modern Format

The days of using JPEGs and PNGs for everything are over. While these formats still have their place, modern web standards prioritize formats that offer better compression without losing detail.

• WebP: This should be your default. WebP images are typically 25-35% smaller than JPEGs but maintain the same visual quality. It supports both transparency and animation.
• AVIF: This is the next generation of image compression. AVIF often outperforms WebP, providing even smaller file sizes, though it requires slightly more processing power to encode and overall browser support is lower.
• SVG: For logos, icons, and simple illustrations, always use Scalable Vector Graphics. Because SVGs are code-based, they have a file size of nearly zero and stay perfectly sharp at any resolution.
• JPEG/PNG: Use JPEGs only as a fallback for very old browsers. Use PNGs only if you need high-detail transparency that WebP cannot handle correctly.

Proper Sizing and Resolution

A common mistake is uploading a 4000-pixel wide photo from a camera and letting the website "shrink" it to fit a 400-pixel box. Even if it looks small on the screen, the visitor's browser still has to download the full, multi-megabyte file.

• Match the Container: Resize your images to the maximum width they will actually appear on the screen. If your content area is 800px wide, your image should not be 2000px wide.
• Resolution: For standard web use, 72 DPI (dots per inch) is the baseline. High-resolution "Retina" displays can benefit from 2x sizing, but this should be handled through responsive code, not by forcing everyone to download massive files.

Compression: Lossy vs. Lossless

Compression is the process of removing unnecessary data from an image file.

• Lossy Compression: This removes some image data to drastically reduce file size. When done correctly, the human eye cannot tell the difference. We recommend a quality setting between 75% and 85% for most web images.
• Lossless Compression: This shrinks the file size without removing any pixel data. While "safer," the file size savings are much smaller.

Responsive Image Delivery (srcset)

One size does not fit all. A desktop user on a fiber connection can handle a larger file than a mobile user on a weak 4G signal.

Using the srcset attribute in your code allows the browser to choose the best image size based on the user's device. This ensures that a mobile user isn't forced to download a desktop-sized hero image. This single change can reduce mobile data usage by up to 70%.

Lazy Loading and Priority

Not every image needs to load the second a user lands on your site.

• Eager Loading: Reserved for "above the fold" content. Your hero image should load as fast as possible to satisfy the LCP metric.
• Lazy Loading: Images further down the page should only load when the user is about to scroll to them. This saves bandwidth and allows the browser to focus on loading the critical parts of the site first.

Descriptive Metadata and Accessibility

Optimization isn't just about file size, it is about how search engines and screen readers interpret your visuals.

• Alt Text: Every image that is relevant to the user must have descriptive Alt Text. This tells Google what the image is about and allows visually impaired users to understand your content. Avoid "keyword stuffing." Instead of "Web design Smiths Falls best web design," use "Web design mockup for a small business client in Smiths Falls."
  • Decorative images: Images that are for decoration only do not require alt text. For example, a text list where each item has a decorative icon. Including alt text for decorative icons may confuse visually impaired users as they won’t be sure which images are relevant to the content and which are decorative.
• Descriptive Filenames: Rename IMG_5942.jpg to modern-kitchen-renovation-ottawa.webp. This helps with image search rankings.

Summary: The Performance Impact

Optimizing your images is the fastest way to turn a "slow" site into a "fast" one. By switching to WebP or AVIF with jpg and png fallback, implementing lazy loading, and correctly sizing your assets, you can often cut your total page load time in half.

The One Clear Takeaway: Stop uploading raw files directly from your phone or camera. Resize, compress, and convert to WebP before hitting "upload" to protect your site's speed and SEO. Or better yet, a good developer can set up your website to automatically handle this!