Back in my day (in the before times), many websites were NOT mobile-friendly.

Large images took forever to load.

Some fonts were practically illegible.

And don’t even get me started on websites that made you rotate or stretch your screen just to read a paragraph.

Fortunately, responsive web design has come a long way. Today, we have media queries, image optimization, and sans serif fonts.

Readability for the win!

But there’s still a catch: images can add significant page weight.

According to the HTTP Archive, the median webpage loads 19 images on desktop and 16 on mobile, accounting for about 1 MB and 880 KB of image data, respectively.

As your image library grows, so can your website’s page weight.

And with visual content playing an important role in search, optimizing those images matters.

The good news? The answer isn’t to use fewer images.

It’s to optimize the images you do use without making your website work harder to load them.

In this post, we’ll walk through a 5-step image optimization workflow to help you compress, name, describe, organize, and serve your website images more efficiently.

And for all of you TL;DR folks, stick around until the end for tips on how to batch, edit, and optimize your website images using free and premium plugins and tools.

Now, without further ado, let’s get started!

Why Image Optimization Matters

So, why should you care about image optimization?

Because your images have two jobs to do.

First, they need to work for your readers.

Images should load quickly, look good, make sense on different devices, and provide useful information to people using assistive technology.

Second, they need to work for search engines.

Search engines use information such as image filenames, alt text, and the surrounding page content to better understand images and their context.

That makes image optimization less about “doing SEO to your photos” and more about making your content easier to access, understand, and use.

And that’s what this 5-step workflow is all about:

1. Reduce unnecessary image file size.
2. Give your image files descriptive names.
3. Write useful captions and alt text.
4. Help search engines discover your images.
5. Make your images responsive and efficient across devices.

Let’s get into it.

Step 1: Reduce Image File Sizes

First up: make those image files smaller.

A beautiful, high-resolution photograph is great—until your website has to send several megabytes of it to someone’s phone before they can see your article.

Image compression reduces the amount of data your browser needs to download while preserving as much visual quality as possible.

The goal isn’t to make every image microscopic.

It’s to find the sweet spot between quality and file size.

Choose the right image format

Different images call for different formats.

JPEG/JPG works well for photographs and other complex images where some compression is acceptable.

PNG is useful for graphics that need transparency or crisp edges, although the resulting files can be larger.

Modern formats such as WebP and AVIF are also worth considering because they can provide efficient compression for web images.

So rather than asking, “What is the smallest file I can create?” ask:

“What is the smallest file I can create without compromising the image?”

That’s the goal.

Resize before you upload

Here’s another easy win: don’t upload a 5,000-pixel-wide photograph if your website only displays it at 1,200 pixels.

Resize your image to fit its intended use before—or as part of—the upload process. Then compress it.

Your CMS or image optimization plugin may also generate appropriately sized versions for different uses, so check what your platform already does before adding another tool to your workflow.

Step 2: Give Your Images Descriptive Names

Let’s play a little game.

Which of these tells you anything about the image?

IMG_1234.jpg

Or:

small-brown-dog.jpg

Exactly.

Your image filename is an opportunity to give both humans and search engines a little more context about what they’re looking at.

Before uploading an image, rename it using a short, descriptive phrase that accurately reflects the image.

For example:

Instead of using: IMG_1234.jpg

Try this: small-brown-dog.jpg

If your image shows a small brown dog finding its forever home, the second filename is much more useful.

Keep your naming convention consistent, too. Use hyphens or underscores instead of spaces, and avoid stuffing a bunch of keywords into the filename.

Remember: be descriptive when naming your photos, not spammy.

You’re helping a search engine understand the image—not trying to sneak every possible keyword into a file name.

Step 3: Add Helpful Captions and Alt Text

Now we’re getting into the part of image optimization where context really matters.

Two pieces of text commonly associated with an image are captions and alt text, however, both serve different purposes.

A caption appears alongside or below an image and gives readers additional context.

See photo reference as an example:

An example of a photo caption: A small brown dog named Otis finds his forever home

A useful caption might identify a person, place, date, or event.

It can also simply explain why the image matters to the story you’re telling.

Not every image needs a caption. That depends on your decretion.

If however you decide to write a caption for an image, it should add useful context that’s clear, concise, and relevant to the surrounding content.

Alt text is for accessibility

Alt text lives in the alt attribute and provides a text alternative for an image.

Screen readers can read it aloud to people who can’t see the image, and it can also be displayed when an image can’t be loaded.

For our dog photo, descriptive alt text might be:

"Small brown dog with big expressive eyes and long furry ears"

Notice what we’re not doing: cramming keywords into the sentence.

Write alt text for a person who needs to understand the image without seeing it.

If a relevant keyword naturally belongs in the description, great. And if it doesn’t, don’t force it.

Lastly, if an image is purely decorative and doesn’t add meaningful information, it may not need descriptive alt text at all.

Your audience comes first. Search engines come second.

That’s a good rule to keep in your back pocket for the rest of your SEO workflow, too.

Step 4: Help Search Engines Discover Your Images

You’ve compressed your images. You’ve named them. You’ve added helpful context.

Now let’s make sure search engines can actually find them.

Search engines discover images as part of crawling the web, and image URLs need to be accessible and crawlable if you want them to appear in Google Images and other search experiences.

For many websites, your CMS or SEO plugin will handle much of this behind the scenes. But it’s still worth knowing what’s happening under the hood.

Check your image sitemap

An image sitemap gives Google information about images on your site, especially when images may be hard to discover through normal crawling.

If your SEO plugin or CMS automatically generates your sitemap, make sure it includes image URLs rather than creating an XML sitemap by hand.

And if you’re troubleshooting image visibility in search, Google Search Console is your friend.

The goal isn’t to create more technical busywork.

It’s to make your images easy for search engines to discover, crawl, and understand.

Step 5: Make Your Images Responsive

Remember the before times?

The giant image that pushed the rest of the page off-screen?

The website that looked perfectly fine on your desktop but turned into a tiny, sideways puzzle on your phone?

Yeah. Let’s not go back there.

Responsive images help your website deliver the right image for the device.

Here are a few ways to make that happen:

Set image dimensions

Define your image’s width and height so the browser can reserve the appropriate space while the page loads. This can help reduce unexpected layout shifts.

Use srcset and sizes

These HTML attributes let you provide different image sizes and tell the browser how much space the image is expected to occupy. The browser can then select an appropriate source.

Lazy-load images

Lazy loading tells the browser to delay loading certain images until they’re closer to entering the viewport. This can reduce the amount of image data needed during the initial page load.

Use your CMS or plugins

If you’re using WordPress or another CMS, your platform or plugins may already handle some responsive-image functionality for you.

The goal isn’t to make your website do more work.

It’s to make your website serve the right image, at the right size, at the right time.

And that’s really what image optimization is all about.

Don’t Let Your Images Slow You Down

Nice! You made it to the end of the 5-step image optimization workflow.

So, let’s recap. We’ve covered:

• Compressing your images without sacrificing quality.
• Resizing them for their intended use.
• Giving image files descriptive names.
• Writing useful captions and alt text.
• How to help search engines discover and understand your images.
• And making sure your images work well across devices.

You don’t have to overhaul your entire media library overnight.

Start with your newest blog posts. Then work backward through your older, highest-traffic pages.

And remember: image optimization isn’t about making your website boring or stripping out every beautiful photograph.

It’s about making those images quick and easy for your website to load.

Now go forth and optimize!

Image Optimization Tools

You don’t need a giant stack of expensive software to optimize your website images.

There are plenty of free and premium tools available.

The best option depends on your workflow, budget, and website platform.

Note: You’ll need to experiment to find the proper compression and image-quality balance for your needs.

Web Apps

• EZGIF — A browser-based tool that can create GIFs from video, convert images into different formats, and optimize GIF, JPG, and PNG files.
• Pic Resize — A browser-based image resizing and editing tool.
• Image Resizer — A free tool for resizing images in bulk and converting them between different file formats.

Software

• GIMP — Free, open-source raster image editing software available for GNU/Linux, macOS, and Windows.
• Photoshop — Premium photo-editing and design software for Mac and Windows.
• Affinity Photo — Premium photo-editing software available for macOS, Windows, and iPad.
• Paint.NET — A simple but powerful image and photo editor for Windows.

WordPress Plugins

• Imagify Image Optimizer — Resizes and compresses images in bulk and can convert images to WebP.
• Optimus — Automatically optimizes images uploaded to your WordPress website.
• TinyPNG — Compresses JPG and WebP images using lossy compression.
• Smush — Optimizes, resizes, and compresses images and includes lazy loading and bulk compression features.

A Few More Tips

Image optimization isn’t a “set it and forget it” task.

Fortunately, there are tools and resources to help make managing your site’s images easier.

• Check your website’s performance periodically using PageSpeed Insights.
• Test important pages on both desktop and mobile.
• If you’re using WordPress, periodically review your media library and remove unused files when appropriate.
• Consider a CDN (content delivery network) if your hosting provider offers one.
• Keep an eye on your image workflow as your website grows. The more content you publish, the more important a consistent process becomes.

The goal isn’t perfection.

It’s building a repeatable workflow that keeps your images beautiful, relevant, accessible, and reasonably lightweight.

And that’s a much better place to be than the before times.