Nayan Dhumal
Images make a blog post easier to read and far more likely to be shared. They are also the heaviest thing on most pages. This guide shows you how to prepare every image so that it helps your rankings, appears in Google Images and does not slow your site down.
Image SEO has two halves, and most guides only cover one. The first half is helping search engines understand what a picture shows, through its file name, alt text and the words around it. The second half is making the file small and well-behaved, so the page loads quickly and does not jump around while it loads.
You need both. A perfectly described image that weighs three megabytes hurts your page. A tiny image with the name IMG_4471.jpg and no description tells Google nothing.
The good news is that the whole job takes about two minutes per image once you know the routine, and WordPress already does part of it for you.
Key takeaways
- Resize images to the size they are displayed at before you upload them. This saves more than any other step.
- Use WebP or AVIF for photos and screenshots, and compress every file.
- Give each image a descriptive file name and honest alt text that says what the picture shows.
- Never lazy-load the main image at the top of the page. Lazy-load the ones further down.
- Make sure images have width and height set, so the layout does not shift as they load.
- Original images help more than stock photos, because they add something no other page has.
Why images matter for SEO
Images affect your search performance in three ways.
- Speed. On a typical blog post, images account for most of the page weight. Large files slow down loading, and loading speed is part of how Google measures page experience.
- Understanding. Search engines read file names, alt text, captions and nearby text to work out what an image shows and how it relates to the page.
- Extra traffic. Well-described images can appear in Google Images and in image blocks on the normal results page. For visual topics such as recipes, crafts, travel and design, that can be a meaningful source of visitors.
There is also the reader to think about. A clear screenshot or diagram keeps people on the page and helps them follow your instructions. Search engines are trying to reward exactly that.
Before you upload: prepare the file
Most image problems are created before the image ever reaches WordPress. Fix these four things on your computer first.
Choose the right format
The format decides how small the file can get without looking worse.
| Format | Best for | Notes |
|---|---|---|
| WebP | Photos, screenshots and most blog images | Much smaller than JPEG or PNG at similar quality. Supported by all current browsers and by WordPress since version 5.8. |
| AVIF | Photos where you want the smallest file | Often smaller than WebP. WordPress has supported uploads since version 6.5, as long as your hosting server supports the format. |
| JPEG | Photos, when you need maximum compatibility | Still fine. Larger than WebP for the same quality. |
| PNG | Graphics that need a transparent background | Files can be very large for photos. Avoid it for those. |
| SVG | Logos and simple icons | Stays sharp at any size. WordPress does not allow SVG uploads by default, for security reasons. |
For a normal blog post, the simple rule is to use WebP for almost everything. Keep PNG for images that need transparency and SVG for your logo.
Resize to the size it will be shown at
This is the step that saves the most, and the one people skip most often. A photo straight from a phone can be 4,000 pixels wide or more. If the text column on your blog is 750 pixels wide, the browser has to download a huge file only to shrink it.
Find out how wide your content area is, then resize your images to about twice that width at most, so they stay sharp on high-resolution screens. For many blogs that means somewhere between 1,200 and 1,600 pixels wide for a full-width image, and much less for small ones.
Good to know
WordPress helps in two ways. When you upload an image, it creates several smaller copies and lets the browser pick the best one for each screen. And if you upload a very large image, wider or taller than 2,560 pixels, it automatically keeps a scaled-down version for use on the site. Neither of these replaces resizing before you upload, because the original file still takes up space and time.
Compress the file
Compression removes data the eye does not notice. There are two kinds. Lossy compression gives much smaller files with a tiny, usually invisible, loss of quality. Lossless compression keeps every pixel and saves less.
For blog images, lossy compression at a medium to high quality setting is almost always the right choice. You can compress in two ways:
- Before uploading, with a free online or desktop tool. You drop the image in, pick the format and quality, and download the smaller file.
- After uploading, with an image optimisation plugin that compresses every upload automatically and can convert it to WebP or AVIF. Most have a free plan with a monthly limit, so check the current terms.
As a rough target, try to keep ordinary in-content images under about 100 to 150 KB and large full-width images under about 250 KB. These are rules of thumb, not official limits. A detailed photo will need more, and a simple screenshot much less.
Give the file a descriptive name
Rename the file before you upload it. The file name becomes part of the image address, and it is one of the signals search engines use.
| Poor file name | Better file name |
|---|---|
| IMG_4471.jpg | pour-over-coffee-brewing-setup.webp |
| screenshot-2026-03-04.png | wordpress-permalink-settings-screen.webp |
| image1-final-v2-NEW.jpg | chocolate-chip-cookies-on-cooling-rack.webp |
Use lower-case letters, separate words with hyphens, and describe what the picture shows in three to six words. Do not stuff it with keywords. A name like best-coffee-coffee-maker-buy-coffee-cheap.webp helps nobody.
When you add the image in WordPress
With a small, well-named file ready, the rest happens in the editor.
Write useful alt text
Alt text, short for alternative text, is a written description of the image. Screen readers read it aloud to people who cannot see the picture. It is shown when an image fails to load. And it is one of the main ways search engines understand what an image contains.
Write it for a person first. Describe what is in the image, in the context of the post, in one short sentence.
| Situation | Weak alt text | Good alt text |
|---|---|---|
| Photo of a finished dish | cake | Slice of lemon drizzle cake on a white plate |
| Screenshot in a tutorial | screenshot | WordPress Settings screen with the Permalinks tab selected |
| Chart in a guide | graph | Bar chart comparing page weight before and after compressing images |
| Keyword stuffing | best lemon cake recipe easy lemon cake lemon cake recipe | Slice of lemon drizzle cake on a white plate |
A few rules make alt text easy:
- Describe the image, not the page. If your keyword fits naturally, use it. If it does not, leave it out.
- Keep it short. One sentence, usually under 125 characters.
- Skip “image of” and “picture of”. Screen readers already announce that it is an image.
- If the image contains important text, such as a quote graphic, include that text.
- Leave alt text empty for purely decorative images, such as dividers or background shapes, so screen readers skip them.
- When an image is a link, describe where the link goes.
In WordPress, click the image in the editor and fill in the “Alternative text” box in the sidebar. You can also set it in the Media Library, which fills it in automatically the next time you insert that image.
Use captions and titles only when they help
A caption is the visible text under an image. Use one when it adds something, such as a credit, a source or a short explanation. You do not need a caption on every image.
The image “title” field in WordPress is mostly for your own organisation in the Media Library. It is not the same as alt text, and filling it in is far less important.
Put the image next to the text it belongs to
Search engines use the words around an image to understand it. Place each image close to the paragraph that talks about it, under a relevant subheading. A screenshot of a settings page belongs beside the step that mentions those settings, not at the bottom of the post.
Insert the right size
When you insert an image, WordPress lets you choose a size such as Medium, Large or Full Size. Choose the one that matches how it is displayed. For a full-width image in the content, Large is usually enough.
Make images load fast
Small files are the foundation. These settings make sure they are delivered well.
Let WordPress serve responsive images
WordPress automatically adds the code that lets a browser choose between several sizes of the same image. A phone downloads a small copy and a desktop downloads a larger one. You do not need a plugin for this. It works as long as you insert images in the normal way through the editor.
Lazy-load images below the first screen
Lazy loading means an image is only downloaded when the reader scrolls near it. WordPress has added this to images by default since version 5.5, so in most cases there is nothing to switch on.
The one image you must not lazy-load is the main image at the top of the page. It is usually the largest thing the visitor sees first, and delaying it makes the page feel slow. Recent versions of WordPress try to handle this for you by skipping lazy loading on the first images in the content and marking the likely main image as high priority.
Watch out
Some optimisation plugins lazy-load every image on the page, including your logo and the featured image at the top. If your speed test complains that the largest image was lazy-loaded, look for a setting in your plugin that excludes the first one or two images, and switch it on.
Always include width and height
When a browser knows an image’s width and height in advance, it reserves the right amount of space before the file arrives. Without them, the text jumps down the page as each image loads. Google measures that movement as Cumulative Layout Shift, and it is one of the Core Web Vitals.
WordPress adds width and height automatically to images inserted through the editor. Problems usually come from images added by hand in custom HTML, from some sliders and from adverts. If you write HTML yourself, always include both attributes.
Use caching and a CDN
Browser caching lets returning visitors reuse images they have already downloaded. A content delivery network, or CDN, stores copies of your images on servers around the world and delivers each one from a location close to the visitor. Many hosting companies and caching plugins include both.
For the full picture, including how to test your pages, see my guide to speeding up WordPress and passing Core Web Vitals. Your hosting matters here too. If your server is slow to respond, no amount of image work will hide it. My comparison of the best hosting for a new blog covers what to look for.
Help Google find and understand your images
A few more things make it easier for your images to be discovered.
- Use real image elements. Insert important images as normal images in the content. Google does not index images that are set as CSS backgrounds.
- Do not block your image files. Make sure your robots.txt file is not stopping search engines from reaching your uploads folder.
- Include images in your sitemap. The popular SEO plugins add the images from each post to your XML sitemap automatically. You only need to submit the sitemap once in Search Console. My Search Console guide for beginners shows how.
- Set a good featured image. It is normally used as the preview when your post is shared on social media and in messaging apps. An image of about 1,200 by 628 pixels suits most platforms.
- Use large images for Google Discover. Google says that large, high-quality images at least 1,200 pixels wide give a post a better chance of appearing in Discover.
- Put a clear title on the page. In image search, the title and description of the page are shown with the picture, so they affect whether people click.
Original images beat stock photos
A stock photo that appears on a thousand other websites adds nothing new to yours. An image that only you have does.
You do not need to be a photographer or designer. Some of the most useful blog images are simple:
- Screenshots of the steps in a tutorial, with the important area highlighted.
- A photo of the thing you are writing about, taken with your phone in good light.
- A simple chart or table made from data you collected yourself.
- A diagram that explains a process in boxes and arrows.
- A before and after comparison.
If you use an image you did not create, check its licence and give credit where the licence asks for it. Do not copy pictures from other websites or from an image search. Most of them are protected by copyright.
A two-minute routine for every image
Put the whole process together and it looks like this.
- Pick or create the image. Prefer an original one that explains something.
- Resize it. Make it no wider than about twice your content width.
- Convert and compress it. WebP, at a quality where you cannot see the difference.
- Rename the file. Three to six descriptive words, lower case, with hyphens.
- Upload it and write the alt text. One honest sentence about what it shows.
- Place it beside the relevant text. Add a caption only if it helps.
- Check the page. Run a speed test and make sure the top image is not lazy-loaded.
How to fix images on an existing blog
If you already have dozens of posts with heavy images, you do not have to redo them one by one.
- First Test your three most visited posts with PageSpeed Insights and note what it says about images.
- Then Install one image optimisation plugin and run its bulk tool to compress and convert the images already in your Media Library. Take a backup before you start.
- Next Go through your most visited posts and add missing alt text. Start with the ten that get the most traffic.
- After that Check that the image at the top of each post is not being lazy-loaded.
- From now on Follow the two-minute routine for every new image.
Common image SEO mistakes
- Uploading photos straight from a phone or camera. They are many times larger than a blog needs.
- Leaving alt text empty on meaningful images, or filling it with a string of keywords.
- Putting important text inside an image. Search engines and screen readers may not read it. Keep headings and key information as real text.
- Using PNG for photos. The files are far larger than they need to be.
- Running two image optimisation plugins at once. They can conflict with each other. Choose one.
- Using the same stock photo as everyone else. It adds weight without adding value.
- Forgetting mobile. Check that images are readable and not cut off on a phone.
Next: make the whole page faster
Images are the biggest win, but they are not the only one. Caching, your theme and your plugins all play a part.
Frequently asked questions
What is the best image format for a blog?
WebP is the best all-round choice for photos and screenshots, because it produces much smaller files than JPEG or PNG at similar quality and works in all current browsers. AVIF can be smaller still. Use PNG when you need a transparent background and SVG for logos and icons.
Does alt text help SEO?
Yes. Alt text helps search engines understand what an image shows, which supports both the page and its chances of appearing in image search. Its first purpose is accessibility, so write it as a clear description for a person who cannot see the image.
How big should blog images be?
Resize them to roughly the width they are displayed at, or up to twice that for sharp results on high-resolution screens. As a rule of thumb, aim for ordinary in-content images under about 100 to 150 KB after compression. Detailed photos may need more.
Should I lazy-load all my images?
No. Lazy-load images further down the page, but not the main image visible at the top. Delaying that image makes the page appear to load more slowly. WordPress applies lazy loading automatically and tries to skip the first images.
Do I need an image optimisation plugin?
Not strictly. If you resize and compress every image before uploading, WordPress handles the rest. A plugin is convenient because it compresses and converts images automatically, and it can fix the ones you uploaded in the past.
Can I use images from Google Images on my blog?
Not unless the licence allows it. Most images you find in a search are protected by copyright. Use your own images, images you have licensed, or images from sources that clearly allow reuse, and follow any credit requirements.