Next.js Image Component
The Next.js `<Image>` component (`next/image`) is a built-in extension of the HTML `<img>` tag that provides automatic image optimization including lazy loading, responsive sizing, format conversion, and layout shift prevention.
The `<Image>` component solves the most common image-related SEO and performance issues automatically. It generates responsive `srcset` attributes, lazy-loads images by default, requires explicit dimensions (preventing CLS), and serves modern formats (WebP/AVIF) through the built-in optimization API.
Key props for SEO: `priority` (disables lazy loading and preloads — use for LCP images), `alt` (required for accessibility and image SEO), `sizes` (tells the browser which image size to load based on viewport), and `placeholder="blur"` (shows a low-quality blur while loading, improving perceived performance).
Common mistakes: using `priority` on too many images (only the LCP image), missing `sizes` on responsive images (causes over-fetching), using `fill` without a positioned container (breaks layout), and forgetting that remote images require `remotePatterns` configuration in `next.config.js`.
Example
// next/image — common patterns
import Image from "next/image";
// Hero image (LCP) — priority + blur placeholder
<Image
src="/hero.webp"
alt="Indxel CLI terminal output"
width={1200}
height={630}
priority
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQ..."
/>
// Responsive image with sizes
<Image
src="/feature.webp"
alt="Dashboard screenshot"
width={800}
height={450}
sizes="(max-width: 768px) 100vw, 50vw"
/>Related terms
Image Optimization
Image optimization is the process of reducing image file sizes and serving appropriately sized images to improve page load performance, using techniques like compression, modern formats, and responsive delivery.
WebP
WebP is an image format developed by Google that provides lossy and lossless compression, typically producing files 25-35% smaller than JPEG and PNG at equivalent visual quality.
AVIF
AVIF (AV1 Image File Format) is a modern, royalty-free image format based on the AV1 video codec that delivers significantly better compression than WebP and JPEG while maintaining high visual quality.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) is a Core Web Vital metric that measures the time from when the page starts loading to when the largest text block or image element is rendered in the viewport.
Stop shipping broken SEO
Indxel validates your metadata, guards your CI/CD pipeline, and monitors indexation — so you never miss an SEO issue again.