How to Optimize Images for SEO: Complete Guide

Images account for more than half the weight of a typical web page. That makes them the biggest optimization target for performance — and performance is a confirmed Google ranking factor. But optimizing images for SEO goes beyond just reducing file size: it involves file names, alt text, format, dimensions and smart loading.

This guide covers each of those points practically.

The 5 pillars of image SEO File name descriptive, with hyphens Alt text describe the content File size < 200 KB when possible Format WEBP first, JPG fallback Lazy load defer below the fold Each pillar contributes to Core Web Vitals and Image Search visibility.
The five factors Google evaluates when indexing your images.

Why images affect SEO

Google has considered page load speed as a ranking factor since 2010 for desktop and since 2018 for mobile. In 2021, Core Web Vitals made this metric even more central: LCP (Largest Contentful Paint) measures how long it takes for the largest visible element on a page to load — and on most pages, that element is an image.

Beyond direct performance, well-optimized images appear in Google Image Search, generating additional traffic. Pages with relevant, correctly described images also tend to have better click-through rates when Google displays visual snippets in search results.

File name: the first overlooked opportunity

Google reads the file name as a signal of the image's content. A file called IMG_4823.jpg conveys no information. But online-image-compressor-free.jpg tells exactly what the image is.

Best practices for naming files:

  • Use descriptive words separated by hyphens (not underscores)
  • Include the page's primary keyword when relevant
  • Be specific: white-running-shoes-side-view.jpg is better than shoes.jpg
  • Avoid generic names like image1.jpg, banner.png, photo.jpg

Alt text: required, not optional

The alt attribute exists to describe the image to users who can't see it — people with visual impairments using screen readers, and also Google's crawler, which still doesn't "see" images with the same precision as humans.

Good alt text:

  • Describes what's in the image objectively
  • Includes the keyword when it naturally fits the description
  • Doesn't start with "Image of" or "Photo of" — Google already knows it's an image
  • Is between 5 and 15 words in most cases

Bad example: alt="image"
Good example: alt="free online image compressor reducing a 5 MB JPG to 800 KB"

Decorative images (icons, dividers, backgrounds) should have alt="" — empty alt — so screen readers skip them.

File size: the most direct impact

A 3 MB image on a page that should load in 2 seconds can alone push that time to 8 seconds on a typical mobile connection. Google PageSpeed Insights flags unoptimized images as one of its most common recommendations.

Practical weight targets by use type:

  • Article featured image: under 150 KB
  • Product photo in online store: under 200 KB
  • Thumbnail/preview: under 50 KB
  • Homepage hero banner: under 300 KB
  • Icons and SVG logos: under 10 KB (use SVG whenever possible)

To compress images before uploading to your site, use TinyFoto — processes JPG, PNG and WEBP in the browser, no upload needed.

TinyFoto browser compressor reducing several JPG images from megabytes to kilobytes in a single batch
📷 Screenshot pending — see HTML comment above for capture instructions.
TinyFoto compresses entire batches in the browser — files never leave your device.

Best format for SEO: JPG, PNG or WEBP?

Google PageSpeed Insights explicitly recommends serving images in "next-gen formats" like WEBP and AVIF. The reason is simple: smaller files load faster.

  • WEBP is the best choice for the web: 25–35% smaller than JPG at equivalent quality, supports transparency, supported by all modern browsers.
  • JPG is the safe choice when you don't control the environment (email, downloads, printing).
  • PNG only when necessary: logos with transparency, screenshots with text, images requiring absolute sharpness.
  • SVG for icons, logos and vector illustrations — scales without quality loss and is generally much smaller than any raster image.

To convert JPG or PNG to WEBP, use TinyFoto's WEBP converter.

Same image, three formats Approximate file weights for a 1600×1066 photo at visual quality 85 PNG 1200 KB slowest use only for transparency JPG 480 KB safe universal fallback WEBP 320 KB best for the web
WEBP is typically 25–35% lighter than JPG and up to 4× lighter than PNG.

Dimensions: don't upload larger than needed

Uploading a 4000×3000 pixel photo to display in an 800×600 block is pure waste. The browser downloads all 4000px and resizes it for display — the user sees no difference, but paid for the extra bandwidth.

Resize the image to the maximum width it will occupy on the page, plus at most 2× for Retina/HiDPI screens. An image that takes up 800px width on standard screens can be 1600px for high-density screens — no more.

Lazy loading: only load what's visible

The loading="lazy" attribute tells the browser to defer loading off-screen images until the user scrolls to them. This reduces the initial page weight and improves LCP.

<img src="photo.webp" alt="description" loading="lazy" width="800" height="600">

Don't apply loading="lazy" to the main image above the fold (the first visible image without scrolling) — this hurts LCP. Reserve it for secondary and mid/bottom-of-page images.

When to use loading="lazy" Hero image (above the fold) loading="eager" — counts for LCP DO NOT mark as lazy fold Content image — loading="lazy" Footer image — loading="lazy" ✓ load now ⏳ load on scroll visible instantly saves bandwidth
Eager-load the hero (LCP element), lazy-load everything below it.

Always define width and height in HTML

Including width and height attributes in the <img> tag lets the browser reserve the correct space before downloading the image, preventing CLS (Cumulative Layout Shift) — another Core Web Vital. Pages with high CLS lose score even if they load quickly.

Image SEO checklist

  • Descriptive file name with hyphens and relevant keyword
  • alt attribute filled in for all content images
  • WEBP format for site use; JPG/PNG as fallback
  • Under 200 KB for most images
  • Dimensions adjusted to actual display size (not larger)
  • loading="lazy" on below-the-fold images
  • width and height defined on all <img> tags
  • Images indexable (not blocked by robots.txt)

Optimize images now →