页面 · 功能Image optimization · WebP · 响应式图片
图片优化
图片优化就是在保持画质的同时缩小文件体积，让网站更快打开的工作。
就像寄快递时挑选和物品大小相符的箱子。箱子太大，又重又慢。
再详细一点
用手机拍的原图一张就有好几MB。直接上传的话，用手机流量浏览时页面会空白好一阵。
转换成WebP · AVIF这类轻量格式，再按屏幕尺寸挑选合适的图片发送（响应式图片），同样的画质会轻得多。
页面下方的图片等顾客滑到时再加载（延迟加载），首屏就会更快。再给每张图片写上说明它是什么的文字（alt），对图片搜索和无障碍访问都有帮助。
网站图片用JPG、PNG、WebP还是AVIF格式？
现在的基本做法是：照片优先用WebP或AVIF，Logo和图标用SVG。web.dev指出，WebP和AVIF通常比老格式（JPG · PNG）压缩效果更好，建议尽量使用。
不过使用AVIF时，最好同时准备JPG等备用文件，以防有些环境无法读取。动图GIF体积非常大，换成短视频文件会轻得多。
很多时候格式并不需要您亲自选择。根据网站的制作方式，有的会内置一种功能：您上传JPG后，系统会根据顾客的浏览器自动转换成WebP或AVIF再发送。
需要透明背景的Logo、或去掉背景的商品照片，用WebP代替PNG保存，往往也会更轻。
表格可以左右滑动查看
| 格式 | 适合用在哪里 | 需要注意什么 |
|---|---|---|
| JPG | 各类照片 | 在哪里都能打开，但通常比WebP更大 |
| PNG | 需要透明背景的图形、屏幕截图 | 用于照片时体积会大幅增加 |
| WebP | 网站上的大部分照片 | 支持透明背景，大多数浏览器都能读取 |
| AVIF | 想进一步压缩体积的照片 | 最好同时准备备用文件（JPG等） |
| SVG | Logo、图标、简单图形 | 不适合用于照片 |
网站图片应该多少像素、多少KB？
没有适用于所有照片的固定数字，要以“在页面上实际显示的尺寸”为准。如果照片会铺满手机屏幕宽度，像素大约是该宽度的两倍，在高清屏上通常也足够清晰。
手机相机拍的原图横向常常超过4,000像素，直接上传到网站的话，大部分像素都是浪费。大横幅照片和小的列表缩略图，最好分别准备不同尺寸。
同一张照片的文件大小也会因格式和压缩程度而相差很大，与其死记数字，不如边看页面上的画质边决定，这样更准确。首屏照片尤其要做轻，第一印象才会快。
按行业来看，咖啡馆 · 餐厅的菜单图库、美发店的前后对比照、网店的商品详情图，最容易变得沉重。先从这些地方检查，效果最明显。
响应式图片和懒加载是什么？
响应式图片是指把同一张照片准备成多种尺寸，只发送适合顾客屏幕的那一张。使用HTML的srcset · sizes设置，浏览器就会根据屏幕大小挑选合适的文件。
懒加载是指页面下方的照片，等顾客滚动到附近时才加载。不过web.dev提醒，首屏可见的照片，尤其是最大的那张，不要设置懒加载，否则首屏反而会更慢出现。
给每张照片写明宽 · 高尺寸（width · height）也很重要。如果没有尺寸信息，照片一出现文字就会被往下推，顾客可能会点错原本想点的按钮。
懒加载和响应式图片大多在制作阶段就设置好，您每次上传照片时不需要另外操作。不过，上线前请让制作公司确认一次是否设置正确。
自己上传照片时怎么压缩？
如果网站的管理后台会自动压缩，直接上传原图也没关系。否则，养成按下面的步骤先压缩一次再上传的习惯就可以了。
像咖啡馆新菜单、工坊作品这类经常上传的照片，先定好一个标准会很方便。把和制作公司约定的标准记下来，比如“图库照片横向多少像素、WebP格式”，每次按同样方式压缩即可。
手机拍的照片有时还会保存拍摄地点等信息。如果压缩工具有删除这类信息的设置，建议打开，对文件大小和个人隐私都有好处。
- 01确认要放的位置（横幅、图库、商品列表）在页面上显示多大。
- 02用修图App或免费的图片压缩工具，把横向尺寸缩小到适合该位置。
- 03保存格式选WebP，画质调低到肉眼看不出差别的程度。
- 04把文件名从“IMG_1234”改成像“yeonnam-cafe-handdrip.webp”这样能看出内容的名字。
- 05上传后用手机流量（关闭Wi-Fi）打开页面，确认速度。
图片描述（alt）和文件名怎么写？
图片描述就像用一句话告诉看不到图片的人“这张图片想传达什么”。Google搜索中心把图片描述视为图片信息中最重要的属性，并提醒不要硬塞关键词。
装饰用的花纹或背景这类没有内容的图片，描述留空才对。W3C的图片指南也说装饰性图片的描述值应留空。反过来，像菜单牌这样带文字的图片，要把上面的文字原样写进描述里。
文件名也是一条小线索。Google建议用简短、能说明内容的文件名，而不是“IMG00023.JPG”这样的名字。用英文小写字母和连字符（-）命名，地址不会乱码，管理起来也方便。
- 好的例子：“一块草莓奶油蛋糕，上面有三颗新鲜草莓”
- 不太好的例子：“蛋糕好店 蛋糕推荐 蛋糕订购”（只堆砌关键词）
- 不太好的例子：“图片1”、“image”（没有任何信息）
图片优化常见的错误有哪些？
最常见的错误是：上线时很轻，运营过程中原图一张张堆积，网站又变慢了。图库 · 评价 · 商品经常增加的店铺尤其容易出现。
把菜单、价目表、活动通知只用一张图片上传也是问题。不仅体积大，搜索引擎和读屏软件也读不到其中的内容。
速度只要把网址输入Google PageSpeed Insights等免费工具就能查看。如果结果中出现与图片相关的改进建议，先从照片下手即可。
如果图库照片有几十张，也可以先只显示几张，点击“查看更多”时再加载其余照片，首屏会轻很多。
图片优化要问网站制作公司哪些问题？
照片在上线后还会不断增加，请把首次上传和日常运营分开考虑，问清下面四个问题。
- 在管理后台上传的照片，会自动压缩并转换格式吗？
- 是否使用按屏幕尺寸挑选照片发送的响应式图片？
- 上线前会测量首屏照片的加载速度吗？
- 上线后也会检查沉重的照片有没有增加吗？
举个例子
- 一家咖啡店把30张原图直接放进相册，结果手机上首屏打开很慢；把图片缩小、转换格式后，页面就轻快了。
只需确认这些
- 是否没有直接上传原图
- 每张图片是否都有说明文字（alt）
- 价目表 · 菜单是否没有只用一张图片来展示（也要用文字写出来，搜索引擎才读得懂）
我的店需要吗？
图片多的店铺（餐厅 · 工坊 · 美发店）尤其重要。
在ISSYMO
在搜索 · AI曝光基础设置中，我们会把图片压缩成WebP格式，并为每张图片写好说明（alt）。在维护管理订阅中，我们每月检查页面速度，看看有没有过大的图片。
了解SEO · GEO常见问题
参考资料
最后更新于