Image SEO for Beginners: Alt Text, Compression, File Names, Lazy Loading and Core Web Vitals (2026 Guide)

Image SEO for Beginners: Alt Text, Compression, File Names, Lazy Loading and Core Web Vitals (2026 Guide)

Most new bloggers spend hours on their words and about thirty seconds on their images. They grab a photo from their phone, drag it into the editor, and hit publish. The post looks fine on their own laptop, so they move on. A few weeks later, they open PageSpeed Insights, see a sea of orange and red, and have no idea why a simple blog post takes six seconds to load on a phone.

I have made that exact mistake myself, more than once. The good news is that image SEO is one of the easiest areas to fix. You do not need to be a developer or buy tools, and most improvements take a few minutes per post.

In this guide, we will go through image SEO from the ground up. You will learn how to write alt text that actually helps people, how to name image files, how to choose a format and compress images without making them look blurry, how lazy loading works, and how all of this connects to Core Web Vitals. You will also see how to handle all of it on Blogger.

What Is Image SEO and Why Does It Matter?

Image SEO is the practice of preparing images so that search engines can understand them and so that pages containing them load quickly and comfortably for visitors. It covers two sides of the same coin.

The first side is understanding. Search engines are good at reading text, and they have become much better at analyzing pictures, but they still rely heavily on the clues you give them. The file name, the alt text, the caption, and the words around an image all help Google decide what the image shows and which searches it might be useful for.

The second side is performance. Images are usually the heaviest part of a web page, and a single uncompressed photo can outweigh all the text, code, and fonts combined. Heavy images mean slow pages, jumping layouts, and visitors who leave early.

Getting image SEO right gives you several benefits at once:

• Your images can appear in Google Images and in the image results that sometimes show up on the main search page, which can bring extra visitors.
• Your pages load faster, which improves the experience for readers on slow mobile connections.
• Your Core Web Vitals scores tend to improve, because images are one of the main causes of poor loading and layout scores.
• Your content becomes more accessible to people who use screen readers.
• Your site looks more professional and trustworthy, which matters if you plan to apply for Google AdSense.

How Search Engines Understand Images

Google's documentation describes a mix of signals it uses to understand images. The most important ones for beginners are:

• The alt attribute, which describes the image in words.
• The file name, which gives a short hint about the subject.
• The surrounding text, including the heading above the image and the paragraphs near it.
• The caption, if you use one, because captions are among the most read pieces of text on any page.
• The page title and overall topic, which give context to every image on the page.

Think of it like describing a photo to a friend over the phone. "IMG_4821" tells them nothing; "a blue ceramic coffee mug on a wooden desk" paints a clear picture. Give search engines that second kind of description.

Alt Text: The Most Important Image SEO Habit

Alt text, short for alternative text, is a written description added to an image through the alt attribute in HTML. It looks like this in code:

<img src="blue-ceramic-coffee-mug.webp" alt="Blue ceramic coffee mug on a wooden desk">

Alt text has two main jobs. First, screen readers read it aloud to people who cannot see the image. Second, it tells search engines what the image shows. If an image fails to load, many browsers also display the alt text in its place.

How to Write Good Alt Text

Good alt text is short, specific, and honest. A useful test is to ask yourself: "If I closed my eyes and someone read this sentence to me, would I understand what the image shows and why it is on this page?"

Some practical guidelines:

1. Describe what is actually in the image. Mention the main subject and any detail that matters for the article.
2. Keep it reasonably short. One clear sentence is usually enough. Many accessibility guides suggest staying around 125 characters, because some screen readers handle shorter descriptions more comfortably.
3. Include your keyword only when it fits naturally. If your post is about homemade pizza dough and the photo shows the dough rising in a bowl, "Homemade pizza dough rising in a glass bowl" is perfect. Forcing in extra keywords is not.
4. Do not start with "image of" or "picture of." Screen readers already announce that it is an image, so those words waste time.
5. Add context for screenshots and charts. If you show a screenshot of a settings page, say what the reader should notice, for example "Blogger search preferences page with custom robots header tags turned on."

Alt Text Examples: Weak vs Strong

Weak alt text	Better alt text
image	Golden retriever puppy sleeping on a grey sofa
seo seo tips best seo free seo tools	Google Search Console performance report showing clicks and impressions
screenshot	PageSpeed Insights mobile result with LCP of 1.9 seconds
shoes	Red running shoes with white soles on a park trail

The weak examples are either empty of meaning or stuffed with keywords. The better examples describe the image clearly and naturally connect it to the topic of the page.

When to Leave Alt Text Empty

Not every image needs a description. Decorative images, such as a divider line, a background pattern, or a small icon that sits next to a text label that already says the same thing, add nothing for a screen reader user. For these, use an empty alt attribute, written as alt="". This tells assistive technology to skip the image.

An empty alt attribute is a deliberate choice; a missing one is a mistake, and some screen readers will read the whole file name aloud instead.

Alt Text Mistakes to Avoid

Avoid keyword stuffing, which Google's spam policies specifically warn against. Do not copy the same alt text onto every image, do not write a whole paragraph, and do not describe what you wish the image showed. A generic laptop photo is not a "best SEO tool dashboard." Be honest.

Image File Names: Small Detail, Real Signal

When you take a photo with your phone, it usually gets a name like IMG_4821.JPG or PXL_20261102_093512.jpg. Screenshots get names like "Screenshot 2026-11-02 at 10.14.33.png." None of these tell anyone anything about the image.

Google's own image guidelines recommend using descriptive file names. It is a small signal, but it is free, and it also makes your own media library much easier to manage.

How to Name Image Files

Follow these simple rules before you upload anything:

• Use plain words that describe the image. For example, blue-ceramic-coffee-mug.webp.
• Separate words with hyphens. Hyphens are the standard, readable choice for web addresses. Avoid spaces, which turn into "%20" in URLs, and avoid underscores where you can.
• Use lowercase letters. Some servers treat uppercase and lowercase as different files, so lowercase avoids confusion.
• Keep it short. Three to six words is plenty.
• Avoid special characters. Stick to letters, numbers, and hyphens.

A quick rename, resize, and compression turns an anonymous 3.8 MB upload into a light, descriptive image.

Before and After Examples

Here is how a few real-world file names look after a quick rename:

• IMG_4821.JPG becomes blue-ceramic-coffee-mug.webp
• Screenshot (14).png becomes google-search-console-coverage-report.png
• DSC00031.jpg becomes lahore-food-street-at-night.jpg

Renaming takes seconds before upload, but is much harder afterwards, because platforms like Blogger keep the original file name in the image URL. Make it a habit from your very first post.

Choosing the Right Image Format

The format you choose has a big effect on file size, and file size has a big effect on page speed. Here is a beginner-friendly overview of the formats you will meet most often.

Pick the format by content type: photos, screenshots, all-round web images, or icons.

JPEG

JPEG, often written as JPG, has been the standard format for photographs for decades. It handles colors and gradients well and supports adjustable compression. It does not support transparency. If you have a photo and nothing else is available, JPEG is a safe choice.

PNG

PNG is lossless, which means it keeps every pixel exactly as it was. That makes it good for screenshots, logos, and graphics with sharp edges or text, and it supports transparent backgrounds. The downside is that PNG photos can be very large. Saving a photo as PNG is one of the most common reasons beginner pages are slow.

WebP

WebP is a modern format developed by Google. It supports both lossy and lossless compression and transparency, and it usually produces noticeably smaller files than JPEG or PNG at similar visual quality. All major modern browsers support it. For most blogs in 2026, WebP is an excellent default for photos and many graphics.

AVIF

AVIF often compresses even better than WebP and is supported by modern browsers, but some platforms and editors still handle it inconsistently. Test it if your platform accepts it; otherwise WebP is a fine choice.

SVG

SVG is different from the others because it is a vector format. Instead of storing pixels, it stores shapes as code. That makes it ideal for logos, icons, and simple illustrations, because it stays sharp at any size and is often tiny in file size. It is not suitable for photographs. Some platforms, including Blogger, do not allow SVG uploads through the normal image tool, so check what yours supports.

A simple rule of thumb: photos as WebP or JPEG, screenshots and graphics with text as WebP or PNG, logos and icons as SVG where your platform allows it.

Image Compression Without Losing Quality

Compression reduces the file size of an image. There are two kinds:

• Lossy compression removes some image data that the human eye is unlikely to notice. It produces much smaller files. JPEG and lossy WebP work this way.
• Lossless compression shrinks the file without removing any visual data. Files are larger than lossy versions, but nothing changes in the picture. PNG and lossless WebP work this way.

For most blog photos, lossy compression at a sensible quality level is the right choice. In practice, a quality setting somewhere between 70 and 85 usually looks almost identical to the original while cutting the file size dramatically. Do not trust numbers alone, though. Always zoom in and compare before and after, especially for images with faces, text, or fine details.

Resize Before You Compress

Compression is only half the problem; the other half is dimensions. A modern phone camera can take photos that are 4000 pixels wide or more. Your blog content area is probably between 600 and 900 pixels wide. Uploading a 4000-pixel photo and letting the browser shrink it means every visitor downloads far more data than they will ever see.

A good workflow looks like this:

1. Check how wide your content area is. On many Blogger themes it is around 700 to 800 pixels on desktop.
2. Resize the image to about that width, or up to twice that width if you want it to look crisp on high-resolution screens. For most blogs, somewhere between 1200 and 1600 pixels wide is a comfortable maximum.
3. Compress the resized image using your chosen format and quality.
4. Check the final size. As a rough target, try to keep most content images under 150 KB and large featured images under about 200 KB. Simple graphics can often be much smaller.

To give you a real example, the illustrations in this article started as JPEG files of around 70 to 85 KB each at 1280 pixels wide. Saved as WebP at quality 80, they dropped to roughly 28 to 36 KB, with no difference you could spot at normal viewing size.

Free Tools for Compressing Images

You do not need expensive software. A few free options that beginners find easy:

• Squoosh, a free browser-based tool from the Chrome team, lets you compare the original and compressed image side by side and convert to WebP or AVIF.
• TinyPNG / TinyJPG compresses PNG, JPEG, and WebP files with a simple drag and drop.
• Built-in editors such as Photos on Windows or Preview on Mac can resize images before you upload them.

Whichever tool you use, the habit matters more than the tool. Resize, compress, rename, and only then upload.

Lazy Loading: Load What Readers Need, When They Need It

Lazy loading means the browser delays downloading images that are further down the page until the reader scrolls close to them. If a visitor reads only the first half of your post, the images in the second half are never downloaded at all. That saves data for the visitor and frees up bandwidth so the top of the page loads faster.

Modern browsers support lazy loading natively, which means you only need to add one attribute:

<img src="lahore-food-street-at-night.webp" alt="Lahore food street at night with lit stalls" width="1280" height="720" >

That is all. No plugin or script is required. Many platforms, including WordPress, already add to images automatically.

Load the top image right away and lazy load the rest to keep LCP, INP, and CLS healthy.

The Big Lazy Loading Mistake: Do Not Lazy Load Your Main Image

Here is where many beginners go wrong. If you lazy load everything, including the large image at the top of your post, the browser waits before fetching the very image visitors see first. That can make the page feel slower, not faster, and it often hurts your Largest Contentful Paint score, which we will cover in a moment.

The safe approach is simple:

• Images visible without scrolling (your featured image or first big image) should load normally. Leave off for these. You can even add fetchpriority="high" to the main image to tell the browser it is important.
• Images further down the page should use .

For example, a featured image at the top might look like this:

<img src="image-seo-for-beginners-featured.webp" alt="Image SEO for beginners illustration" width="1280" height="720" fetchpriority="high">

And an image deep in the article would use instead.

Image SEO and Core Web Vitals

Core Web Vitals are a set of metrics Google uses to measure real-world user experience on a page. They are part of the page experience signals Google considers. They are not a magic ranking switch, and great content still matters far more, but poor scores can hold back a page that is otherwise competitive, and they definitely affect how visitors feel about your site.

There are three Core Web Vitals in 2026, and images affect all of them in some way.

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element on the screen to appear. On most blog posts, that element is an image, usually the featured image or the first large picture. Google considers an LCP of 2.5 seconds or less to be good.

Images hurt LCP when they are too heavy, lazy loaded at the top, or hosted somewhere slow. To improve LCP:

• Compress and resize your top image carefully, since it matters most.
• Do not lazy load it.
• Consider adding fetchpriority="high" to it.
• Avoid placing a huge slider or carousel at the top of every post.

Cumulative Layout Shift (CLS)

CLS measures how much the page jumps around while it loads. You have probably experienced this: you start reading, an image suddenly loads above the text, and everything shifts down. If you were about to tap a link, you might tap an ad instead. That is frustrating for readers, and it is also something AdSense reviewers and advertisers do not like to see. A CLS score of 0.1 or less is considered good.

The most common cause of image-related layout shift is missing dimensions. When an image has no width and height attributes, the browser does not know how much space to reserve, so it reserves none, and then pushes content down when the image arrives.

The fix is easy: always include width and height attributes that match the image's real proportions. Your CSS can still make the image responsive, for example by setting max-width: 100% and height: auto, and the browser will use the width and height to calculate the correct space in advance.

Interaction to Next Paint (INP)

INP replaced First Input Delay in March 2024. It measures how quickly the page responds when someone taps, clicks, or types. A good INP is 200 milliseconds or less. Images are rarely the main cause of poor INP, which is usually linked to heavy scripts. Still, bulky gallery scripts and pages crowded with full-size photos add work for the browser, especially on budget phones, so light images help the whole page stay responsive.

How to Check Your Scores

You can test any page for free:

• PageSpeed Insights shows both lab data and, when available, real-user data. It also lists specific image problems, such as "Properly size images" or "Serve images in next-gen formats."
• Google Search Console has a Core Web Vitals report that groups your pages into good, needs improvement, and poor, based on real visitor data.

When you run a test, look specifically for which element is the LCP element. If it is an image, you know exactly where to start.

Captions, Surrounding Text, and Placement

Google reads the text near an image to understand it, and readers notice captions more than almost anything else on a page. A few placement habits help:

• Place images close to the text they support. An image about compression settings belongs in the compression section, not three sections later.
• Use captions where they add value. A caption can explain what the reader should notice, such as "Notice how the WebP version is less than half the size."
• Avoid putting important text only inside images. Search engines and screen readers cannot always read text in images reliably. If a graphic contains key information, repeat it in the article.
• Use original images when you can. Your own screenshots, photos, and simple diagrams make your content more helpful and unique than stock photos that appear on hundreds of other sites.

Image SEO on Blogger: A Practical Walkthrough

Many Free Seo Lab readers use Blogger, so here is how to apply everything above there.

1. Prepare the image first. Resize it, compress it, and give it a descriptive, hyphenated file name before uploading. Blogger keeps the file name in the image URL, so this step matters.
2. Upload through the image button. In the post editor, click the Insert image icon and upload from your computer.
3. Add alt text and title. Click the image in the editor, then click the gear or properties option. You will see fields for title text and alt text. Fill in the alt text with a clear description. The title text is optional and mainly shows as a tooltip, so do not stuff keywords there either.
4. Choose a sensible size. Blogger offers size options such as small, medium, large, and original. Pick one that fits your content area instead of always choosing original size.
5. Check the HTML view. Switch to HTML view and look at your image tags. You can add to images further down the post and make sure width and height attributes are present.
6. Add captions. Blogger lets you add a caption under an image from the same image toolbar.
7. Test the published post. Run it through PageSpeed Insights on mobile and fix the biggest issues first.

If you write posts in HTML and paste them into Blogger, remember to upload your images to Blogger first, copy each image's address, and replace the image source in your HTML with that address. Otherwise, the images will not appear for your visitors.

Image SEO on WordPress and Other Platforms

On WordPress, fill in the alt text field in the media library as you upload. WordPress creates several image sizes, uses responsive markup, and adds lazy loading to most images by default. On builders like Wix or Squarespace, compression is largely automatic, so your main jobs are good alt text, descriptive file names, and avoiding oversized uploads.

A Simple Image SEO Checklist for Every Post

Before you publish your next post, run through this quick list:

1. Is every image relevant to the content around it?
2. Is each image resized to a sensible width for your layout?
3. Is each image compressed, ideally as WebP or JPEG for photos?
4. Does each file have a short, descriptive, hyphenated, lowercase name?
5. Does every meaningful image have clear, honest alt text?
6. Do decorative images have an empty alt attribute?
7. Does the top image load normally, without lazy loading?
8. Do images further down the page use ?
9. Do all images include width and height attributes?
10. Have you tested the published page with PageSpeed Insights on mobile?

One more rule sits above all of these: only use images you have the right to use. Copied images can lead to copyright complaints and can hurt your chances of AdSense approval, so stick to your own photos, screenshots, and graphics, or images whose license clearly allows reuse.

Print this list or keep it next to your editor. After five or six posts, it becomes automatic.

Frequently Asked Questions About Image SEO

Does alt text directly improve rankings?

Alt text mainly helps Google understand an image, which can help that image appear in Google Images and support the relevance of your page. It is one signal among many. Its biggest benefit is accessibility, and that alone makes it worth doing properly.

Is WebP always better than JPEG?

Not always, but usually. WebP generally produces smaller files at similar quality. Occasionally, a particular photo may compress better as JPEG. If you are unsure, export both and keep the smaller file that still looks good.

Should I lazy load every image?

No. Lazy load images below the first screen of content, but let your main top image load normally. Lazy loading the top image can make your Largest Contentful Paint worse.

Do images affect AdSense approval?

AdSense reviewers look at the overall quality of your site, including whether it is easy to use and whether the content is original and helpful. Slow pages, jumping layouts, and copied images do not make a good impression. Fast, original, well-labeled images support a professional, trustworthy site.

Final Thoughts

Image SEO is not about clever tricks. It is about respect: respect for the reader on a slow phone connection, respect for the visitor using a screen reader, and respect for the search engine trying to understand your page. When you name files clearly, write honest alt text, compress and resize images before upload, lazy load the right images, and reserve space so nothing jumps around, you are making your site better for everyone who visits it.

Start with your next post instead of fixing your whole blog in one evening. Then, once a week, open one older post, test it with PageSpeed Insights, and improve its images using the checklist above. Over a few months, those small fixes add up to a faster, friendlier blog that both readers and Google like to come back to.