Images are the #1 reason most websites fail Core Web Vitals today. A single unoptimised hero image can be larger than your entire HTML, CSS, and JavaScript combined. If your website takes more than 3 seconds to load, you’re losing visitors and Google is watching.
This guide covers exactly what you need to do to optimise images for faster load times and better search rankings. No theory, just actionable steps you can apply today.
Why Image Optimisation Matters More Than Ever
Google’s Core Web Vitals now play a critical role in how your website ranks and performs. Among them, Largest Contentful Paint (LCP), which is usually your hero image, must load within 2.5 seconds to be considered “good.”
And here’s the problem: unoptimised images are the biggest reason most websites fail this metric. And most websites don’t even realise it’s happening.
Here’s what unoptimised images cost you:
- Slower load times = higher bounce rates
Even a 1-second delay can reduce conversions by up to 7%. - Poor Core Web Vitals = lower rankings
LCP is a confirmed Google ranking factor, directly impacting your visibility. - Higher bandwidth and hosting costs
Large images consume more data, especially noticeable on shared hosting plans. - Worse mobile experience
Most users browse on mobile networks where speed is limited. Heavy images make your site feel slow and frustrating.
Step 1: Use WebP Instead of JPEG and PNG
If you’re still using JPEG or PNG in 2026, you’re shipping unnecessarily large images to your users.
WebP, developed by Google, is designed specifically for modern web performance. It delivers 25–35% smaller file sizes than JPEG at similar visual quality, and often compresses even better than PNG for most use cases.
In most cases, switching to WebP alone can reduce total page weight by 20–40%.
That means faster load times, improved LCP scores, and a better user experience across devices.
The good news? Every major browser now supports WebP, including Chrome, Firefox, Safari, and Edge, so there’s no reason not to use it.
How to Convert Images to WebP
The easiest way is to use a simple browser-based tool like WebReady Images.
Just drop your images in, and they’re instantly converted into optimised WebP files, no uploads, no sign-up, no friction.
Step 2: Resize Images to the Right Dimensions
One of the biggest performance mistakes? Uploading images that are far larger than they’re ever displayed.
A typical camera image (4000×3000px) can easily be 4–8 MB. But if your website only displays it at 1280px wide, you’re forcing users to download 2–3× more data than necessary, slowing down your page for no reason.
Recommended Image Sizes for the Web
- Hero / banner images: up to 1920px wide
- Blog & content images: 1200–1280px wide
- Thumbnails & cards: 400–600px wide
- OG / social share images: 1200 × 630px
Rule of Thumb
Never upload images wider than 1920px unless absolutely required.
For most websites, 1280px is the sweet spot between quality and performance.
Step 3: Compress Images Without Losing Quality
Resizing reduces dimensions, but compression reduces file size even further.
It works by removing data that the human eye can’t easily detect. Done right, your images look identical, but load significantly faster.
Recommended WebP Quality Settings
- Balanced (q70–75)
Ideal for most images. Typically reduces size by 30–50% with no visible loss. - Quality-first (q80–85)
Best for portfolios, product images, or hero sections. - Max compression (q45–55)
Use for thumbnails, background textures, or non-critical visuals.
The goal isn’t maximum compression, it’s maximum efficiency without visible quality loss.
Quick Tip
Modern tools can automate this process by selecting the highest quality setting that still significantly reduces file size, saving you time while keeping images sharp. In many cases, resizing + compression together can reduce image size by 70–90%.
Step 4: Name Your Image Files for SEO
Image filenames are a ranking signal. Google reads them to understand what the image is about. A file named IMG_20260315_143022.jpg tells Google nothing. A file named trek-maharashtra-raigad-fort.webp tells Google exactly what it’s looking at.
SEO-friendly image filename rules:
- Use descriptive, keyword-rich names. Put the most important keyword first (prefix position).
- Use hyphens between words, never underscores or spaces.
- Keep it lowercase. Some servers treat uppercase and lowercase as different URLs.
- Keep it concise, 3 to 6 words is ideal.
If you’re processing images in bulk, use the prefix feature in WebReady Images to add a consistent keyword prefix to all files at once.
Example: trek-maharashtra-raigad-fort.webp
Step 5: Strip EXIF Metadata
Every photo from a camera or phone carries hidden metadata, GPS location, camera model, shutter speed, and sometimes dozens of other fields. This data adds 10–50 KB per image and serves no purpose on a website. Worse, GPS data in images is a privacy concern.
When you process images through WebReady Images, EXIF data is automatically stripped during the conversion. One less thing to worry about.
Step 6: Add Proper Alt Text
Alt text tells search engines (and screen readers) what an image shows. It’s one of the strongest on-page SEO signals for image search rankings.
Good alt text is:
- Descriptive and specific: Raigad Fort trek trail with mountain view in Maharashtra
- Includes the target keyword naturally, without stuffing
- Under 125 characters
- Not starting with “Image of” or “Photo of”, screen readers already announce it as an image
Step 7: Use Lazy Loading
Lazy loading delays image loading until they’re about to appear on screen, improving initial page speed.
How to Use It
Add this attribute to your images:
<img src="image.webp" loading="lazy" alt="description">Do not lazy load hero or above-the-fold images, they should load immediately for better LCP.
Quick Checklist: Image Optimisation
- Convert images to WebP
- Resize properly (1280px content, 1920px max)
- Compress at q70–75
- Use SEO-friendly filenames
- Remove EXIF metadata
- Add alt text
- Enable lazy loading (except above-the-fold)
Free Tool: WebReady Images
WebReady Images simplifies the entire workflow:
- Convert to WebP
- Resize automatically
- Apply smart compression
- Generate SEO-friendly filenames
- Strip metadata
Runs 100% in your browser, no uploads, no sign-up, free to use.