Images account for roughly half of the total data on most web pages. If your images are not optimised, your site loads slowly, visitors leave, and your search rankings suffer. Google has confirmed that page speed is a ranking factor, and Core Web Vitals — which measure loading performance — directly affect how your pages appear in search results. This guide walks you through every step of image optimisation for the web.
Why Image Optimisation Matters
- Faster page loads — optimised images load in a fraction of the time, keeping visitors engaged instead of waiting.
- Better SEO — Google rewards fast sites with higher rankings. Largest Contentful Paint (LCP), a Core Web Vital, often depends on your hero image load time.
- Lower bandwidth costs — smaller files use less hosting bandwidth, which matters if your site gets significant traffic.
- Better mobile experience — mobile users on slower connections benefit the most from smaller image files.
- Reduced bounce rate — studies show that 53% of mobile users leave a site that takes more than 3 seconds to load.
Step 1: Choose the Right Image Format
Different formats are designed for different types of images:
- JPEG / JPG — best for photographs. Uses lossy compression, which discards some data to achieve smaller file sizes. Quality loss is usually invisible at 75–85% quality settings.
- PNG — best for images with transparency, text overlays, logos, and graphics with sharp lines. Uses lossless compression, so files are larger than JPEG but with zero quality loss.
- WebP — Google's modern format that supports both lossy and lossless compression. WebP files are typically 25–35% smaller than equivalent JPEG or PNG files at the same visual quality. All modern browsers support it.
- AVIF — the newest format, offering even better compression than WebP. Browser support is growing but not yet universal.
- SVG — for vector graphics like icons and logos. SVG files scale to any size without losing quality because they are defined by mathematical paths rather than pixels.
For most websites, using WebP as your primary format and JPEG as a fallback is the optimal strategy. Rekreay's Image Converter can switch between formats instantly in your browser.
Step 2: Resize to the Display Size
There is no reason to serve a 4000-pixel-wide image when it will be displayed at 800 pixels on your page. The browser downloads the entire file and then scales it down, wasting bandwidth and processing time.
Measure the maximum width your content area uses (typically 700–1200 pixels for blog posts) and resize your images to match. For responsive designs, consider providing multiple sizes using the srcset attribute so the browser can choose the best one for each screen.
Use Rekreay's Image Resizer to quickly scale images to your exact target dimensions before uploading.
Step 3: Compress Without Visible Quality Loss
After choosing the right format and size, compression removes additional unnecessary data from the file. There are two types:
- Lossless compression — reduces file size without any quality loss. Ideal for PNG and WebP images where every pixel matters.
- Lossy compression — discards data that the human eye is unlikely to notice. At 75–85% quality, most people cannot tell the difference between the original and compressed version, but the file size can drop by 50–70%.
Rekreay's Image Compressor handles this automatically, letting you reduce file sizes significantly while keeping your images looking sharp.
Step 4: Use Descriptive File Names and Alt Text
Search engines cannot "see" images — they rely on text signals to understand what an image shows. Use descriptive file names like blue-running-shoes-side-view.jpg instead of IMG_4521.jpg.
Always add alt text that describes the image content. This helps search engines index your images, improves accessibility for screen reader users, and provides context when images fail to load.
Step 5: Implement Lazy Loading
Lazy loading delays the loading of images that are below the fold (not visible when the page first loads). This means the browser only downloads images as the user scrolls down to them, dramatically improving initial page load time.
In HTML, you can add lazy loading with a single attribute:
<img src="photo.webp" alt="Description" loading="lazy">Do not lazy load images that appear in the initial viewport (above the fold), such as hero images and logos — these should load immediately.
Step 6: Specify Image Dimensions
Always include width and height attributes on your <img> tags. This allows the browser to reserve the correct amount of space before the image loads, preventing layout shifts (which hurt your Cumulative Layout Shift score in Core Web Vitals).
<img src="photo.webp" alt="Description" width="800" height="533" loading="lazy">Step 7: Use a CDN for Image Delivery
A Content Delivery Network (CDN) stores copies of your images on servers around the world. When a visitor requests an image, it is served from the closest server, reducing load time. Services like Cloudflare, BunnyCDN, and imgix offer image-specific CDN features including automatic format conversion, resizing, and compression.
Quick Optimisation Checklist
- ✅ Use WebP format where possible (JPEG fallback)
- ✅ Resize to actual display dimensions
- ✅ Compress at 75–85% quality for lossy formats
- ✅ Use descriptive file names and alt text
- ✅ Add
loading="lazy"for below-fold images - ✅ Include width and height attributes
- ✅ Consider a CDN for high-traffic sites
Final Thoughts
Image optimisation is not optional — it directly impacts your site speed, search rankings, and user experience. The good news is it only takes a few minutes per image using free online tools. Resize, compress, convert to WebP, add proper alt text, enable lazy loading, and your website will be measurably faster. Repeat this process for every image you upload and your site's performance will stay strong as it grows.