How to Optimize Images for SEO and Faster Page Speed

To optimize images for SEO and page speed, serve them in modern formats (WebP or AVIF), compress them so file sizes stay under about 100KB, size them to the exact dimensions they display at, add descriptive alt text and keyword-rich file names, and lazy-load anything below the fold. Do those five things and you fix the single biggest cause of slow pages while making your images findable in Google Images. The rest of this guide walks through each step, plus the technical bits that separate a fast site from a bloated one.

Why image optimization is the fastest page speed win you have

Images are usually the heaviest thing on a web page. On most sites I audit, images account for more total bytes than HTML, CSS, and JavaScript combined. That matters because Google uses Core Web Vitals as a ranking signal, and your Largest Contentful Paint (LCP) score, the biggest metric of the three, is almost always a hero image or banner. Fix your images and you often move LCP from "poor" to "good" without touching a line of code.

There are two payoffs here. First, speed: smaller, properly served images load faster, which improves user experience and Core Web Vitals. Second, discovery: Google Images drives real traffic, especially for product, recipe, and how-to sites, and optimized images can win image packs in the SERP. You get both from the same work.

Choose the right image format

Format is the first decision and it has the biggest impact on file size. Here is the short version of what to use and when.

Rule of thumb: convert JPEG and PNG photos to WebP or AVIF. Keep logos and icons as SVG. Never save a photograph as PNG unless you genuinely need transparency, because you will pay for it in file size.

Compress every image before it goes live

Compression is where the real weight comes off. You can cut a 2MB photo to under 150KB with almost no visible quality loss. There is a point of diminishing returns, so aim for these targets:

• Hero and banner images: under 200KB
• Content and blog images: under 100KB
• Thumbnails and icons: under 30KB

Use a quality setting around 75 to 85 for JPEG and WebP. Below 70 you start seeing artifacts. Tools like Squoosh (free, browser based), ShortPixel, TinyPNG, or ImageOptim handle this well. If you run WordPress, plugins like ShortPixel, Imagify, or Smush compress and convert to WebP automatically on upload, which means you stop thinking about it.

Strip metadata you do not need

Camera photos carry EXIF data: GPS location, camera model, timestamps. It adds weight and does nothing for the web. Most compression tools strip it automatically. Confirm yours does.

Size images to their actual display dimensions

This is the mistake I see most. Someone uploads a 4000px wide photo straight from their phone and displays it in a 600px column. The browser downloads all 4000 pixels and throws most of them away. You just wasted bandwidth and slowed the page.

Resize images to roughly the size they display at, then account for high-density (Retina) screens by serving up to 2x that width. So a 600px display slot needs an image around 1200px wide, no more.

Use responsive images with srcset

Serve different image sizes to different devices so phones do not download desktop-sized files. The srcset and sizes attributes handle this:

• srcset lists multiple versions of the image at different widths
• sizes tells the browser how wide the image will display at each breakpoint
• The browser picks the smallest file that still looks sharp

Most modern CMS platforms and page builders generate responsive image sets automatically. WordPress does it out of the box. If you are hand-coding, do not skip this.

Write alt text and file names that help SEO

This is the part that earns rankings in Google Images and helps your on-page relevance. Two things matter: the file name and the alt attribute.

File names

Rename files before uploading. IMG_4823.jpg tells Google nothing. blue-running-shoes-side-view.jpg tells it exactly what the image shows. Use hyphens between words, keep it lowercase, and describe the image honestly with a keyword where it fits naturally.

Alt text

Alt text describes the image for screen readers and for Google when the image cannot load. Good alt text is a plain, specific description of what is in the image. Write for a human first.

• Do: "alt='woman lacing up blue trail running shoes on a wooden porch'"
• Do not: "alt='running shoes buy running shoes best running shoes cheap shoes'"
• Skip alt text (use empty alt="") only for purely decorative images like background flourishes

Include your target keyword in alt text when it genuinely describes the image, but never stuff it. The same discipline that makes good title tags and meta descriptions that get clicks applies here: be descriptive and specific, not spammy.

Lazy-load images below the fold

Lazy loading defers loading of images until the user scrolls near them. That means the browser only downloads what is visible on first paint, which speeds up initial load dramatically on long pages.

Add loading="lazy" to images below the fold. But there is one critical exception: never lazy-load your LCP image (the big hero at the top). Lazy-loading it delays the exact thing Google measures and hurts your score. For the hero image, use loading="eager" and consider a fetchpriority="high" attribute so the browser grabs it first.

Set width and height to stop layout shift

Cumulative Layout Shift (CLS) is the Core Web Vital that punishes pages where content jumps around as images load. The fix is simple: always specify width and height attributes (or a CSS aspect-ratio) on every image. This reserves the space so text does not jump when the image arrives. Missing dimensions is one of the most common CLS causes I find during audits.

Serve images from a CDN

A content delivery network stores copies of your images on servers around the world and serves each visitor from the closest one. This cuts latency, especially for a global audience. Many CDNs (Cloudflare, BunnyCDN, Cloudinary, ImageKit) also do on-the-fly compression, format conversion, and resizing, so you get modern formats served automatically without re-uploading anything. If you are on shared hosting with a global audience, a CDN is one of the biggest single speed upgrades available.

The image optimization checklist

Run every image through this before it goes live:

1. Format: WebP or AVIF for photos, SVG for logos and icons
2. Compressed: content images under 100KB, quality 75 to 85
3. Sized right: no wider than 2x its display width
4. Responsive: srcset provides mobile and desktop versions
5. File name: descriptive, hyphenated, lowercase, keyword where natural
6. Alt text: specific human description, keyword only if it fits
7. Dimensions set: width and height attributes to prevent layout shift
8. Lazy loaded: below-fold images get loading="lazy", hero does not
9. CDN: served from a fast, global edge network
10. EXIF stripped: no leftover camera metadata

Add image structured data where it applies

For products, recipes, and articles, image structured data helps Google understand and display your images in rich results. Product schema pulls images into shopping listings; recipe schema surfaces images in the recipe carousel. You do not need a developer for most of this. See our guide on how to add schema markup without coding to set it up, and make sure the image URLs in your markup point to the high-resolution versions.

Measure the impact

Do not guess whether your changes worked. Test before and after with PageSpeed Insights and the Core Web Vitals report in Google Search Console. Look specifically at LCP and CLS: those are the two most likely to move when you optimize images. Image work is one piece of a bigger speed puzzle, so pair it with the rest of the fixes in our guide to improve Core Web Vitals on a WordPress site and the broader technical SEO checklist of fixes that move rankings.

Once your pages are faster, track whether it translates into better positions. A tool like RankLoco lets you monitor rankings and run site audits that flag oversized images, missing alt text, and slow pages so you can catch regressions before they cost you traffic. For more hands-on guides, browse the RankLoco blog.

Frequently Asked Questions

Does image alt text actually help SEO rankings?

Yes, in two ways. Alt text helps you rank in Google Images, which drives real traffic for visual searches, and it adds relevant context that helps Google understand the page. It is also an accessibility requirement. Write it as an honest description of the image, and include your keyword only when it fits naturally.

What is the best image format for website speed in 2026?

WebP is the safest default because it is 25 to 35 percent smaller than JPEG and supported in every modern browser. AVIF produces even smaller files with better quality and is worth using with a JPEG or WebP fallback. Use SVG for logos and icons since it is a tiny vector format that scales without quality loss.

How much should I compress images without losing quality?

A quality setting of 75 to 85 for JPEG and WebP removes most of the file weight with no visible loss. Below 70 you start seeing blockiness and artifacts. Aim for content images under 100KB and hero images under 200KB. Always compare the compressed version to the original before publishing.

Should I lazy-load all images on my page?

No. Lazy-load images below the fold with loading="lazy" to speed up initial load, but never lazy-load your hero or largest above-the-fold image. That image is usually your Largest Contentful Paint element, and delaying it hurts your Core Web Vitals score. Load the hero eagerly, ideally with fetchpriority high.

Why do my images cause layout shift?

Layout shift happens when the browser does not know an image's dimensions until it loads, so surrounding content jumps when it appears. Fix it by adding explicit width and height attributes (or a CSS aspect-ratio) to every image. This reserves the space in advance and keeps your Cumulative Layout Shift score low.

Do I need a CDN for image optimization?

Not strictly, but it helps a lot, especially with a global audience or a slow host. A CDN serves images from a server near each visitor, cutting load time, and many CDNs auto-convert to WebP or AVIF and resize on the fly. If your traffic is hyper-local and your host is fast, you can skip it and focus on format and compression.