Image SEO for Beginners

Image SEO for beginners comes down to four habits: describe each picture with alt text, give it a width and height, resize it to the size it is shown at, and save it as WebP. These steps help Google understand your images and keep your pages fast on phones. On a small site, you can often fix all four in an afternoon.

What does image SEO for beginners cover?

Image SEO means making your pictures easy for Google to find and understand, and light enough to load fast. Our checkup looks at four things, and each one has its own fix:

Checkup item	What it means	The fix
Alt text	Pictures have no description	Add a short alt text
Image size	No width and height in the code	Add both numbers
Image fit	The file is bigger than its spot	Resize the file
Modern format	Old JPEG or PNG files	Convert to WebP

How do I write good alt text?

Alt text is a short description inside the image tag. Screen readers read it out loud to people who cannot see the picture. Google reads it too. Google calls alt text the most important piece of information it uses to understand an image, together with the text around it.

Google's own guide uses a puppy to show the difference:

• Bad: <img src="puppy.jpg"> (no alt text at all)
• Better: <img src="puppy.jpg" alt="puppy">
• Best: <img src="puppy.jpg" alt="Dalmatian puppy playing fetch">

Keep it to a few words that say what the picture shows. Do not stuff it with keywords. A list like "puppy dog cheap puppies dog food" counts as spam in Google's eyes. If a picture is only decoration, such as a line or a pattern, use an empty alt: alt="". Screen readers then skip it.

Where to add it:

• Bloghints CMS: go to Admin › Media, open the image and fill in "Alt text".
• WordPress: open the Media Library, click the image and fill in "Alternative Text".
• Plain HTML: add alt="..." inside each <img> tag.

Why should every image have a width and height?

When the browser does not know an image's size, it leaves no room for it. Then the picture loads, and the text below jumps down. This jump is called a layout shift. Google measures it as Cumulative Layout Shift (CLS), one of the Core Web Vitals, which are Google's speed and comfort scores for pages. A good CLS score is 0.1 or less, according to web.dev.

web.dev names images without a size as one of the most common causes of a poor score. The fix is simple. Write the image's real pixel size in the tag:

• <img src="tomato-pots.webp" alt="Tomato plants in three clay pots" width="800" height="450">

Your CSS can still make the image smaller on phones. Modern browsers use the two numbers to work out the shape and keep the right space. Add img { max-width: 100%; height: auto; } to your CSS so images shrink to fit small screens without stretching. The Bloghints CMS adds width and height to images for you. WordPress does the same for images you insert from the Media Library.

How big should my image files be?

A photo straight from a phone can be 4000 pixels wide. If your blog shows it at 800 pixels wide, the visitor still downloads the huge file. That wastes data and slows the page, most of all on a phone with a weak signal. Google notes that images are often a big part of a page's weight.

1. Find the largest width the image is shown at. For most blog posts, that is the width of the text column.
2. Resize the image to that width. You can do this in the free Photo Editor.
3. Save it in a modern format (next step).
4. Upload the new file and replace the old one in the post.

If you want sharp images on high-resolution screens, you can resize to twice the shown width. Going far beyond that rarely helps.

Should I convert images to WebP?

Yes, for most sites. WebP and AVIF are newer image formats. Google's Lighthouse guide says they compress better than JPEG and PNG, so you get smaller files at the same quality. Google Search supports both, along with JPEG, PNG, GIF, SVG and BMP.

Use the free Image to WebP Converter to turn your JPEG and PNG files into WebP right in your browser. Then upload the WebP files and update the image tags. The Bloghints CMS turns uploads into WebP on its own. On WordPress, recent versions accept WebP uploads, and image plugins can convert old files in bulk.

One note: the image you use for social sharing is a separate case. Our guide to Open Graph tags for beginners explains that one.

What else helps Google find my images?

• Use real <img> tags. Google says it does not index images set as CSS backgrounds. Put important pictures in the page as <img>.
• Use clear file names. tomato-pots.webp tells Google more than IMG00023.JPG.
• Keep text near the image. A caption or the paragraph around it helps Google see the context.
• Do not lazy-load the first big image. Lazy loading means the browser waits to load an image until the reader scrolls near it. It is great for images lower down, but it slows the first picture at the top.

I remember choosing light WordPress themes because I believed speed was everything. They helped only a little. Images are often a big part of a page's weight, and resizing them is a free fix that anyone can do. Our guide to Core Web Vitals for beginners covers the other speed checks.

How do I check that the fixes worked?

1. Right-click an image and choose Inspect. Check that the tag has alt, width and height, and that the file ends in .webp.
2. In Chrome DevTools, open the Network tab, pick Img, and reload the page. The Size column shows how heavy each image is.
3. Run PageSpeed Insights on the page and look for image warnings.

That is image SEO for beginners in short: alt text, width and height, the right file size, and WebP. Fix one page first, then re-run the free Website SEO Checkup to confirm the image warnings are gone before you move on to the rest.

Frequently asked questions