Page load speed is one of the most important factors in both user experience and search engine rankings. Google uses Core Web Vitals — a set of performance metrics that measure loading speed, visual stability, and interactivity — as ranking signals. And among all the factors that slow down web pages, unoptimised images are the single most common culprit.
Images account for the majority of bytes transferred when loading a typical blog post. A page with five unoptimised photos can easily weigh 15–20 MB, while the same page with properly optimised images might weigh just 800 KB — a 20× improvement that dramatically reduces load time and improves rankings.
This guide covers the practical steps you can take today to optimise every image on your blog without sacrificing visual quality.
Why Images Slow Down Blogs
When a visitor loads your blog post, their browser downloads every image on the page before it can display them. Slow internet connections, mobile data limitations, and server bandwidth caps all mean that large images create significant delays:
- A 3 MB unoptimised hero image can take 3–8 seconds to load on a mobile connection
- Google's PageSpeed Insights penalises pages where Largest Contentful Paint (LCP) exceeds 2.5 seconds — often caused by a large, unoptimised image being the first major visual element
- Each additional second of load time increases bounce rate by roughly 32%, according to Google's research
Step 1: Resize Images to Display Dimensions
The most impactful first step is ensuring you never upload an image larger than it will actually be displayed. A blog post column is typically 700–900 pixels wide. Uploading a 4000×3000 pixel photograph when it will display at 800×533 pixels means your visitors download 25 times more data than necessary.
Use Rekreay's free Image Resizer to resize every image to its display dimensions before uploading. For a standard blog post:
- Featured/hero image — 1200×675 px (16:9) or 1200×630 px (recommended for social sharing)
- Inline content images — 800×450 px maximum, often narrower
- Thumbnail images — 400×225 px or smaller
Step 2: Compress Images Without Visible Quality Loss
After resizing, compress the image to remove unnecessary data. For JPG images at quality 80–85, the compression is virtually invisible to the human eye but reduces file size by 40–70%.
For PNG images containing screenshots, graphics, or images with transparency, lossless PNG compression can reduce file size by 20–40% without any quality loss at all.
Use Rekreay's free Image Compressor to compress your images with adjustable quality settings and instant before/after file size comparison.
Step 3: Convert to WebP Format
WebP is a modern image format developed by Google that produces significantly smaller files than JPG and PNG at equivalent visual quality:
- WebP is typically 25–35% smaller than JPG at the same quality level
- WebP is typically 26% smaller than PNG for lossless images
- All modern browsers support WebP: Chrome, Firefox, Safari (since 2020), Edge, and all major mobile browsers
Converting your blog images from JPG to WebP is one of the quickest wins for page speed. Use Rekreay's free Image Converter to batch-convert your images to WebP. Upload your JPG or PNG, select WebP as the output format, and download the optimised file.
Step 4: Use Lazy Loading
Lazy loading defers the loading of images that are below the visible viewport until the user scrolls to them. Instead of loading all twenty images on a page when the visitor first arrives, the browser loads only the images visible in the current viewport. The rest load as the user scrolls.
In HTML, lazy loading is now a native attribute:
<img src="image.webp" alt="description" loading="lazy">On Blogger, the platform adds lazy loading attributes automatically to most images. On WordPress, most modern themes and the Jetpack plugin handle this automatically. If you manage a custom HTML site, add loading="lazy" to every <img> tag below the fold.
Step 5: Specify Image Dimensions in HTML
Always include width and height attributes on your image tags. When a browser knows the dimensions of an image before it loads, it can reserve the correct space in the page layout, preventing Cumulative Layout Shift (CLS) — another Core Web Vitals metric. Without dimensions, the page layout jumps as images load, which is both visually jarring and a Google ranking penalty.
Step 6: Write Descriptive Alt Text
Alt text does not directly affect load speed, but it is a key factor for SEO and accessibility. Every image on your blog should have an alt attribute describing what the image shows. Google reads alt text to understand image content, and screen readers use it to describe images to visually impaired users.
Good alt text is descriptive and specific: alt="Screenshot of the Rekreay image compressor tool showing a file size reduction from 3.2 MB to 850 KB" is far better than alt="image" or leaving it blank.
Image Optimisation Checklist for Bloggers
- Resize every image to its display dimensions before uploading
- Compress JPG images to quality 80–85 using an image compressor
- Convert photographs to WebP for the smallest possible file size
- Add
loading="lazy"to all images below the fold - Always specify
widthandheightattributes to prevent layout shift - Write descriptive, specific alt text for every image
- Test with Google PageSpeed Insights after uploading and address any remaining image warnings
Final Thoughts
Image optimisation is the highest-impact, lowest-effort performance improvement available to most bloggers. Following the steps above — resize, compress, convert to WebP, lazy load — can cut your page weight by 80–90% and dramatically improve both user experience and Core Web Vitals scores.
All the image tools you need are available free at Rekreay: Image Resizer, Image Compressor, and Image Converter — all browser-based, no upload to any server, completely free.