Seo images

Skill mvstepanek/nextjs-ecommerce-seo-skills/global-skills/seo-images

Image SEO and optimization rules for Next.js. Use when adding images, product photos, or working with next/image. Covers alt text, sizing, formats, lazy loading, and LCP optimization.From its SKILL.md

Install

npx -y skills add mvstepanek/nextjs-ecommerce-seo-skills --skill seo-images

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.6 KB, 620 tokens by cl100k_base, as published. Nobody here has run it

Image SEO & Optimization Guidelines

Follow these rules when adding or modifying images in a Next.js project.

Always Use next/image

Never use raw <img> tags — always use <Image> from next/image.

Benefits: automatic WebP/AVIF conversion, lazy loading, responsive sizing, blur placeholders.

import Image from 'next/image';

// GOOD
<Image src="/photo.jpg" alt="Descriptive alt text" width={800} height={600} />

// BAD
<img src="/photo.jpg" alt="photo" />

Alt Text Rules

Image Type	Alt Text	Example
Product	`{Name} - {Key Detail}`	"Widget Pro - 500W motor"
Category hero	Describe the content	"Collection of industrial widgets"
Decorative only	Empty string	`alt=""`
Logo	`{Company} logo`	"Acme Corp logo"
Icon with meaning	Describe the meaning	"Warning: out of stock"

Rules

Every meaningful image MUST have descriptive alt text
Never use generic text: "image", "photo", "banner", "placeholder"
Empty alt="" ONLY for purely decorative images
Include relevant keywords naturally (product name, category)

Sizing

Always specify width and height — or use fill with a sized container
Missing dimensions cause CLS (Cumulative Layout Shift) — hurts Core Web Vitals

// Explicit dimensions
<Image src={url} alt={alt} width={800} height={600} />

// Fill mode
<div className="relative aspect-[4/3] w-full">
  <Image src={url} alt={alt} fill className="object-cover" />
</div>

Priority (LCP)

Use priority on the main above-the-fold image (1-2 per page max)
This is the LCP (Largest Contentful Paint) element — preloading it improves the core metric

<Image src={heroImage} alt={alt} width={1200} height={600} priority />

Image Formats

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

Blur Placeholder

Reduces perceived loading time and CLS:

<Image src={url} alt={alt} width={800} height={600} placeholder="blur" blurDataURL={blurHash} />

Common Mistakes

Raw <img> tags — always use next/image
Generic alt text — describe what's in the image
Missing dimensions — causes layout shift
priority on every image — only 1-2 per page
Empty alt on meaningful images — only decorative images get alt=""

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most marketing audience skills give in 620 tokens

Counted across 690 of the 894 authors here whose files we hold, read 2026-08-07

Apply Poppins font to headingsin 41 of 690, across 6 files
Apply Lora font to body textin 41 of 690, across 6 files
Use Arial fallback for headingsin 39 of 690, across 4 files
Use Georgia fallback for body textin 39 of 690, across 4 files
Maintain text hierarchy and formattingin 39 of 690, across 4 files
Use accent colors for non-text shapesin 38 of 690, across 3 files
Use RGB values for precise color matchingin 38 of 690, across 3 files
Use brand colors for primary text and backgroundsin 36 of 690, across 1 file
Read product marketing context file before asking questions, starting, or auditingin 35 of 690, across 23 files
Use active voice instead of passive voicein 26 of 690, across 10 files
Implement or generate appropriate JSON-LD structured datain 24 of 690, across 17 files
Prioritize clarity over clevernessin 22 of 690, across 8 files

Said here and by no other author read

specify width and height attributes
use empty alt text for decorative images
include relevant keywords in alt text
add the priority property to above-the-fold images
limit priority usage to one or two images per page
enable modern image formats in the configuration

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.