Image SEO in 2026: How to Optimize Images for Google (Without Slowing Your Site Down)

Images are the part of a website everybody obsesses over visually and nobody thinks about technically. You pick a nice photo, drag it in, done. Meanwhile that photo is 4.2 MB straight off an iPhone, it is named IMG_4471.HEIC, it has no alt text, and it is pushing your page load past three seconds on a phone.

Image SEO is the practice of making pictures work *for* your rankings instead of against them. It splits into two jobs: helping search engines understand what an image shows, and keeping images from wrecking your page speed. Get both right and you pick up traffic from Google Images, better Core Web Vitals, and a more accessible site — usually in an afternoon.

Here is the whole thing, in order.

Why image SEO actually mattersCopy linkShare link

Three reasons, and none of them are theoretical.

Google Images is a real traffic source. Recipes, products, tools, before-and-after work, local storefronts — a huge slice of visual searches never touch a blue link. If your images are indexable and clearly labeled, you get found in a lane most small sites completely ignore.

Images are usually the heaviest thing on the page. On a typical small business site, images are 60–80% of total page weight. That means they are the single biggest lever you have on load time, and load time feeds directly into Core Web Vitals — specifically Largest Contentful Paint, which is almost always an image.

Accessibility and SEO overlap here. Alt text is how a screen reader describes your picture. It is also how a crawler understands it. One piece of work, two payoffs.

Step 1: Name the file like a humanCopy linkShare link

Cameras name files IMG_4471.JPG. Screenshot tools name them Screenshot_2948.png. Neither tells Google anything.

Rename before you upload. Describe the subject in a few lowercase words, separated by hyphens:

• Bad: IMG_4471.jpg
• Bad: photo1-final-FINAL-v2.jpg
• Good: phoenix-bathroom-remodel-tile.jpg
• Good: red-qr-code-generator-screenshot.jpg

Use hyphens, not underscores — Google treats hyphens as word separators and underscores as glue. Skip keyword stuffing (seo-seo-services-phoenix-seo-best-seo.jpg looks exactly as spammy as it reads). One honest description is enough.

Step 2: Write alt text that describes, not sellsCopy linkShare link

Alt text is the alt="..." attribute on an image. It should describe what is in the picture to someone who cannot see it.

Rules that keep you out of trouble:

• Be specific. "Woman holding a red spiderweb-patterned tablet" beats "image" or "photo1."
• Keep it short. Roughly 5–15 words. Screen readers read the whole thing aloud.
• Do not start with "image of" or "picture of." The screen reader already announced it is an image.
• Include a keyword only if it honestly describes the picture. Forced keywords are the number one alt text mistake.
• Decorative images get empty alt text (alt=""), so screen readers skip them. Dividers, background swirls, spacer graphics.
• Images that are links need alt text describing the destination, not the picture.

If a photo carries information — a chart, a screenshot, a price list — put the important part in the surrounding text too. Never trap facts inside a picture where only sighted visitors can reach them.

Step 3: Compress before you uploadCopy linkShare link

This is where most sites lose the most and fix it the fastest.

A photo straight off a phone can be 3–5 MB. The same photo, resized to the width it actually displays at and saved with sensible compression, is often 80–250 KB. Visitors cannot tell the difference. Your load time can drop by seconds.

Two things to do, in this order:

1. Resize to real display dimensions. If your blog content column is 800 pixels wide, a 4032-pixel-wide photo is 5x more data than anyone sees. Export at roughly 1.5–2x the display width for retina screens, then stop. Hero banners: 1600–1920 px wide is plenty. 2. Compress. Aim for under 200 KB for content images and under 400 KB for full-width heroes.

If your source photos came off an iPhone, they are probably HEIC, which many upload forms reject outright. Run them through the free HEIC to JPG converter first — it resizes and converts in your browser. For product shots and cutouts, the Background Remover gives you a clean transparent PNG that compresses far better than a busy photo background.

Step 4: Pick the right formatCopy linkShare link

You do not need a computer science degree here. Four formats cover everything:

• WebP — the default choice in 2026. Roughly 25–35% smaller than JPG at the same visual quality, supported by every modern browser. Use it for photos and graphics alike.
• JPG — the safe universal fallback for photographs. Still perfectly fine.
• PNG — only when you need transparency or crisp flat graphics (logos, icons, screenshots with text). PNG photos are enormous; avoid.
• SVG — logos, icons, and simple illustrations. Infinitely scalable, tiny file size, sharp on every screen.

Avoid: BMP, TIFF, and giant uncompressed PNGs. Avoid HEIC on the web entirely — convert it first.

Step 5: Set width and height on every imageCopy linkShare link

This is the fix nobody talks about and everybody needs.

When an image has no declared width and height, the browser does not know how much room to save for it. Text renders, then the image loads and shoves everything down the page. That shove is Cumulative Layout Shift, one of the three Core Web Vitals, and it is the single most annoying thing a mobile visitor can experience.

Setting the attributes lets the browser reserve the exact space in advance. CSS still controls the visual size — the attributes just supply the aspect ratio. It costs you nothing and it fixes CLS on most sites outright.

Step 6: Lazy load below-the-fold images — and only thoseCopy linkShare link

loading="lazy" tells the browser to skip downloading an image until the visitor scrolls near it. On a long page with 20 photos, that is a huge win.

The trap: do not lazy load your hero image or anything visible without scrolling. That image is almost certainly your Largest Contentful Paint element, and lazy loading it delays the exact thing Google is timing. Load the top of the page eagerly, lazy load everything under it.

Step 7: Give Google context around the imageCopy linkShare link

An image never gets judged alone. Search engines read the neighborhood:

• The caption directly beneath it (people actually read captions — they are high-value real estate)
• The paragraph immediately before and after
• The heading of the section it sits in
• The page title and URL

So place images next to the text they illustrate, not clustered in a gallery at the bottom. A screenshot of a report belongs beside the paragraph explaining that report.

Step 8: Make images crawlable and indexableCopy linkShare link

None of the above matters if Google cannot fetch the file.

• Do not block your image folder or CDN path in robots.txt. Check yours with the robots.txt generator if you are unsure what your file says.
• Serve images from a URL that actually loads for a logged-out visitor. Images behind a login never get indexed.
• Include images in your sitemap, or use an image sitemap, so Google can discover the ones that are not linked prominently. If sitemaps are fuzzy, the sitemap guide covers it start to finish.
• Avoid loading critical images purely through JavaScript that runs after the page renders. If the crawler's first look at the HTML has no image tag, you are gambling.

Step 9: Add structured data where it fitsCopy linkShare link

Product, Recipe, Article, and How-to schema all accept an image property, and Google leans on it for rich results and image thumbnails in search. Feed it a high-resolution image URL, ideally 1200 px or wider, with a 1:1, 4:3, or 16:9 aspect ratio. The schema markup guide walks through which type applies to your pages.

The seven mistakes that cost the most trafficCopy linkShare link

1. Uploading full-resolution phone photos with no resizing 2. Leaving alt text empty on informative images 3. Keyword-stuffing alt text and file names 4. Using PNG for photographs 5. Lazy loading the hero image 6. Omitting width and height, causing layout shift 7. Reusing the same stock photo everyone else on page one is using

That last one is not a technical penalty — it is a trust problem. Original photos of your actual work, your actual team, and your actual storefront outperform stock imagery on engagement almost every time, and they help with the originality signals that matter for AdSense approval too.

Your image SEO checklistCopy linkShare link

Before you publish any page:

• File renamed to describe the subject, hyphens, lowercase
• Resized to the width it actually displays at
• Compressed under ~200 KB (heroes under ~400 KB)
• Saved as WebP, with JPG fallback if needed
• Alt text written: specific, short, honest
• Width and height attributes set
• Lazy loading on everything below the fold, off for the hero
• Caption or nearby text giving context
• Not blocked in robots.txt, included in the sitemap

Nine boxes. Ten minutes per page once you have the habit.

Where to go from hereCopy linkShare link

Image work is one of the highest-return, lowest-risk SEO tasks there is. Nothing about it can get you penalized, and the speed gains show up immediately.

Run your page through the free SEO checker to see whether images are dragging your speed score down, then work the rest of the SEO checklist. If mobile is where your traffic lives, the mobile SEO guide pairs well with this one.