Top News Articles
Leading website that aims to keep you informed with the latest news.

How to Optimize Images for SEO in WordPress

0

How to Optimize Images for SEO in WordPress

Open the average WordPress site and the single heaviest thing on the page is almost never the text, the theme, or even the scripts — it’s the images. Google says as much in its own image SEO documentation: images are often the largest contributor to overall page size. Every image you upload therefore has two jobs: load fast enough not to drag the page down, and carry enough information that Google understands what it shows.

WordPress quietly handles a surprising amount of this for you. But it doesn’t handle the part that matters most. Here’s the full workflow: what WordPress does natively, where it stops, and the six steps that close the gap.

What WordPress already does (and the one thing it doesn’t)

Modern WordPress is not the dumb image host people remember from a decade ago. Several layers of optimization are already built in — it’s worth knowing what they are, if only so you don’t install plugins that duplicate them.

Responsive images, automatically

Since WordPress 4.4, every image you insert into content or set as a featured image gets srcset and sizes attributes generated for it. The browser then picks the smallest suitable size for the visitor’s screen and resolution. A phone on a slow connection gets the 768px version; a retina desktop gets the 2048px one. You don’t configure anything — it just happens, and it’s one of the quietest performance wins in the platform.

Native lazy loading

Since WordPress 5.5, images get loading="lazy" added automatically, so off-screen images don’t download until the visitor scrolls near them. WordPress 5.9 refined this: the first image or iframe on a page is no longer lazy-loaded, because delaying the very first thing in view hurts Largest Contentful Paint. If you’re still running an old lazy-load plugin from before 2020, check whether it’s still doing anything — you may be carrying dead weight.

WebP and AVIF uploads

WordPress 5.8 added WebP support: if your host supports WebP, you can upload and use WebP images exactly like JPEGs and PNGs. WordPress 6.5 added AVIF support the same way, with WordPress’s own announcement noting AVIF files can be up to 50% smaller than JPEGs at the same image quality. Google lists BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF as the formats its image index supports.

The part WordPress doesn’t do

Here is the gap: WordPress resizes and re-encodes the intermediate sizes it generates, but it does not optimize the original file you upload. WordPress’s default JPEG quality of 82% applies only to the thumbnail, medium, and large versions it creates — your original file is stored exactly as you uploaded it, full weight, full metadata. Compression, metadata stripping, and converting your originals to modern formats is a plugin’s job, which is where step four below comes in.

The 6-step image SEO workflow

Step 1: Pick the right format before you upload

Most format decisions are simple. JPEG for photographs and anything with complex color. PNG when you need transparency or pixel-crisp screenshots and line art. WebP as your modern default — Google notes WebP images are around 30% smaller than JPEG on average, and every current browser supports it. AVIF when you want maximum savings, though browser and tooling support is newer. Don’t overthink it: converting photos to WebP covers most sites.

Step 2: Resize before you upload

WordPress generates a ladder of sizes automatically — thumbnail, medium, medium-large, large, plus 1536px and 2048px versions — and anything bigger than 2560px on the longest side gets scaled down. But the original stays at whatever resolution your camera or screenshot tool produced. Uploading a 6000px-wide phone photo for an image that will display at 800px wastes storage and inflates every backup. Resize to the largest size you’ll actually display — roughly 1600–2000px wide for full-width images — before the file ever touches the media library.

Step 3: Name the file descriptively

Google’s image SEO guide says short, descriptive filenames give it “very light clues” about an image’s subject — its own example contrasts my-new-black-kitten.jpg with IMG00023.JPG, and warns against image1.jpg or pic.gif. Rename on your computer before uploading, using lowercase and hyphens — and make it a before-upload habit, since renaming files already in the media library means a plugin or re-upload.

Step 4: Compress with an optimization plugin

This is the step WordPress can’t do for you. A dedicated image plugin compresses the originals, strips unnecessary metadata, and converts formats — ideally on upload going forward, plus a one-time bulk pass over your existing media library. The established free options on WordPress.org are Smush (by WPMU DEV), ShortPixel (which processes images through its cloud service), Imagify (from the WP Rocket team), and EWWW Image Optimizer (which optimizes locally on your own server). Pick one, run its bulk optimizer once, and turn on optimize-on-upload so the problem doesn’t quietly rebuild itself.

Step 5: Write real alt text

Google calls alt text “the most important attribute” of an image — it feeds its understanding of the image alongside computer vision and page content. Good alt text is short, specific, and written as if describing the image to someone who can’t see it: alt="Dalmatian puppy playing fetch", per Google’s own example. WebAIM’s guidance adds the details people get wrong: every image needs an alt attribute, even if it’s empty; don’t write “image of…” (screen readers already announce it); purely decorative images should get alt="", and images inside links must never have missing or empty alt.

And never keyword-stuff alt text — Google explicitly flags it as a spam risk. One practical safety net: Rank Math’s Image SEO settings include “Add Missing ALT Attributes,” which fills in missing alt text at runtime using the %filename% variable by default. That is a fallback, not a strategy — it only covers images inside post content, and alt text derived from a filename still loses to alt text written by a human who looked at the image.

Step 6: Include images in your sitemap

Google recommends an image sitemap for URLs it might not otherwise discover — and notes it can even list image URLs hosted on other domains, such as your CDN, as long as you’ve verified that domain in Search Console. Rank Math has a setting to include images in its sitemaps. For the sitemap setup itself, see our guide on submitting your sitemap to Google. (And if you’re backing up before a big media-library overhaul, our WordPress backup walkthrough keeps that painless — smaller images mean smaller backups.)

Measure the difference

Optimization without measurement is just ritual. These three checks close the loop.

Run PageSpeed Insights before and after

Test a representative page, run your compression and format changes, then test again. Google’s own documentation points to PageSpeed Insights as the tool for this. Pay attention to which images it flags — it will name specific files and the savings each one offers. If your host or CDN offers edge optimization, consider it: Jetpack’s free Site Accelerator serves your images from WordPress.com’s global CDN and delivers WebP automatically to browsers that support it, and Cloudflare’s Polish feature (Pro plans and above) compresses images at the edge with one toggle.

Watch Google Images in Search Console

In Search Console’s performance report you can filter by search type: Image. That tells you whether your images are actually earning impressions and clicks from image search — the second payoff of this whole exercise. Also check that your image sitemap’s URLs are being discovered in the sitemaps report. New or newly optimized images can take days to weeks to show up; that lag is normal.

Don’t lazy-load the hero image

Google’s lazy-loading guidance is clear: don’t lazy-load content that’s likely to be visible immediately, because it delays rendering noticeably. WordPress already exempts the first image on a page, but themes and page builders can override that behavior. If your largest above-the-fold image is lazy-loaded, exclude it — most lazy-load settings let you exclude by filename or CSS class. Then verify with Search Console’s URL Inspection tool: if the image URLs appear in the rendered src attribute, your setup is working.

FAQ

Should I convert all my images to WebP?

For photographs and web graphics, yes — WebP is roughly 30% smaller than JPEG at comparable quality and is supported in all modern browsers. Keep PNG where you need transparency or razor-sharp diagrams. For maximum compatibility, Google recommends the <picture> element pattern, which serves modern formats to browsers that support them and falls back gracefully for the rest.

Do I need an image optimizer plugin if I have Rank Math?

Yes — they do different jobs. Rank Math handles the metadata side of image SEO: alt text injection, title attributes, and including images in your sitemap. It does not compress files, convert formats, or strip metadata from your originals. Use both: the optimizer for file weight, Rank Math for discoverability.

How do I add alt text in WordPress?

Click any image in the media library, find the “Alternative Text” field in the attachment details panel, and describe the image in a few words. You can also edit alt text directly on an image block in the editor. Rank Math’s “Add Missing ALT Attributes” setting works as a site-wide safety net, filling gaps at runtime — but treat it as a backup for images you missed, not a replacement for writing alt text yourself.

Why don’t my images appear in Google Images?

Work through the checklist: the page must be indexed, the image URL must be crawlable (Google does not index CSS background images — use standard <img> elements), the filename and alt text should describe the image, the image should be in your sitemap, and the image should sit near relevant text on the page. Then wait — discovery and indexing take time, especially for newer sites.

Does lazy loading hurt image SEO?

Only when done badly. Browser-native lazy loading (loading=”lazy”, which WordPress adds automatically) is explicitly recommended by Google’s documentation. Problems come from setups that hide images behind scroll or click interactions — Googlebot doesn’t scroll or click, so content that requires interaction may never be seen. Keep lazy loading to below-the-fold images, and confirm the rendered HTML shows real image URLs with URL Inspection.

The bottom line

The complete routine fits in one checklist: right format, sensible dimensions before upload, descriptive filename, a compression plugin for the originals, human-written alt text, and images in your sitemap — then measure with PageSpeed Insights and Search Console. WordPress handles the plumbing; the judgment calls are yours. They pay off twice: faster pages and a shot at Google Images traffic your unoptimized competitors are leaving on the table.

Leave A Reply

Your email address will not be published.