How to Optimise Images on Your Blog for Speed and SEO (2026 Guide)

A blog post can read like a breeze, then load like it’s wading through glue. Most of the time, the culprit isn’t your writing, it’s one oversized image that arrived straight from a camera roll and never got trimmed down.

Big images punish readers in three ways. They slow the first view on mobile, they chew through data, and they make pages feel “sticky” when you scroll. Search engines notice that too. If your largest image takes ages to appear, your Core Web Vitals suffer, and that can drag down visibility. And if you want traffic from Google Images, the way you name and describe images matters.

The good news is this isn’t complicated. You can follow the same repeatable process on WordPress, Ghost, Webflow, or any CMS: pick the right file type, resize, compress, load images the smart way, then add SEO clues that help both humans and Google.

Start with the right image file, size, and format (this is where most speed wins happen)

Speed comes from sending fewer bytes. That’s the whole story. Fancy effects can’t rescue a 6MB upload.

The simplest rule: never upload camera originals. Modern phones shoot huge photos because they’re designed for zooming and printing, not for blog pages. A typical article image doesn’t need anywhere near that many pixels.

Choose a sensible maximum width (match your layout)

Before you touch compression, work out how wide images actually display in your theme.

• If your content column is about 760px wide, a 3000px image is wasted weight.
• If you use a wide hero banner, you might need more width, but still far less than camera originals.

Practical targets that suit most blogs in 2026:

• Hero images: 1200px to 1600px wide is usually enough for a full-width feel on many themes.
• In-content images: 800px to 1200px wide often fits most article layouts.
• Thumbnails and cards: 300px to 600px wide is common, depending on your design.

If your site uses a retina-style display strategy, you might choose 2x images for key areas (for example, a 1200px slot may use a 2400px source). Just don’t make 2x your default for every image. Readers on slower connections pay the bill.

Keep the image “job” in mind

A hero image is theatre. It sets mood, supports the headline, and often becomes the Largest Contentful Paint (LCP) element. If it’s huge, the entire page feels slow.

An in-post image is more like a supporting quote. It should land quickly, look clean, and not distract. That usually means smaller dimensions and a tighter file size.

A thumbnail is a signpost. It can be even lighter, because it’s rarely examined in detail.

Choose the best format in 2026: AVIF and WebP first, JPEG and PNG when needed

Image formats are like suitcases. Some pack more neatly than others.

• AVIF: Often gives the smallest files for photos at similar quality. Great for hero images and photography-heavy posts when your setup can serve it.
• WebP: Widely supported, strong compression, good general default for most blog images.
• JPEG: Still fine for photos if you can’t serve next-gen formats, but files tend to be larger for the same look.
• PNG: Best for sharp edges, text-heavy graphics, and transparency (logos, icons, UI screenshots when you want crispness). The trade-off is size.

If you only remember one thing, remember this: photos usually belong in AVIF or WebP, logos and graphics often belong in PNG (or WebP if you’ve checked it stays sharp).

Quick decision checklist

• Is it a photo (people, places, products, food)? Use AVIF first, then WebP.
• Is it a logo, icon, or needs transparency? Use PNG (or transparent WebP if you’ve tested it).
• Is it a screenshot with small text? Start with PNG or a high-quality WebP, then check sharpness at 100 percent.
• Are you stuck with an older workflow? Use JPEG for photos, PNG for graphics, and keep files small.

Resize before you compress: pick smart dimensions for hero images, in-post images, and thumbnails

Resizing is like trimming fabric before stitching. If you compress first, you’re working harder than you need to.

When you shrink an image from 4000px wide to 1400px wide, you cut a huge chunk of data immediately. Compression then has a smaller, easier job, and the result usually looks cleaner.

Here’s a quick guide you can adapt to your theme:

If your theme or CMS generates multiple sizes automatically, you can export a “big enough” master image (for example, 1600px) and let the system create smaller versions. Still, don’t give it a monster file and hope for miracles.

Compress images without making them look bad (quality settings that work)

Compression is where people panic, because they picture ugly blur. But good compression is more like cleaning a window. You remove what no-one needs, and the image still feels the same.

The trick is to aim for the smallest file that still looks natural on the devices your readers use.

For many blogs, these size goals are realistic:

• Under 100KB for most in-content images, when possible.
• 100KB to 200KB for larger photos, detailed scenes, or key visuals.
• Larger than 200KB only when the image genuinely needs it (fine textures, large hero images, complex gradients).

Don’t chase tiny numbers if it makes your site look cheap. A fast blog that looks rough won’t hold attention.

Lossy vs lossless compression, and when each one is the safer choice

Think of compression like packing.

• Lossy compression throws away some detail to save space. Done well, your eyes won’t notice. This is usually best for photos.
• Lossless compression keeps every pixel exact, just stores it more efficiently. This is safer for logos, icons, and text-heavy graphics, but it won’t shrink files as dramatically.

Warning signs you’ve gone too far:

• Banding: skies or shadows form visible stripes.
• Muddy text: screenshots become hard to read.
• Halo edges: weird outlines around people or objects.

If any of those appear, raise the quality slightly or switch format.

A simple compression workflow: export, compress, then spot-check on mobile

You don’t need a complicated setup. You need a repeatable habit.

1. Export at the right width (based on where it displays).
2. Save in AVIF or WebP for most images, PNG for sharp graphics.
3. Compress to a sensible quality (start around the middle, then adjust).
4. Strip metadata if your tool offers it (camera data, location info, and other extras most blogs don’t need).
5. Spot-check on your phone, not just your laptop. Open the page, zoom to 100 percent on the image, and look at faces, text, and edges.
6. If it looks soft, nudge quality up a little. If it looks identical, try a touch more compression.

Tools can be online compressors, desktop editors, or CMS plugins that compress on upload. The tool matters less than the routine. Consistency is what keeps your media library from becoming a junk drawer.

Make images load fast on every device (responsive images, lazy loading, and layout stability)

Performance isn’t only file size. It’s also timing. When does the browser fetch the image, which size does it fetch, and does the page jump around while it loads?

These details feed into Core Web Vitals:

• LCP measures how quickly the main content appears (often a hero image).
• CLS measures how much the layout shifts while loading (those annoying jumps that steal your place).

You can improve both without writing a single line of code, as long as your platform supports the basics.

Use responsive images so phones do not download desktop-sized files

Responsive images solve a common waste: a phone downloading the same large file meant for a wide desktop screen.

At a concept level, responsive images work like this:

• Your CMS stores several versions of the same image (for example, 400px, 800px, 1200px).
• The browser picks the best fit for the screen size.

In HTML, this is often handled with srcset and sizes, but you don’t need to memorise that. You just need to confirm your theme or plugin is generating multiple sizes, and that the page is serving the smaller versions to smaller screens.

A simple result you should see: the same article image might be 120KB on desktop, but only 45KB on mobile, because the mobile version is narrower.

Lazy load below-the-fold images, but protect your main hero image

Lazy loading means images load when they’re close to appearing on screen. It saves bandwidth and speeds up the first view, because the browser doesn’t try to fetch everything at once.

Most modern CMS platforms and browsers support lazy loading without much effort. Still, one rule matters:

Don’t lazy load your main above-the-fold hero image (or any image that’s likely to be the LCP element). If the browser waits to load it, your page can feel blank for longer, and LCP can worsen.

Lazy loading works best for:

• Images halfway down the article
• Galleries at the end of a post
• Related post thumbnails below the fold

After enabling it, scroll your page. Images should appear smoothly, not pop in late like stage props.

Stop layout shift: always set image width and height (or reserve space)

CLS is the “page jump” problem. You start reading a sentence, an image loads, and the text shifts down. It feels like the page is wriggling under your finger.

This usually happens when the browser doesn’t know how much space to reserve for the image.

Fixes are straightforward:

• Make sure images have width and height attributes (many CMS platforms add these automatically).
• If you use custom blocks, confirm they reserve space based on the image’s aspect ratio.
• Be cautious with ads and embedded widgets around images, because they can cause shifts too.

A stable layout feels calm. That calm feeling keeps people reading.

Optimise images for SEO and accessibility (alt text, filenames, and context)

A fast image helps users. A well-described image helps search engines and screen readers.

Google can analyse pixels to a point, but it still relies heavily on text clues: filenames, alt text, captions, and the surrounding paragraph. If you treat these as part of your writing, you get better accessibility and stronger SEO without stuffing keywords.

Write alt text that describes the image clearly, and earns image search traffic

Alt text exists for people who can’t see the image. That’s the priority. If you do that well, you also tend to write alt text that search engines can understand.

Simple rules:

• Describe what matters in the scene.
• Keep it short and specific.
• Don’t start with “image of” or “picture of”.
• Don’t force keywords.
• If an image is purely decorative, use empty alt text (so screen readers can skip it).

Two quick before-and-after examples:

Bad alt: “SEO image”
Good alt: “Screenshot of blog image settings showing WebP enabled”

Bad alt: “Woman”
Good alt: “Woman editing a blog post on a laptop beside a cup of tea”

Those “good” versions aren’t poetic, they’re useful. That’s the point.

Use clean filenames and captions that match the page topic

A filename is a tiny SEO signal, but it’s also a sanity signal for your future self.

Good filenames are:

• Lowercase
• Hyphen-separated
• Descriptive, not stuffed

Example: optimise-blog-images-webp-avif.jpg is better than IMG_4829.JPG.

Captions can help too, but only when they add meaning. A caption that repeats the paragraph wastes space. A caption that gives context can keep readers anchored, and it reinforces relevance.

Also, place images near the text they support. If your paragraph explains lazy loading and the image shows your settings, keep them close together. That alignment helps both readers and search engines.

Help Google understand your images with structured data and an image sitemap (when it makes sense)

You don’t need advanced SEO plumbing for every personal blog. But if your site is image-heavy, structured data and image sitemaps can help.

This matters most for:

• Publishers with lots of original images
• Recipes and how-to posts where images carry meaning
• Product pages where images drive clicks
• News-style sites where images appear across many sections

Many SEO plugins and CMS features can generate sitemaps and basic structured data for you. The key is consistency: everything should point to the final image URLs that users actually load, not to old formats you no longer serve.

Conclusion

One oversized image can make a great article feel slow. The fix is simple once it becomes habit: choose a modern format (AVIF or WebP where possible), resize to match your layout, compress until it still looks clean, and let responsive images serve smaller files to phones. Lazy load what’s below the fold, protect your hero image for LCP, and set width and height so the page doesn’t jump. Then finish with clear alt text, tidy filenames, and a quick test on mobile.

Pick one older post today and fix the worst images first. That single clean-up often lifts speed scores, lowers bounce, and makes the whole site feel sharper.