image-optimization by kostja94/marketing-skills
npx skills add https://github.com/kostja94/marketing-skills --skill image-optimization针对 Google 搜索(文本结果、图片包、Google 图片、Discover)、核心网页指标(LCP)和无障碍性提供图片优化指南。整合了来自组件(hero、信任徽章)和页面(落地页)中与图片相关的最佳实践。参考:Google 图片 SEO, Semrush 图片 SEO。
调用时机:在首次使用时,如果合适,用一两句话开场,说明此技能涵盖的内容及其重要性,然后提供主要输出。在后续使用或用户要求跳过时,直接进入主要输出。
首先检查项目上下文:如果存在 .claude/project-context.md 或 .cursor/project-context.md,请读取以获取品牌和页面上下文。
识别:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
Google 通过 <img> 的 src 属性(包括在 <picture> 内)查找图片。CSS 背景图片不会被索引。
| 建议 | 不建议 |
|---|---|
<img src="puppy.jpg" alt="Golden retriever puppy" /> | <div style="background-image:url(puppy.jpg)"> |
提交 图片站点地图 以帮助 Google 发现它可能错过的图片。图片站点地图可以包含来自 CDN(其他域名)的 URL;请在 Search Console 中验证 CDN 域名以获取抓取错误报告。
结构(来自 Google):
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>https://example.com/page</loc>
<image:image>
<image:loc>https://example.com/image.jpg</image:loc>
</image:image>
</url>
</urlset>
有关站点地图索引和提交,请参见 xml-sitemap。图片站点地图是一个扩展;可以是独立的,也可以与页面站点地图结合。
Google 支持:BMP, GIF, JPEG, PNG, WebP, SVG, AVIF。确保文件名扩展名与格式匹配。
| 格式 | 最适合 | 备注 |
|---|---|---|
| WebP | 照片,图形 | 文件更小,加载更快;有损 + 无损;支持透明度,动画 |
| AVIF | 现代浏览器 | 比 WebP 更小;检查支持情况 |
| JPEG | 标准照片 | 后备方案;广泛支持 |
| PNG | 透明度,细节 | 文件较大;需要时使用 |
| SVG | 图标,徽标 | 可缩放;内联 SVG 使用 <title> 作为替代文本 |
| GIF | 简单动画 | 仅第一帧用于预览 |
使用 <picture> 或 srcset 适配不同屏幕尺寸。始终提供后备 src——有些爬虫不理解 srcset。
<img
srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"
sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
src="image-800w.jpg"
alt="Descriptive alt text">
Picture 元素(格式后备,例如 WebP → PNG):
<picture>
<source type="image/webp" srcset="image.webp">
<img src="image.png" alt="Descriptive alt text">
</picture>
Base64 数据 URI(data:image/...;base64,...)可以减少 HTTP 请求但会增加 HTML 大小。谨慎用于小图标;避免用于大图片。参见 web.dev。
仅对首屏外图片使用 loading="lazy"。首屏图片(hero)必须立即加载——对它们使用懒加载会损害 LCP。
<img src="hero.jpg" alt="..." loading="eager">
<img src="below-fold.jpg" alt="..." loading="lazy">
替代文本改善了无障碍性(屏幕阅读器,低带宽)和SEO(Google 将其与计算机视觉结合以理解图片)。如果图片是链接,它也可以作为锚文本。
| 建议 | 不建议 |
|---|---|
| 有用、信息丰富的描述 | 关键词堆砌 |
| 结合页面内容上下文 | "image of" 或 "photo of"(冗余) |
| 最多约 125 个字符(某些辅助技术会截断) | 有意义的图片使用空替代文本 |
| 功能性图片使用描述性文本 | 纯装饰性图片使用替代文本(使用 alt="") |
示例(来自 Google):
<img src="puppy.jpg"/>alt="puppy dog baby dog pup pups puppies..."alt="puppy"alt="Dalmatian puppy playing fetch"Google 从标题和附近文本中提取图片上下文。使用 <figcaption> 或图片附近的描述性文本。
| 用途 | 目的 |
|---|---|
| 主题相关性 | 标题描述图片主题;支持索引 |
| 精选摘要 | 带有标题的图片靠近答案可以占据缩略图位置;参见 featured-snippet |
| 图片包 | 替代文本 + 标题 + 文件名有助于图片包显示;参见 serp-features |
在 SVG 内部使用 <title> 以提高无障碍性:
<svg aria-labelledby="svgtitle1">
<title id="svgtitle1">Descriptive text for the SVG</title>
</svg>
描述性的文件名给 Google 提供关于主题的轻微线索。
| 建议 | 不建议 |
|---|---|
apple-iphone-15-pink-side-view.jpg | IMG00353.jpg |
| 简短,连字符分隔 | 通用:image1.jpg, pic.gif |
| 为翻译页面本地化文件名 | 过长的文件名 |
当用户搜索关键词时,优化后的图片可以作为搜索结果中标题和描述旁边的缩略图出现——增强可见性和点击率。Google 也将这些图片用于 Google Discover。Search Engine Land
Google 自动从多个来源选择缩略图。通过以下方式影响选择:
{
"@context": "https://schema.org",
"@type": "WebPage",
"url": "https://example.com/page",
"primaryImageOfPage": "https://example.com/images/cat.png"
}
或者通过 mainEntity 或 mainEntityOfPage 将 image 附加到主实体(例如 BlogPosting, Article)。
<meta property="og:image" content="https://example.com/images/cat.png">
首选图片规则:相关,有代表性;避免通用(例如徽标)或文字过多的图片;避免极端宽高比;高分辨率。社交规范参见 open-graph , twitter-cards。
Google Discover(如果针对 Discover):宽度 ≥1200px;≥300KB;首选 16:9 宽高比;重要内容在横向裁剪中可见。
添加结构化数据以在 Google 图片中实现富媒体结果(徽章,额外信息)。图片属性是获得资格的必需项。ImageObject、Article、Product、Recipe 等参见 schema-markup。
| 上下文 | 优先级 | 备注 |
|---|---|---|
| Hero 图 | LCP,替代文本,不懒加载 | 参见 hero-generator;首屏,快速加载 |
| 文章 / 博客 Hero 图 | 宽度 1200–1600px;比例高度;og:image 为 1200×630 | Schema、Open Graph、Twitter Cards 使用同一张图片;小于 200 KB;首选 WebP;描述性替代文本;设置宽度/高度以防止 CLS;使用 srcset/sizes 实现响应式;带有相关图片的文章浏览量增加约 94% |
| 信任徽章 | 替代文本 | 参见 trust-badges-generator;例如 "Norton Secured" |
| 落地页 | 以上所有 | 参见 landing-page-generator 交付前检查清单 |
| OG / Twitter | 1200×630, 1200×675 | 参见 open-graph , twitter-cards |
| 平台 | 按平台要求 | X、LinkedIn、Pinterest——参见平台技能 |
每周安装次数
172
仓库
GitHub 星标
237
首次出现
2026年3月5日
安全审计
安装于
cursor158
gemini-cli157
kimi-cli157
codex157
opencode157
amp157
Guides image optimization for Google Search (text results, Image Pack, Google Images, Discover), Core Web Vitals (LCP), and accessibility. Consolidates image-related best practices from components (hero, trust-badges) and pages (landing-page). References: Google Image SEO, Semrush Image SEO.
When invoking : On first use , if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for brand and page context.
Identify:
Google finds images in the src attribute of <img> (including inside <picture>). CSS background images are not indexed.
| Do | Don't |
|---|---|
<img src="puppy.jpg" alt="Golden retriever puppy" /> | <div style="background-image:url(puppy.jpg)"> |
Submit an image sitemap to help Google discover images it might otherwise miss. Image sitemaps can include URLs from CDNs (other domains); verify CDN domain in Search Console for crawl error reporting.
Structure (from Google):
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>https://example.com/page</loc>
<image:image>
<image:loc>https://example.com/image.jpg</image:loc>
</image:image>
</url>
</urlset>
See xml-sitemap for sitemap index and submission. Image sitemap is an extension; can be standalone or combined with page sitemap.
Google supports: BMP, GIF, JPEG, PNG, WebP, SVG, AVIF. Match filename extension to format.
| Format | Best for | Notes |
|---|---|---|
| WebP | Photos, graphics | Smaller files, faster load; lossy + lossless; transparency, animation |
| AVIF | Modern browsers | Even smaller than WebP; check support |
| JPEG | Standard photos | Fallback; widely supported |
| PNG | Transparency, detail | Larger; use when needed |
| SVG | Icons, logos | Scalable; use <title> for inline SVG alt |
| GIF | Simple animation | First frame only for preview |
Use <picture> or srcset for different screen sizes. Always provide fallbacksrc—some crawlers don't understand srcset.
<img
srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"
sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
src="image-800w.jpg"
alt="Descriptive alt text">
Picture element (format fallback, e.g. WebP → PNG):
<picture>
<source type="image/webp" srcset="image.webp">
<img src="image.png" alt="Descriptive alt text">
</picture>
Base64 data URIs (data:image/...;base64,...) reduce HTTP requests but increase HTML size. Use sparingly for small icons; avoid for large images. See web.dev.
Use loading="lazy" only for below-fold images. Above-fold images (hero) must load immediately—lazy loading them hurts LCP.
<img src="hero.jpg" alt="..." loading="eager">
<img src="below-fold.jpg" alt="..." loading="lazy">
Alt text improves accessibility (screen readers, low bandwidth) and SEO (Google uses it with computer vision to understand images). It also serves as anchor text if the image is a link.
| Do | Don't |
|---|---|
| Useful, information-rich description | Keyword stuffing |
| Context of page content | "image of" or "photo of" (redundant) |
| Max ~125 characters (some assistive tech truncates) | Empty alt on meaningful images |
| Descriptive for functional images | Alt on purely decorative images (use alt="") |
Examples (from Google):
<img src="puppy.jpg"/>alt="puppy dog baby dog pup pups puppies..."alt="puppy"alt="Dalmatian puppy playing fetch"Google extracts image context from captions and nearby text. Use <figcaption> or descriptive text near the image.
| Use | Purpose |
|---|---|
| Topic relevance | Caption describes image subject; supports indexing |
| Featured Snippets | Images near answers with captions can capture thumbnail slots; see featured-snippet |
| Image Pack | Alt + caption + file name help Image Pack display; see serp-features |
Use <title> inside SVG for accessibility:
<svg aria-labelledby="svgtitle1">
<title id="svgtitle1">Descriptive text for the SVG</title>
</svg>
Descriptive filenames give Google light clues about subject matter.
| Do | Don't |
|---|---|
apple-iphone-15-pink-side-view.jpg | IMG00353.jpg |
| Short, hyphen-separated | Generic: image1.jpg, pic.gif |
| Localize filenames for translated pages | Overly long filenames |
When users search for keywords, optimized images can appear as thumbnails next to the page title and description in search results—enhancing visibility and CTR. Google also uses these images for Google Discover. Search Engine Land
Google selects thumbnails automatically from multiple sources. Influence selection via:
{
"@context": "https://schema.org",
"@type": "WebPage",
"url": "https://example.com/page",
"primaryImageOfPage": "https://example.com/images/cat.png"
}
Or attach image to main entity (e.g. BlogPosting, Article) via mainEntity or mainEntityOfPage.
<meta property="og:image" content="https://example.com/images/cat.png">
Preferred image rules : Relevant, representative; avoid generic (e.g. logo) or text-heavy images; avoid extreme aspect ratios; high resolution. See open-graph , twitter-cards for social specs.
Google Discover (if targeting Discover): ≥1200px wide; ≥300KB; 16:9 aspect ratio preferred; important content visible in landscape crop.
Add structured data for rich results in Google Images (badges, extra info). Image attribute is required for eligibility. See schema-markup for ImageObject, Article, Product, Recipe, etc.
| Context | Priority | Notes |
|---|---|---|
| Hero | LCP, alt, no lazy | See hero-generator ; above-fold, fast load |
| Article / Blog hero | 1200–1600px wide; proportional height; 1200×630 for og:image | Same image for Schema, Open Graph, Twitter Cards; under 200 KB; WebP preferred; descriptive alt; set width/height to prevent CLS; use srcset/sizes for responsive; articles with relevant images get ~94% more views |
| Trust badges | Alt text | See trust-badges-generator ; e.g. "Norton Secured" |
| Landing page | All above | See landing-page-generator Pre-Delivery Checklist |
| OG / Twitter | 1200×630, 1200×675 | See open-graph , twitter-cards |
| Platforms | Per-platform |
Weekly Installs
172
Repository
GitHub Stars
237
First Seen
Mar 5, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
cursor158
gemini-cli157
kimi-cli157
codex157
opencode157
amp157
Schema标记专家指南:结构化数据实现与SEO优化,提升富媒体搜索结果
31,400 周安装
| X, LinkedIn, Pinterest—see platform skills |