Image SEO in Next.js: next/image, Alt Text, AVIF and LCP

How to handle images in Next.js for search, speed and AI understanding: the Image component, AVIF and WebP, the LCP image, alt text, file names, Open Graph images and structured data.

Ashruba Pankhade Published 4 min read

Image SEO in Next.js comes down to four things: use the Image component so images are resized, served in modern formats and lazy-loaded, give every meaningful image descriptive alt text and a sensible file name, load the main above-the-fold image early because it is often the Largest Contentful Paint element, and keep important information in text rather than only inside images. Done well, images help Google Images traffic, Core Web Vitals and how AI systems understand the page.

1. Use the Image component

import Image from "next/image";

<Image
  src="/images/products/steel-flange-wnrf.jpg"
  alt="Stainless steel weld neck flange, raised face, 4 inch, Class 150"
  width={1200}
  height={800}
  sizes="(max-width: 768px) 100vw, 50vw"
/>

The component generates several sizes, serves the right one for each screen, lazy-loads images below the fold and reserves space with width and height so the layout does not shift. The sizes attribute tells the browser how wide the image will be, so it downloads the right file; without it, images using fill can download far larger files than needed.

2. Serve AVIF and WebP

// next.config.js
module.exports = {
  images: {
    formats: ["image/avif", "image/webp"],
    remotePatterns: [{ protocol: "https", hostname: "cms.example.com" }],
  },
};

AVIF files are usually smaller than WebP at similar quality, and both are much smaller than JPEG. remotePatterns allows optimisation of images from your CMS or CDN.

3. Load the LCP image early

The hero image at the top of a page is often the Largest Contentful Paint element. Lazy-loading it delays LCP. Mark it for eager, high-priority loading with the Image component’s priority option (check your Next.js version’s documentation for the current prop name), and use it for only one or two images per page.

4. Write useful alt text

Weak Useful
image1 Team reviewing a site audit report in the Pune office
product Blue cotton kurta with white block print, front view
seo seo services best seo agency Chart of weekly search impressions over two months

Describe what the image shows, in the context of the page. Leave alt empty (alt=””) for purely decorative images. Keyword stuffing in alt text is against Google’s guidelines and unhelpful for screen reader users.

5. File names and surrounding text

  • Use descriptive file names with hyphens, such as steel-flange-wnrf.jpg, not IMG_4829.jpg.
  • Place images near the text that describes them, and add captions where helpful. Google uses surrounding text to understand images.
  • Use real img elements for content images. Images set as CSS backgrounds are not indexed as images.

6. Social and preview images

Set Open Graph images through the Metadata API or the opengraph-image file convention, so pages shared on LinkedIn, WhatsApp and elsewhere show a relevant image. Next.js can generate these images dynamically with the ImageResponse API.

7. Structured data

Include an image property in Article, Product and Organization structured data, pointing to a large, crawlable image. Google uses these for rich results and for understanding the main image of a page.

8. Keep facts out of images

Prices, specifications, charts and tables inside images are hard for crawlers and AI assistants to read reliably. Put the data in HTML and use the image as illustration. See tables and data-dense formatting.

Checklist

  1. All content images use next/image with width and height or fill with sizes.
  2. AVIF and WebP formats enabled.
  3. The LCP image loads with high priority; others lazy-load.
  4. Descriptive alt text; decorative images use empty alt.
  5. Descriptive file names.
  6. Open Graph images set.
  7. No important facts only inside images.

Frequently asked questions

Do image sitemaps still matter?

They help Google discover images it might otherwise miss, such as images loaded by JavaScript. For most sites using standard img elements, they are optional.

Does the Image component work with static export?

Default optimisation needs a server. With static export, use a custom loader for an image CDN or pre-optimise images at build time.

Can AI assistants read text in images?

Some systems can, but not reliably or consistently. Text in HTML is the dependable choice.

Sources

  1. Next.js documentation, Image component and image configuration
  2. Google Search Central, “Google image SEO best practices”
  3. web.dev, “Optimize Largest Contentful Paint”

Related reading