导读：图片通常占网页总大小的 60%-75%——是影响加载速度的头号因素。一张未经优化的照片可能有 5MB，优化后可以缩小到 50KB，体积减少 99%而视觉质量几乎不变。本教程带你完整地理解图片优化：从格式选择（JPEG vs PNG vs WebP vs AVIF vs SVG）、压缩方法、在线工具操作步骤、响应式图片、懒加载、CDN 加速，到图片 SEO——每一步都有可操作的实战指引。
💡 核心原则：图片优化的目标是在可接受的视觉质量和最小的文件体积之间找到最佳平衡点。不是追求"最小"，而是追求"足够小且用户看不出区别"。
选对格式是图片优化的第一步。不同格式有不同的特性和最佳使用场景。
| 格式 | 最佳场景 | 压缩方式 | 透明度 | 浏览器支持 |
|---|---|---|---|---|
| JPEG / JPG | 照片、复杂彩色图片（摄影、缩略图、人物风景） | 有损 | 不支持 | 100% 全浏览器 |
| PNG | Logo、图标、需要透明背景的图片、文本截图、线条艺术 | 无损（体积较大） | 支持（包括透明通道） | 100% 全浏览器 |
| WebP ✅ 推荐 2026 年默认格式 | 照片、任何原本用 JPEG 或 PNG 的场景。同时支持有损和无损，体积比 JPEG/PNG 小 25%-35% | 有损 + 无损 | 支持（含透明通道） | 98%（除极旧浏览器） |
| AVIF 新一代格式 | 照片，尤其是色彩丰富的摄影作品。体积可再小 20%-50% 于 WebP | 有损 + 无损 | 支持 | 约 93%（Chrome/Edge/Firefox/Safari 16.4+） |
| SVG | Logo、图标、矢量图形、简单插图。可无限缩放，体积与尺寸无关 | 本质是 XML 文本，可压缩 | 支持 | 100% 全浏览器 |
| GIF | 动画（但建议用 WebM/MP4 视频替代动画 GIF，体积小得多） | 有损（仅限 256 色） | 简单透明（无抗锯齿） | 100% 全浏览器 |
<picture> 元素实现渐进式格式最稳妥的做法是提供多种格式，让浏览器选择自己支持的最小格式：
<!-- 浏览器按顺序选择：AVIF → WebP → 降级到 JPEG -->
<picture>
<source srcset="hero-image.avif" type="image/avif">
<source srcset="hero-image.webp" type="image/webp">
<img src="hero-image.jpg"
alt="产品主图"
width="1200"
height="675"
loading="lazy"
decoding="async">
</picture>⚠️ 重要提醒：2026 年 WebP 已经是事实上的"通用格式"——全球 98% 以上的浏览器都支持（包括 Chrome、Edge、Firefox、Safari 14+）。如果你的网站不再需要兼容 IE 或 Safari 13 以下，可以直接使用 WebP 作为默认图片格式，不需要提供 JPEG 降级。
| 对比项 | 有损压缩（Lossy） | 无损压缩（Lossless） |
|---|---|---|
| 原理 | 丢弃人眼不敏感的图像数据（如细微的色彩变化、高频细节） | 重新编码图像数据，不丢弃任何信息 |
| 支持格式 | JPEG、WebP（有损模式）、AVIF | PNG、WebP（无损模式）、SVG |
| 压缩率 | 高（原始大小的 5%-20%） | 中等（原始大小的 50%-80%） |
| 质量损失 | 有（可控） | 无 |
| 能否反复编辑 | 不推荐（每次重编码都会损失更多细节） | 可以（每次编辑无质量损失） |
| 推荐质量参数 | JPEG：60-85 WebP：60-80 AVIF：40-60 | PNG：不需要参数 WebP 无损：用于图标 |
不同工具的"质量数值"含义不同。以下是经过广泛测试的推荐值：
| 使用场景 | JPEG 质量 | WebP 质量 | AVIF 质量 |
|---|---|---|---|
| 缩略图 / 列表图 | 55-65 | 50-60 | 35-45 |
| 一般内容图片 | 70-80 | 65-75 | 45-55 |
| 产品主图 / 画廊图 | 80-85 | 75-82 | 55-65 |
| 专业摄影展示 | 85-90 | 80-88 | 60-70 |
💡 实战技巧：从质量 80 开始，往下试（70、60、50）。找到"用户看不出区别"的最小质量值。通常 JPEG 在质量 70 以下开始出现明显的方块状失真，WebP 在 60 以下才会明显，AVIF 可以压缩到 40 还保持很好的质量。
tinypng.com — 支持 PNG 和 JPEG，使用智能有损压缩，自动识别并保留重要细节。
tinypng.comsquoosh.app — Google 出品的开源工具，所有压缩都在浏览器本地完成（不上传服务器，保护隐私）。
squoosh.appsquoosh-cli# 安装
npm install -g @squoosh/cli
# 将文件夹中所有 jpg 转换为 WebP（质量 80）
squoosh-cli --webp '{"quality":80}' ./images/*.jpg
# 生成 AVIF（质量 50）+ 调整大小为 1200 宽
squoosh-cli --avif '{"quality":50}' --resize '{"width":1200}' ./photos/
# 批处理示例：同时生成多种格式
for img in ./originals/*.jpg; do
# 生成 WebP
squoosh-cli --webp '{"quality":80}' "$img" -d ./output/
# 生成 AVIF
squoosh-cli --avif '{"quality":50}' "$img" -d ./output/
done如果你不想安装任何软件，也不想把图片上传到第三方服务器，可以使用我们的 在线图片压缩工具。它完全在你的浏览器中运行，图片不会上传到任何服务器——这对处理敏感或个人照片特别重要。支持 JPEG、PNG、WebP 多种格式，可自由调整压缩质量，实时预览对比效果。
imageoptim.com — 桌面端应用，一键优化，自动组合多个压缩引擎，无质量损失前提下减少 20%-30% 体积。
shortpixel.com — 提供 WordPress 插件和 API 服务，适合网站批量自动化优化。
# 安装 WebP 工具（macOS）
brew install webp
# 安装 ImageMagick（包含 convert 命令）
brew install imagemagick
# 将 JPEG 转换为 WebP（质量 80，体积通常减 60%-70%）
cwebp -q 80 photo.jpg -o photo.webp
# 批量转换文件夹中所有 JPEG
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done
# 调整图片尺寸（最大宽度 1200px）并压缩
cwebp -q 80 -resize 1200 0 large-photo.jpg -o large-photo.webp
# 使用 ImageMagick 压缩 PNG（无损优化）
convert -strip -interlace Plane -gaussian-blur 0.05 -quality 85% input.png output.png
# 去除 PNG 的元数据（减少几 KB 到几十 KB）
convert input.png -strip output-optimized.png如果你使用 Photoshop 或开源替代 GIMP 来编辑图片，导出时的设置直接影响最终文件大小。
文件 → 导出 → 存储为 Web 所用格式（旧版） 或 文件 → 导出 → 导出为...文件 → 导出为....jpg 或 .webp，点击"导出"图像 → 模式 → 索引色 再导出为 PNG-8，体积更小这是最常见的错误：上传一张 6000×4000 像素的原图，但它在网站上显示时只有 1200×800 像素。浏览器被迫下载 5 倍于需要的数据。
# 正确做法（使用 ImageMagick）
# 将一张 6000×4000 的原图裁剪到最大宽度 1600px
convert original.jpg -resize 1600x1600\> -quality 82 optimized.jpg
# 注意：> 符号表示"仅当大于此尺寸时才缩小"，避免放大小图
# 如果用 cwebp：
cwebp -q 80 -resize 1600 0 original.jpg -o optimized.webp
# 生成多个尺寸供 srcset 使用：
cwebp -q 80 -resize 640 0 original.jpg -o photo-640w.webp
cwebp -q 80 -resize 1280 0 original.jpg -o photo-1280w.webp
cwebp -q 80 -resize 1920 0 original.jpg -o photo-1920w.webp⚠️ 重要检查：上传图片前，问自己三个问题：① 图片尺寸是否不大于实际在网页中显示的尺寸？② 格式是否选对了（照片用 WebP/JPEG，图标用 SVG/PNG）？③ 文件名是否描述性（如 hero-banner-product.jpg 而不是 IMG_2847.JPG）？
现代网站需要在各种屏幕尺寸（手机 375px、平板 768px、桌面 1920px、4K 屏）上都能显示清晰且高效的图片。srcset 和 sizes 属性让你告诉浏览器："我有多个尺寸的同一图片，你根据当前屏幕大小选择最合适的。"
<img
srcset="
product-640w.webp 640w,
product-1280w.webp 1280w,
product-1920w.webp 1920w
"
sizes="
(max-width: 767px) 92vw,
(max-width: 1199px) 50vw,
640px
"
src="product-1280w.webp"
alt="产品展示图"
width="1280"
height="720"
loading="lazy">srcset：列出所有可用的图片文件，文件名后跟宽度（如 640w 表示这张图宽度为 640 像素）。浏览器根据屏幕宽度和像素密度（DPR）自动选择最合适的。sizes：告诉浏览器图片在不同布局下实际显示的宽度。这让浏览器能做出更准确的选择。语法：(媒体查询条件) 显示宽度, 默认宽度。单位可以用 vw（视口宽度百分比）或固定像素。src（降级）：为不支持 srcset 的旧浏览器提供图片。2026 年几乎所有浏览器都支持，但保留它更安全。width 和 height：一定要写！这让浏览器在图片加载之前就能计算出图片的宽高比，预留正确的页面空间，避免页面跳动（Layout Shift）——这是 Core Web Vitals 中 CLS 的重要改进点。<picture> 元素：按屏幕宽度/方向切换不同内容的图片当你在不同屏幕上使用不同构图的图片时（如手机上用竖构图特写，桌面上用横构图全景）：
<picture>
<!-- 手机端：竖构图，宽度小 -->
<source media="(max-width: 767px)"
srcset="hero-mobile-640w.avif 640w,
hero-mobile-800w.avif 800w"
type="image/avif">
<!-- 平板及桌面：横构图 -->
<source media="(min-width: 768px)"
srcset="hero-1280w.avif 1280w,
hero-1920w.avif 1920w"
type="image/avif">
<!-- 降级到 WebP -->
<source srcset="hero-1280w.webp 1280w" type="image/webp">
<!-- 最后降级 -->
<img src="hero-1280w.jpg"
alt="品牌故事主图"
width="1280"
height="720"
loading="lazy">
</picture>懒加载（Lazy Loading）的意思是：图片不在首屏出现时，暂时不加载它。当用户滚动页面，图片即将进入视口时才开始下载。这能显著减少首屏加载时间和服务器流量。
所有现代浏览器（Chrome、Edge、Firefox、Safari 15.4+）都支持原生懒加载属性：
<img
src="product.jpg"
alt="产品图"
width="800"
height="600"
loading="lazy" <!-- 这一行就是全部！-->
decoding="async">
<!-- 也适用于 iframe -->
<iframe src="video.html" loading="lazy"></iframe>loading 属性的三个值：
lazy — 延迟加载，直到图片距离视口一定距离内才加载eager — 立即加载（默认行为）auto — 让浏览器自动决定❌ 重要禁忌：首屏的图片（特别是 LCP 元素）绝对不能加 loading="lazy"！如果首屏的主图设置了懒加载，浏览器会先处理其他资源，导致主图延迟显示。LCP（最大内容绘制）指标会严重恶化。规则：首屏图片用 loading="eager"，首屏以下的图片用 loading="lazy"。
如果你需要更精确的控制（如自定义加载距离、添加淡入动画、提供骨架屏），使用浏览器原生的 Intersection Observer API：
<!-- HTML：用 data-src 代替 src -->
<img data-src="real-image.jpg"
data-srcset="img-640w.jpg 640w, img-1280w.jpg 1280w"
alt="产品图"
width="800"
height="600"
class="lazy-img">
<!-- CSS：给图片一个占位骨架背景 -->
<style>
.lazy-img {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
opacity: 0;
transition: opacity 0.4s ease-in;
}
.lazy-img.loaded {
opacity: 1;
animation: none;
background: none;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
<!-- JavaScript：监听元素是否进入视口 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const lazyImages = document.querySelectorAll('.lazy-img');
// 如果浏览器支持原生 loading，直接降级到原生
if ('loading' in HTMLImageElement.prototype) {
lazyImages.forEach(img => {
img.src = img.dataset.src;
if (img.dataset.srcset) img.srcset = img.dataset.srcset;
img.loading = 'lazy';
img.classList.add('loaded');
});
return;
}
// 使用 Intersection Observer 的回退方案
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
// 替换 data-src 为真正的 src
if (img.dataset.srcset) img.srcset = img.dataset.srcset;
img.src = img.dataset.src;
img.classList.add('loaded');
observer.unobserve(img); // 加载后停止观察
}
});
}, {
rootMargin: '200px 0px', // 提前 200px 开始加载，用户滚动更快也能赶上
threshold: 0.01
});
lazyImages.forEach(img => imageObserver.observe(img));
});
</script>配合 decoding="async" 属性让浏览器在后台解码图片，不阻塞页面其他内容的渲染：
<img src="photo.jpg"
alt="..."
width="800"
height="600"
loading="lazy"
decoding="async">CSS background-image 中的图片不会被浏览器的原生懒加载影响。需要额外的技巧优化。
/* 移动端（小屏幕）：加载较小的背景图 */
.hero-banner {
background-image: url('hero-640w.webp');
background-size: cover;
background-position: center;
}
/* 平板（中等屏幕） */
@media (min-width: 768px) {
.hero-banner {
background-image: url('hero-1280w.webp');
}
}
/* 桌面及以上（大屏幕） */
@media (min-width: 1200px) {
.hero-banner {
background-image: url('hero-1920w.webp');
}
}
/* 高 DPI 屏幕（Retina）：加载 2x 分辨率图 */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.hero-banner {
background-image: url('hero-2560w.webp');
}
}更现代的写法，类似 img 的 srcset：
.hero-banner {
background-image: image-set(
url('hero-1280w.webp') 1x,
url('hero-2560w.webp') 2x,
url('hero-3840w.webp') 3x
);
/* 兼容性降级 */
background-image: -webkit-image-set(
url('hero-1280w.webp') 1x,
url('hero-2560w.webp') 2x
);
/* 不支持 image-set 的浏览器回退 */
background-image: url('hero-1280w.webp');
}对于非首屏区域的背景图，可以用 Intersection Observer 延迟设置：
<!-- HTML：把背景图 URL 存在 data 属性中 -->
<div class="section-bg lazy-bg"
data-bg="section-background.webp">
...内容...
</div>
<!-- JavaScript：当元素进入视口才设置背景 -->
<script>
const lazyBgs = document.querySelectorAll('.lazy-bg');
const bgObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
el.style.backgroundImage = `url(${el.dataset.bg})`;
el.classList.remove('lazy-bg');
bgObserver.unobserve(el);
}
});
}, { rootMargin: '300px 0px' });
lazyBgs.forEach(el => bgObserver.observe(el));
</script>CDN（内容分发网络）把你的图片缓存到全球数百个边缘节点，用户从最近的节点下载，速度提升数倍。同时 CDN 还可以自动完成图片优化，无需手动处理每张图。
ashley.ns.cloudflare.com 和 roan.ns.cloudflare.com）Cache-Control: public, max-age=2592000（30 天）到图片类型cf-cache-status: HIT开启 Cloudflare 的 Image Resizing（Pro 方案及以上或付费使用）后，可以通过 URL 参数动态调整图片大小、质量、格式，无需预先准备多个版本：
<!-- 原始图片 -->
https://yourdomain.com/images/product.jpg
<!-- 自动转换为 WebP，宽度 400px，质量 80 -->
https://yourdomain.com/cdn-cgi/image/width=400,quality=80,format=auto/images/product.jpg
<!-- 在 HTML 中使用：srcset 由 Cloudflare 自动生成所有尺寸 -->
<img
srcset="
/cdn-cgi/image/w=480,q=80,format=auto/images/product.jpg 480w,
/cdn-cgi/image/w=800,q=80,format=auto/images/product.jpg 800w,
/cdn-cgi/image/w=1200,q=80,format=auto/images/product.jpg 1200w
"
sizes="(max-width: 767px) 90vw, 400px"
src="/cdn-cgi/image/w=800,q=80,format=auto/images/product.jpg"
alt="产品图"
loading="lazy"
width="400"
height="300">Google 图片搜索是巨大的流量来源。做好图片 SEO 可以让你的图片在搜索结果中排名靠前，带来大量访客。
文件名是 Google 判断图片内容的重要线索：
// ❌ 错误：无意义的文件名
IMG_2847.JPG
20240315_photo_final.jpg
image1.png
// ✅ 正确：包含关键词的描述性文件名
organic-green-tea-product.jpg
handmade-ceramic-mug.jpg
team-meeting-office-2026.jpg
// 小技巧：用连字符（-）而不是下划线（_）分隔单词
// Google 将连字符视为单词分隔符，但下划线视为单词内部字符alt 有三个目的：① 图片无法加载时显示的替代文字；② 供屏幕阅读器朗读给视障用户；③ 帮助搜索引擎理解图片内容。
// ❌ 错误：没有描述
<img src="product.jpg" alt=""> <!-- 空 alt 等于没写 -->
<img src="product.jpg" alt="图片"> <!-- 废话 -->
<img src="product.jpg" alt="我们的产品是最好的产品"> <!-- 关键词堆砌 -->
// ✅ 正确：准确、简洁、包含关键词
<img src="mug.jpg" alt="手工陶瓷马克杯，米白色带蓝色图案">
<img src="hero.jpg" alt="团队在现代办公空间开会讨论">
// 特殊：装饰性图片（没有实际内容），用空 alt
// 这样屏幕阅读器会跳过它，而不是朗读"图片"两个字
<img src="decoration-line.png" alt="">为产品页面添加 Product 结构化数据，可以让你的产品图片在 Google 搜索结果中以富媒体形式展示：
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "有机绿茶 - 特级礼盒装",
"image": [
"https://yourdomain.com/images/tea-product-1200w.jpg",
"https://yourdomain.com/images/tea-product-closeup.jpg"
],
"description": "来自高山茶园的手工采摘有机绿茶，精美礼盒包装。",
"sku": "TEA-001-GREEN",
"brand": {
"@type": "Brand",
"name": "YourBrand"
},
"offers": {
"@type": "Offer",
"url": "https://yourdomain.com/product/green-tea",
"priceCurrency": "CNY",
"price": "128.00",
"availability": "https://schema.org/InStock"
}
}
</script>创建专门的图片 sitemap，告诉 Google 你的图片在哪里。WordPress 的 Yoast SEO 等插件会自动生成。手动写法示例：
<?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://yourdomain.com/products/green-tea</loc>
<image:image>
<image:loc>https://yourdomain.com/images/tea-1200w.jpg</image:loc>
<image:caption>有机绿茶叶特级礼盒装产品展示</image:caption>
<image:title>有机绿茶礼盒</image:title>
</image:image>
</url>
</urlset><figure> 和 <figcaption> 给图片加说明文字。<!-- 在 <head> 中：社交媒体分享时使用的图片 -->
<meta property="og:image" content="https://yourdomain.com/og-share-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="产品图 - 有机绿茶特级礼盒">
<meta name="twitter:card" content="summary_large_image">假设你有一张从数码相机导出的原图 hero-original.jpg（6000×3375 像素，5,120 KB），要用作网站首页横幅。完整优化流程：
网站的最大容器宽度通常是 1200-1920 像素。原图 6000 像素是屏幕的 3-5 倍，完全多余。
# 使用 ImageMagick 调整到最大宽度 1920px
convert hero-original.jpg -resize 1920x1920\> hero-resized.jpg
# 结果：
# 像素：6000×3375 → 1920×1080（减少 90% 的像素数据）
# 体积：约 5,120 KB → 约 450 KB
# 优化率：约 91%# 压缩为 WebP 格式，质量 80（视觉上几乎看不出区别）
cwebp -q 80 hero-resized.jpg -o hero-1920w.webp
# 压缩为 AVIF 格式（体积更小，但浏览器支持略低）
# 用 ImageMagick 或 squoosh CLI
squoosh-cli --avif '{"quality":55}' hero-resized.jpg -o ./
# 结果对比：
# hero-resized.jpg (JPEG q=85): ~450 KB
# hero-1920w.webp (WebP q=80): ~120 KB ← 再减 73%
# hero-1920w.avif (AVIF q=55): ~55 KB ← 再减 54%
# 注意：质量参数要你自己针对每张图片微调，
# 但 q=55(AVIF) / q=80(WebP) / q=82(JPEG) 是很好的起点# 生成 3 个尺寸：手机 640w、平板 1280w、桌面 1920w
cwebp -q 80 -resize 640 0 hero-original.jpg -o hero-640w.webp
cwebp -q 80 -resize 1280 0 hero-original.jpg -o hero-1280w.webp
cwebp -q 80 -resize 1920 0 hero-original.jpg -o hero-1920w.webp
# 同样生成 AVIF 版本
squoosh-cli --avif '{"quality":55}' --resize '{"width":640}' hero-original.jpg
squoosh-cli --avif '{"quality":55}' --resize '{"width":1280}' hero-original.jpg
squoosh-cli --avif '{"quality":55}' --resize '{"width":1920}' hero-original.jpg<!-- 首屏图片 → 用 eager（而不是 lazy），确保快速显示 -->
<picture>
<source type="image/avif"
srcset="hero-640w.avif 640w,
hero-1280w.avif 1280w,
hero-1920w.avif 1920w"
sizes="100vw">
<source type="image/webp"
srcset="hero-640w.webp 640w,
hero-1280w.webp 1280w,
hero-1920w.webp 1920w"
sizes="100vw">
<img src="hero-1280w.webp"
alt="品牌故事主图：有机茶园晨景"
width="1920"
height="1080"
loading="eager"
decoding="async"
fetchpriority="high"> <!-- 告诉浏览器这是关键资源 -->
</picture>数码相机和手机拍出的照片通常是 4000-6000 像素宽，而网站容器一般是 1200-1920 像素。浏览器被迫下载一张比需要大 3-5 倍的图片，再缩放到实际大小。
解决：上传前将图片调整到最大显示尺寸的 2 倍（为 Retina 屏保留清晰度），即最大显示 1200px 的图，上传 2400px 即可。
在 CSS 中写 img { max-width: 100%; } 只能让图片在视觉上变小，但文件体积不变。
解决：配合 srcset 提供多个尺寸，而不是用 CSS 缩放一张大图。
alt 属性既影响可访问性（视障用户），又影响 SEO（图片搜索排名）。
解决：每个内容图片都写描述性 alt 文本；纯装饰性图片写空 alt（alt=""）。
首屏的主图如果设置懒加载，会让浏览器先加载其他低优先级资源，延迟图片显示。导致 LCP（最大内容绘制）时间恶化。
解决：首屏图片用 loading="eager" 和 fetchpriority="high"；首屏以下的图片用 loading="lazy"。
没有 width/height 时，浏览器不知道图片的宽高比，图片加载时会导致页面跳动（累积布局偏移 CLS）。
解决：始终写 width="800" height="600"（使用图片的原生像素值）。浏览器会根据 CSS 自动缩放，但宽高比得以保持，页面不会跳动。
照片类图片用 PNG 会导致体积过大；Logo/图标/透明图用 JPEG 会丢失透明通道且出现压缩痕迹。
解决：照片 → JPEG/WebP/AVIF；Logo/图标 → SVG/PNG/WebP（lossless）。
可控的损失。现代压缩算法（WebP、AVIF）非常智能，只丢弃人眼不敏感的信息。JPEG 质量 80、WebP 质量 75-80、AVIF 质量 50-60 是很好的起点——大多数用户看不出任何区别，但文件体积却能减少 50%-90%。关键是用 Squoosh 等工具对比"原图 / 压缩后"，找到临界点。
WebP：是——全球 98%+ 浏览器支持（Chrome/Edge/Firefox/Safari 14+），2026 年可以作为默认格式使用。AVIF：接近——约 93% 支持，Safari 16.4+ 加入。稳妥做法：使用 <picture> 元素同时提供 AVIF → WebP → JPEG 三个版本，让浏览器选最优。如果你的受众主要使用较老设备（如老版本 iOS），则以 WebP 为主，JPEG 为降级。
绝大多数可以。SVG 是矢量格式：① 可无限缩放（手机和 4K 屏都清晰）；② 体积通常比位图小；③ 可以用 CSS 设置颜色和动画；④ 对 SEO 友好（Google 能识别 SVG）。但：如果 Logo 包含复杂的照片质感、渐变或手工绘画效果，位图（PNG 或 WebP）可能更简单。对于纯文字和几何图形的 Logo，SVG 是不二之选。
推荐使用，免费方案足够大多数站点。Cloudflare 免费套餐提供 CDN 加速、Auto Minify、Polish 图片优化。好处：① 用户从就近节点下载图片，速度提升几倍；② 减少你服务器的带宽压力；③ 可以启用 Image Resizing（付费）实现按需裁剪和格式转换，无需手动生成多种尺寸。如果不想用 Cloudflare，WordPress 用户可以考虑 Jetpack 的 Site Accelerator（免费）。
不会，只要正确使用。Google 明确支持原生 loading="lazy" 属性，它能正确索引懒加载的图片。但有两个关键点：① 首屏的主图（LCP 元素）不要懒加载，要用 loading="eager" 和 fetchpriority="high"；② 确保懒加载不会导致"内容跳动"（配合 width/height 属性或 aspect-ratio CSS）。SEO 反而可能变好——因为页面加载速度更快，而速度是排名因素之一。
方案：① WordPress 用户：安装 ShortPixel 或 Smush 插件，运行 Bulk Optimize（批量优化现有图片库）；② 命令行用户：写一个简单的 bash 脚本，用 cwebp 或 squoosh-cli 批量转换；③ 手动少量图片：打开 Squoosh.app，拖入图片逐个优化；④ 优化前务必备份原始图片。经验：6000 像素的大图先批处理缩放到 1920 或 2400 像素宽，再压缩。
一般建议删除。EXIF 数据（相机型号、拍摄时间、GPS 位置等）每张图可能占 5-100 KB，累积起来很可观。隐私角度：上传带 GPS 信息的照片会泄露拍摄地点。但摄影博客可能希望保留相机型号、光圈、快门速度等信息——这种情况可以用工具仅删除 GPS 信息。大多数工具（cwebp、Squoosh、Photoshop 导出）都有"去除元数据"选项。
渐进式（Progressive）JPEG 分多次加载：先显示模糊版，然后逐次变清晰。基线（Baseline）JPEG 从上到下逐行加载。优势：① 用户更快看到内容（虽模糊）；② 文件体积通常略小。缺点：① 需要略多的 CPU 解码（可忽略）；② 在极慢的设备上可能让人觉得"一直在加载"。总体推荐：在 Web 上使用渐进式 JPEG。Photoshop 导出时勾选"连续"，ImageMagick 用 -interlace Plane 选项。
loading="lazy"；首屏主图用 loading="eager"。<img> 标签都包含 width 和 height 属性。product-green-tea.jpg 而不是 IMG_2847.JPG。alt 属性（装饰性图片用空 alt=""）。loading="lazy" 属性。（如果你用 WordPress，升级到 5.5+ 会自动启用）。width 和 height 属性。<picture> + media 属性实现。← 回到首页📚 推荐工具：Squoosh.app（压缩与格式转换）、TinyPNG（快速 PNG/JPEG 压缩）、ImageOptim（Mac 一键优化）、Cloudflare（CDN 加速与自动优化）、WebPageTest.org（测试页面加载 waterfall）、Lighthouse（Chrome 开发者工具内，综合性能报告）。