Image Optimization

作者 secondsky88378361314fMIT227 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫10 天前更新

Optimizes images for web performance using modern formats, responsive techniques, and lazy loading strategies. Use when improving page load times, implementing responsive images, or preparing assets for production deployment.

僅含說明Design & Creative

AI 產生的概覽

指導網頁圖片最佳化，涵蓋現代格式、響應式標記、延遲載入與建置流程設定。

功能: 這項技能為網頁效能的圖片最佳化提供參考指引。內容涵蓋格式選擇（JPEG、PNG、WebP、AVIF、SVG）、使用 srcset 與 picture 元素的響應式圖片標記、延遲載入模式、以 Sharp 為基礎的建置流程範例、效能檔案大小目標，以及最佳化檢查清單。它產出的是建議與程式碼片段，本身不會執行任何工具。
適用情境: 適合用於改善頁面載入時間、實作響應式圖片，或為正式環境部署準備圖片素材的情況。適用於需要決定格式、尺寸與載入策略的前端與效能相關工作。
執行需求: 使用這些指引不需要指令碼或套件；若讀者選擇實作其中的 Sharp 範例，則需要 Node.js 與 sharp 套件。

Image Optimization

Optimize images for web performance with modern formats and responsive techniques.

Format Selection

Format	Best For	Compression
JPEG	Photos	Lossy, 50-70% reduction
PNG	Icons, transparency	Lossless, 10-30%
WebP	Modern browsers	25-35% better than JPEG
AVIF	Next-gen	50% better than JPEG
SVG	Logos, icons	Vector, scalable

Responsive Images

html

<picture>  <source srcset="image.avif" type="image/avif">  <source srcset="image.webp" type="image/webp">  <img    src="image.jpg"    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"    sizes="(max-width: 600px) 100vw, 50vw"    alt="Description"    loading="lazy"    decoding="async"  ></picture>

<picture>  <source srcset="image.avif" type="image/avif">  <source srcset="image.webp" type="image/webp">  <img    src="image.jpg"    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"    sizes="(max-width: 600px) 100vw, 50vw"    alt="Description"    loading="lazy"    decoding="async"  ></picture>

Lazy Loading

html

<!-- Native lazy loading --><img src="image.jpg" loading="lazy" alt="Description">
<!-- With blur placeholder --><img  src="placeholder-blur.jpg"  data-src="image.jpg"  class="lazy"  alt="Description">

<!-- Native lazy loading --><img src="image.jpg" loading="lazy" alt="Description">
<!-- With blur placeholder --><img  src="placeholder-blur.jpg"  data-src="image.jpg"  class="lazy"  alt="Description">

Build Pipeline (Sharp)

javascript

const sharp = require('sharp');
async function optimizeImage(input, output) {  await sharp(input)    .resize(1200, null, { withoutEnlargement: true })    .webp({ quality: 80 })    .toFile(output);}

const sharp = require('sharp');
async function optimizeImage(input, output) {  await sharp(input)    .resize(1200, null, { withoutEnlargement: true })    .webp({ quality: 80 })    .toFile(output);}

Performance Targets

Optimization Checklist

來源與署名

來源：secondsky/claude-skills位於plugins/image-optimization/skills/image-optimization提交8837836

授權條款： MIT

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Asset Type	Target Size
Hero image	<200KB
Thumbnail	<30KB
Total images	<500KB

Image Optimization

Image Optimization

Format Selection

Responsive Images

Lazy Loading

Build Pipeline (Sharp)

Performance Targets

Optimization Checklist

來源與署名

更多來自 secondsky/claude-skills 的技能

Vulnerability Scanning

Web Performance Optimization

Web Performance Audit

Threejs

Tailwind V4 Shadcn

Technical Specification

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design