Image SEO & Alt Text Template

Free editable Image SEO & Alt Text Template. Copy, personalize, or download the Word .docx template from UNmiss.

Images often make up the bulk of a page's weight and are a key part of accessibility and visual search. This template walks you through writing accessible alt text, naming and compressing files, serving modern formats responsively, and adding the markup that helps search engines understand and surface your images. Copy the section you need, swap in your details, and apply it page by page.

6 ready-to-use variants

Descriptive File Names

Rename image files before upload so they describe the subject and help image search.

Name files before you upload

Search engines read the file name as one signal of what an image shows, and a clear name is easier to manage in your media library. Replace camera defaults like [IMG_4827.jpg] with a short, human-readable description.

  • Describe the subject: [red-leather-office-chair.jpg], not a random string.
  • Use hyphens between words; avoid spaces, underscores, and special characters.
  • Keep it lowercase for consistency across servers.
  • Stay concise: a few meaningful words beat a long keyword chain.

Do not stuff keywords or repeat the same phrase across every file. Name each image for what it actually depicts so the name stays accurate and useful.

Quick check: Could someone guess the image from the file name alone? If yes, you are done. For a batch of similar shots, add a distinguishing detail such as color, angle, or model: [product-name-front-view.jpg] and [product-name-side-view.jpg].

Alt Text (accessibility-first)

Write alt attributes that describe images for screen-reader users and search engines.

Write alt text for people first

Alt text exists primarily for accessibility: it is read aloud by screen readers and shown when an image fails to load. Describe what the image conveys in plain language, as if explaining it to someone who cannot see it.

  • Be specific and concise: [a barista pouring latte art into a white cup], roughly one short sentence.
  • Convey purpose: describe why the image is there, not just its visual details.
  • Skip filler: do not start with [image of] or [photo of]; the technology already announces it as an image.
  • Do not keyword-stuff: one natural mention of a relevant term is fine; a list of keywords harms accessibility.

For purely decorative images that add no information, use an empty alt ([alt=""]) so screen readers skip them. If the image is also a link, the alt text should describe the link's destination or action.

Tip: If a caption already fully describes the image, keep the alt brief to avoid repeating the same words twice.

Compression & Modern Formats (WebP/AVIF)

Shrink file size and switch to modern formats to improve load time and LCP.

Compress and modernize every image

Large images slow pages and can hurt your Largest Contentful Paint. Reduce file size before upload and serve modern formats that compress far better than older ones at similar quality.

  • Choose the right format: AVIF or WebP for photos and most graphics; SVG for logos and simple icons; keep PNG only when you need transparency or sharp text.
  • Resize to display size: do not ship a [4000px] file into a [800px] slot.
  • Compress sensibly: aim for the smallest file that still looks clean; test a couple of quality levels and compare.
  • Provide fallbacks: use the picture element to offer AVIF or WebP with a JPEG fallback for older browsers.

Workflow: export at the correct dimensions, run the file through a compression tool, then confirm it looks sharp on a high-resolution screen. For the hero or main image, prioritize loading it quickly since it is often the LCP element on the page.

Responsive Images & Lazy Loading

Serve the right size per device and defer offscreen images to speed up loading.

Right-size and defer images

Responsive markup lets the browser pick the best file for each screen, while lazy loading delays images the visitor has not scrolled to yet. Together they cut wasted bytes and speed up the initial render.

  • Use srcset and sizes: provide several widths so phones download small files and large screens get sharp ones.
  • Set width and height: add explicit dimensions (or aspect-ratio) to reserve space and prevent layout shift.
  • Lazy-load below the fold: add [loading="lazy"] to images that start offscreen.
  • Do NOT lazy-load the LCP image: the hero or main above-the-fold image should load eagerly; mark it high priority instead.

Why it matters: deferring offscreen images frees bandwidth for what is visible first. Reserving space with set dimensions keeps content from jumping as images arrive, which protects your Cumulative Layout Shift and the reading experience.

Captions, Surrounding Context & Image Sitemaps

Strengthen image relevance with on-page context and help crawlers discover images.

Add context and aid discovery

Search engines read the text around an image, the caption, and the page title to understand it. Strong context plus an image sitemap make your visuals easier to interpret and find.

  • Add captions when helpful: captions are read more often than body copy, so use them for figures, charts, and product shots.
  • Place images near relevant text: position each image beside the paragraph it illustrates.
  • Use the figure element: wrap an image and its figcaption together for clear, semantic structure.
  • List images in a sitemap: include image entries (or a dedicated image sitemap) so crawlers can discover graphics loaded by scripts or galleries.

Apply it: for the image at [page URL], write a caption that adds information rather than repeating the alt text, and make sure the nearby heading and copy mention the same subject. Then confirm the file appears in your XML sitemap.

Image Structured Data & Licensing

Mark up images so they can appear with rich results and clear licensing.

Mark up and license your images

Structured data tells search engines about an image's role and ownership, which can unlock richer image results and a licensable badge. Add it where image rights or context matter, such as product, recipe, or article pages.

  • Use the right schema: reference high-resolution image URLs in your Product, Recipe, Article, or ImageObject markup.
  • Provide large, crawlable images: structured data should point to images that are not blocked and meet minimum size guidelines.
  • Add licensing metadata: include [license] and [acquireLicensePage] on ImageObject so usage terms are clear.
  • Keep metadata honest: credit ([creator]) and copyright fields should match the page and the image's actual rights.

Validate before launch: test your markup with a structured-data validator, fix any errors, and confirm the referenced image loads. Accurate licensing fields help your work surface correctly and protect how it is reused.

How to use this template

  1. Audit your page's images and list each one's purpose: content image, decorative, logo/icon, or link.
  2. Rename files to short, hyphenated, lowercase descriptions of the subject before uploading.
  3. Write accessible alt text for content images, and set empty alt="" on purely decorative ones.
  4. Resize each image to the dimensions it displays at, then compress and export to WebP or AVIF with a fallback.
  5. Add srcset and sizes for responsive delivery, and set explicit width and height to prevent layout shift.
  6. Lazy-load below-the-fold images with loading="lazy", but load the hero/LCP image eagerly at high priority.
  7. Add captions and place images beside relevant text; wrap figures with figure and figcaption where useful.
  8. List images in your sitemap and add structured data (with licensing fields) where rich results apply, then validate.

Pro tips

  • Alt text is for accessibility first: describe the image naturally and never keyword-stuff it.
  • Decorative images that add no meaning should use empty alt="" so screen readers skip them.
  • Never lazy-load your LCP image; lazy loading is for content the visitor has not scrolled to yet.
  • Always set width and height (or aspect-ratio) so images reserve space and avoid layout shift.

Frequently asked questions

What makes good alt text?

Good alt text concisely describes what the image shows and why it is on the page, in plain language a screen reader can announce. Keep it to about a sentence, skip phrases like "image of," and mention a relevant term only if it fits naturally. The goal is accessibility, not keyword density.

When should I use empty alt text (alt="")?

Use an empty alt attribute for purely decorative images that add no information, such as background flourishes, spacers, or icons next to text that already says the same thing. The empty alt tells screen readers to skip the image. Reserve descriptive alt text for images that carry meaning.

Which image format should I use for speed?

For most photos and graphics, AVIF or WebP give the smallest files at good quality, so they are best for page speed. Use SVG for logos and simple icons, and keep PNG mainly for transparency or crisp text. Serve a JPEG fallback via the picture element for older browsers.

Should I lazy-load all my images?

No. Lazy-load images that start below the fold so the browser does not download them until needed. Do not lazy-load the hero or main above-the-fold image, because it is usually your LCP element and delaying it slows perceived load time. Load that one eagerly and at high priority.

Do descriptive file names actually help SEO?

They help search engines and image search understand what a file depicts, and they make your media library easier to manage. Use short, hyphenated, lowercase names that describe the subject. They are one supporting signal among many, so pair them with strong alt text and surrounding context rather than relying on file names alone.

How do search engines find my images?

Crawlers discover images by following your HTML, reading surrounding text and captions, and parsing your sitemap. Listing images in an XML sitemap (or a dedicated image sitemap) helps surface visuals loaded by scripts or galleries. Make sure images are not blocked by robots rules and are placed near relevant on-page content.