The Complete Guide to Optimizing Blog & Website Images
Speed, SEO and quality — all three
Images account for 60–80% of a typical web page's weight, making them the single biggest performance bottleneck. Optimize them properly and pages load faster, search rankings climb and visitors stop bouncing. This guide walks through every step of optimizing images for a blog or website.
Contents
1. Why image optimization matters
Page speed and user experience
Google's research found that 53% of mobile visitors abandon a page that takes more than three seconds to load. Optimizing images is the most effective way to cut that time. Optimizing ten unoptimized images commonly shaves 2–5 seconds off load time.
Search rankings (SEO)
Google made Core Web Vitals an official ranking factor in 2021. One of them, LCP (Largest Contentful Paint), measures how long the largest piece of content — usually an image — takes to load. Optimizing images improves LCP directly, and that feeds into your rankings.
Lower hosting costs
Halve your image weight and you halve bandwidth costs at the same traffic level. The more traffic you have, the more optimization pays.
2. Choosing the right format
| Image type | Recommended format | Why |
|---|---|---|
| Photos and complex images | WebP (or JPG) | Smallest file size |
| Logos and icons (transparent background) | SVG (or PNG) | Infinitely sharp, negligible size |
| Screenshots and UI images | WebP (or PNG) | Keeps text crisp |
| Thumbnails and banners | WebP | Best balance of speed and quality |
3. Getting the dimensions right
There's no reason to upload an image larger than it will ever display. If your blog's content column is 800px wide, an 800–1200px image is plenty. Upload the 4000px original instead and you're shipping 4–10× more data than anyone needs.
The basic rule: 1.5–2× the display size is ideal (to cover retina displays). For an 800px content column, upload at 1200px. Anything above 2400px is waste.
Recommended maximum widths
- Blog body images: 1200px
- Blog thumbnails: 800~1200px
- Hero banners: 1920px
- Product images: 1000~1500px
- Icons and button images: SVG, or 100–200px
4. Setting the compression level
| Use case | JPG quality | WebP quality |
|---|---|---|
| Speed above all | 70~75% | 65~70% |
| Balanced (recommended) | 80% | 75% |
| Quality above all | 85~90% | 80~85% |
For most blogs and websites, JPG at 80% or WebP at 75% is the sweet spot.
5. Optimizing file names
Search engines read your file names to work out what an image contains.
IMG_20260629_123456.jpg tells a search engine absolutely nothing.
What makes a good file name
- Use words that describe what's in the image
- Separate words with hyphens (-), not underscores (_)
- Lowercase only
- Prefer Latin characters over non-Latin ones (avoids URL-encoding issues)
- Put the key term first
Example:
Bad file name: IMG_2026062.jpg, photo.jpg
Good file name: webp-image-compression-guide.webp, sns-image-size-instagram.jpg
6. Writing good alt text
HTML img tag's alt attribute supplies alternative text for when the image can't be seen. Both screen readers and search engines rely on it to understand the image.
Principles for good alt text
- Write it as if describing the image to someone who can't see it
- Be specific and descriptive — say what it shows, not just "photo" or "image"
- Work in the key term naturally (never stuff keywords)
- Keep it under about 100 characters
- For purely decorative images, leave it
alt=""empty
Example:
Bad alt text: alt="image", alt="photo1"
Good alt text: alt="Recommended Instagram feed image size, 1080x1080"
7. Image optimization checklist
Run through this before uploading anything to your site.
- Does the format match the job? (photos → WebP/JPG, logos → SVG/PNG)
- Is the width no more than 2× the display size?
- Have you dropped JPG/WebP quality to 75–85%?
- Is the file under 200KB? (hero images excepted)
- Is the file name descriptive, lowercase and hyphenated?
- Does the alt text specifically describe the image?
- Have you stripped unnecessary EXIF metadata?
8. A practical optimization workflow
Here's the order to work in before publishing an image to your blog.
- Check the original — note its dimensions and format
- Resize — down to 1.5–2× the display size (e.g. 1200px)
- Convert the format — to WebP or JPG
- Compress — set quality to 75–80%
- Check the result — aim for under 200KB
- Rename the file — to something descriptive in Latin characters
- Write the alt text after uploading
Doing it in ImgFixIt: Resize, convert and compress all happen in one place. Upload your image, apply each step in order, then download. Everything runs inside your browser, so the image is never sent to a server.