Why Image Optimisation Matters More Than You Think

Images typically account for 50-70% of a webpage's total file size. If your images aren't optimised, your site is loading far slower than it needs to — and that directly affects your website speed, search rankings, bounce rate, and conversions.

Google has made page speed a ranking factor through Core Web Vitals, and images are often the biggest contributor to slow Largest Contentful Paint (LCP) scores. For Irish businesses, where mobile connections outside major cities can be patchy, poorly optimised images create an especially frustrating experience for visitors.

Choosing the Right Image Format

The format you use for each image has a huge impact on file size and quality. Here's when to use each format:

WebP

WebP should be your default format for most website images. It provides significantly smaller file sizes than JPEG and PNG while maintaining comparable quality. WebP supports both lossy and lossless compression, as well as transparency. Browser support is now universal across all modern browsers, so there's no reason not to use it.

AVIF

AVIF is the next generation format that offers even better compression than WebP. Browser support is growing rapidly, and it's particularly good for photographs and complex images. Consider using AVIF as your primary format with WebP as a fallback for older browsers.

JPEG

JPEG is still fine for photographs when you can't use WebP, but it should be your fallback rather than your first choice. Use quality settings between 75-85% for a good balance of quality and file size. There's rarely a visible difference between 80% and 100% quality, but the file size difference can be enormous.

PNG

Use PNG only when you need lossless quality or transparency and can't use WebP. Logos, icons, and graphics with sharp edges and text are the main use cases. For photographs, PNG files are far too large — always use WebP or JPEG instead.

SVG

SVG is perfect for logos, icons, and simple illustrations. Because SVGs are vector-based, they scale to any size without losing quality and are typically very small files. Use SVG for anything that isn't a photograph or complex image.

Image Compression Techniques

Compression is the process of reducing file size while maintaining acceptable visual quality. There are two main approaches.

Lossy compression permanently removes some image data to achieve smaller files. For web use, a well-compressed lossy image is virtually indistinguishable from the original at the sizes displayed on screen. Tools like Squoosh, TinyPNG, and ShortPixel make this straightforward.

Lossless compression reduces file size without losing any data. The savings are smaller, but the image is pixel-perfect. Use lossless compression for graphics, logos, and any image where precision matters.

Responsive Images: Serving the Right Size

One of the most common image optimisation mistakes is serving the same large image to every device. A hero image that's 2000 pixels wide looks great on a desktop monitor but is massively oversized for a mobile phone screen — the phone downloads all that data only to display it at 400 pixels wide.

HTML's srcset attribute lets you specify multiple image sizes and let the browser choose the most appropriate one:

Use the <picture> element with srcset and sizes attributes to serve different image sizes for different screen widths. Create versions at common breakpoints: 400px, 800px, 1200px, and 1600px wide. This way, mobile users download a 400px image while desktop users get the full-size version.

Lazy Loading: Load Images When Needed

Lazy loading delays the loading of images that aren't visible on screen until the user scrolls to them. This dramatically improves initial page load time because the browser only needs to download images in the viewport first.

Modern browsers support native lazy loading with the loading="lazy" attribute on image tags. It's simple to implement and requires no JavaScript. Just add the attribute to any image below the fold. Don't lazy-load your hero image or any images visible without scrolling — these should load immediately.

Image Dimensions and Aspect Ratio

Always specify width and height attributes on your image tags. This lets the browser reserve the correct space before the image loads, preventing the annoying layout shifts that hurt your Cumulative Layout Shift (CLS) score — one of Google's Core Web Vitals metrics.

The actual pixel dimensions of your images should match how they'll be displayed. There's no point uploading a 4000x3000 pixel photo from your camera when it'll only ever be shown at 800x600 on your website. Resize before uploading.

Alt Text: Accessibility and SEO

Alt text serves two critical purposes: it describes images for visitors using screen readers, and it helps search engines understand what your images show. Good alt text is both accessible and SEO-friendly.

• Describe what the image shows in plain, concise language
• Include relevant keywords naturally, but never stuff keywords
• Keep alt text under 125 characters for screen reader compatibility
• Be specific — 'Red brick Victorian terraced house on Pembroke Road, Dublin' is better than 'house'
• For decorative images that don't convey information, use an empty alt attribute (alt="")
• Don't start with 'Image of' or 'Photo of' — screen readers already announce it as an image

Image SEO Beyond Alt Text

Alt text is just one part of image SEO. Other factors include:

• Use descriptive file names (dublin-office-exterior.webp rather than IMG_2847.webp)
• Place images near relevant text content on the page
• Add images to your XML sitemap so Google can discover them
• Use structured data to mark up product images, recipe images, and other specific image types
• Ensure images are crawlable — don't block image directories in robots.txt
• Consider creating an image sitemap for large sites with many original images

WordPress Image Optimisation

If your site runs on WordPress (as many Irish business sites do), several plugins can automate image optimisation. ShortPixel, Imagify, and Smush are popular options that compress images on upload and can convert to WebP format automatically. These plugins can also optimise your existing image library in bulk.

WordPress 5.8+ generates WebP images natively when your server supports it, and newer versions handle responsive images automatically through srcset. Make sure your theme doesn't override these built-in features.

Content Delivery Networks for Images

A CDN serves your images from servers geographically close to your visitors. For Irish businesses targeting local audiences, this might seem less important than for global sites, but CDNs also handle image transformations, format conversion, and caching. Services like Cloudflare (free tier available), BunnyCDN, and imgix can automatically serve the optimal image format and size for each visitor's device.

Measuring Your Image Performance

Use Google PageSpeed Insights to check your site for image-related issues. It'll flag oversized images, missing modern formats, missing explicit dimensions, and images that aren't lazy-loaded. Chrome DevTools' Network tab also shows you exactly how much data each image uses and how long it takes to load.

Frequently Asked Questions

Should I convert all my existing images to WebP?

Yes, it's worth doing. Most image optimisation plugins can batch-convert your existing library. The file size savings are typically 25-35% compared to equivalent JPEG quality, which adds up significantly across a whole site.

How much can image optimisation improve my page speed?

It depends on how poorly optimised your images currently are, but improvements of 2-5 seconds in load time are common. For image-heavy sites like portfolios, estate agents, or eCommerce stores, the improvement can be even more dramatic.

Do I need to worry about image optimisation if I use a page builder?

Yes. Page builders like Elementor, Divi, and WPBakery don't automatically optimise the images you upload. You still need to resize images before uploading, use an optimisation plugin, and ensure modern formats are being served.

How do optimised images affect my website's conversion rate?

Faster loading pages from optimised images directly improve conversion rates. Even a 1-second improvement in load time can boost conversions significantly, especially on mobile. Every 100ms of additional delay costs you approximately 1% of conversions.

Should I optimise images differently for product pages?

Yes. Product pages need multiple high-quality images that load fast. Use WebP format, provide multiple sizes via srcset, and always include descriptive alt text for both SEO and accessibility. Product photography deserves particular attention since customers rely on images to assess product quality.