Performance

Image Optimization: How to Speed Up Your Site with Smaller Photos

by dotCanada Team
Image Optimization: How to Speed Up Your Site with Smaller Photos

If your website feels slow, images are the first place to look. A single unoptimized hero image can easily weigh two or three megabytes - more than the rest of the page's code combined. For visitors on mobile connections or in areas with slower internet (a reality for many Canadians outside major urban centres), this can mean a ten-second wait just to see your homepage.

The good news is that image optimization is one of the highest-impact, lowest-effort performance improvements you can make.

Why Image Size Matters for Speed

Every byte of data your website sends to a visitor has to travel across a network connection. Larger files take longer to download, which delays how quickly your page becomes visible and usable. Google measures this as Largest Contentful Paint (LCP) - the time it takes for the main visible content to appear - which is a direct ranking signal.

Beyond the user experience impact, large images also consume more bandwidth, which can affect hosting costs on plans with bandwidth limits.

Choosing the Right Image Format

Not all image formats are equal for web use. Choosing the right one is the first step in optimization.

JPEG is the right choice for photographs and images with lots of colour variation. It uses lossy compression, meaning it discards some data to achieve smaller file sizes, but the visual difference is imperceptible at quality settings of 75-85%.

PNG is best for images that require transparency (like logos with transparent backgrounds) or images with sharp edges and flat colours (like screenshots or diagrams). PNG uses lossless compression, so file sizes tend to be larger than JPEG for photographs.

WebP is a modern format developed by Google that achieves significantly better compression than both JPEG and PNG while maintaining comparable quality. WebP is supported by all modern browsers and should be your default format for web images in 2025. A WebP image is often 25-35% smaller than an equivalent JPEG at the same quality level.

AVIF is an even newer format with better compression than WebP, but browser support is still maturing. It is worth experimenting with, but WebP remains the safer default for broad compatibility.

Compression Tools

TinyPNG and TinyJPG (tinypng.com) - A free online tool that compresses PNG and JPEG files using smart lossy compression. You can compress up to 20 images at a time for free. The results are excellent - often a 60-80% reduction in file size with no visible quality loss. Despite the name, TinyPNG also handles JPEGs.

Squoosh (squoosh.app) - A free browser-based tool from Google that gives you more control over compression settings and format conversion. You can convert to WebP, adjust quality, and see a side-by-side comparison of the original and compressed versions before downloading.

ShortPixel - A WordPress plugin that automatically compresses and converts images to WebP as you upload them. The free plan includes 100 credits per month (one credit per image), which is enough for many small sites. Paid plans are affordable and worth it if you upload images frequently.

Imagify - Another strong WordPress image optimization plugin with a similar approach to ShortPixel. Free plan available; paid plans unlock bulk optimization of existing images.

Set Width and Height Attributes

This is a small but important detail that affects Cumulative Layout Shift (CLS) - another Core Web Vitals metric. When you specify an image's width and height in your HTML, the browser can reserve the correct amount of space for the image before it finishes loading. Without these attributes, the image loads and then causes the surrounding content to jump around.

In WordPress, these attributes are added automatically when you insert images through the media library. If you are adding images manually in HTML, always include them:

<img src="photo.webp" width="800" height="450" alt="Description of the image">

Use Responsive Images

Serving a 2000-pixel-wide image to someone on a small mobile screen is wasteful - they only need a 400-pixel version. WordPress automatically generates multiple sizes of each image you upload and uses the srcset attribute to serve the appropriately sized version to each visitor's device. Make sure your theme supports this (virtually all modern themes do) and avoid overriding these settings unnecessarily.

For most WordPress sites, combining a good compression plugin like ShortPixel with the WebP format will cut your total page weight significantly - often by half or more - with no visible impact on image quality.

100% Satisfaction Guarantee

We're so confident you'll love dotCanada that we offer a 30-day money-back guarantee. Not satisfied? Get a full refund, no questions asked.

Ready to Get Started?

Join thousands of Canadian website owners who trust dotCanada for reliable, fast web hosting.

Get Started Today