图片指南与教程

照片含有复杂的颜色和纹理，适合使用 JPEG、WebP 或 AVIF。标志、图标和示意图若有矢量源文件，可使用 SVG。截图、文字及需要精确保留像素的图形适合 PNG。格式改变并不等于画质提升，转换无

JPEG 通常采用有损压缩，适合颜色丰富的照片。PNG 采用无损压缩，适合截图、图形和需要透明度的素材。二者的用途不同，不能仅凭扩展名判断哪个更好。

AVIF 基于 AV1 图像编码技术。它可保存照片及其他栅格图像，并支持透明度及更丰富的颜色能力。是否能保留这些能力取决于具体编码器、工具和输出设置，不能只看文件扩展名。

SVG 使用路径、形状和文字描述图像，适合图标、标志、示意图及简单插画。JPEG、PNG 和 WebP 存储像素，更适合照片。把位图嵌入 SVG 容器不会使其自动变成可无限放大的矢量。

HEIC 常见于 Apple 设备拍摄的照片，可在较小体积下保存较高质量。它与 JPEG 不同，能否打开取决于设备、软件及编解码器支持。更改扩展名不会改变内部格式。

用浏览器网络面板检查图片传输大小及加载顺序。优先优化首屏大图和重复出现的商品图。记录处理前后的大小、页面加载表现和视觉效果，避免只根据一个质量数值判断结果。

HTML 的 loading=lazy 可让浏览器推迟加载远离可见区域的图片。loading=eager 表示正常加载；未指定时由浏览器按默认策略处理。延迟加载减少初始资源竞争，但不会减少图片本身的文

大幅首屏图片可能成为 LCP 元素，其请求发现时间、传输体积及解码过程都会影响主要内容出现。未预留空间的图片会引起布局移动，影响 CLS。图片相关脚本的工作量也应控制，避免阻塞交互。

图片 CDN 可缓存图片，并按请求生成尺寸、格式或质量变体。它减少用户与资源之间的传输距离，也可自动选择合适格式。不过，源图质量、缓存键和页面布局仍需要应用正确配置。

小屏幕加载桌面大图浪费带宽，高密度屏幕使用过小图片又会模糊。响应式图片让浏览器根据布局和设备选择资源，前提是提供真实的候选尺寸，而非几个相同文件的不同名称。

无损压缩允许还原相同的像素数据，有损压缩则永久舍弃部分信息。无损不等于文件没有压缩，也不保证所有元数据都被保留。有损格式可以非常清晰，但不能保证逐像素与原图一致。

真正的无损压缩可还原相同像素；没有明显视觉差异的有损压缩仍然丢失了部分信息。若要求逐像素一致，应选择无损流程。网页交付通常可以在视觉质量和体积之间做取舍。

动画包含多帧，每一帧都可能引入新的图像数据。尺寸、帧数、颜色数量及帧之间的变化都会影响大小。GIF 的有限调色板也不适合复杂照片或连续渐变。

邮件客户端的图片、CSS 和动画支持并不一致。部分用户会屏蔽远程图片，因此主要信息和操作入口应以可读文字提供，而不是把整封邮件做成一张长图。

WebP 对许多图片可以获得较好的质量与体积平衡，但不能保证每张图片都比 JPEG 小固定百分比。结果取决于图片内容、像素尺寸、编码器和质量设置。

同一图片在信息流、主页网格、封面和移动端可能采用不同裁剪。准备素材时，先确认发布位置和宽高比，再设置像素尺寸。平台展示方式会变化，发布前仍应查看目标平台的预览。

方形 1:1、纵向 4:5 和横向图片是常见发布形式。1080 像素宽可作为制作素材的常见起点，但实际支持和展示比例应在发布界面确认。内容主体应能适应网格中的再次裁剪。

桌面与手机可能显示封面的不同区域。将标志、文字和人物放在安全的中部，避免紧贴边缘。封面还可能被头像或界面元素覆盖，制作后必须检查实际主页预览。

频道横幅常以 2560 × 1440 像素画布制作。电视、桌面和手机展示的范围不同，完整画布可见并不意味着每个设备都能看到边缘内容。重要元素应放在中间安全区。

头像应清晰、背景简洁，并适应圆形裁剪。个人封面可从 1584 × 396 像素的宽画布制作，重要信息不要放在容易被头像或界面遮住的区域。最终以当前主页预览为准。

同一商品列表应保持一致的宽高比、留白和主体比例。拍摄或导出时预留裁剪空间，不要切掉产品边缘。原图应足够清晰以支持详情和放大，但列表页无需立即加载全部原始像素。

商品图片尺寸应符合实际主题的列表、详情和放大布局。统一宽高比及主体留白，避免商品网格高度不一致。高清原图可用于详情和放大，但缩略图应使用较小的交付尺寸。

主图用于直接展示实际出售的商品，背景、主体占比及可出现的元素受到平台规则限制。辅图可帮助解释细节、尺寸和使用场景。具体商品类别可能有额外要求，应在上传前核对当前卖家规范。

用白色背景纸或连续背景减少边界痕迹，保持照明均匀。让商品与背景适当分离，避免强阴影和颜色反射。三脚架有助于保持构图和清晰度，同一批产品应尽量保持相同角度和光线。

高分辨率且清晰的源图是有效放大的基础。只有把低分辨率图片放大，会得到更大的模糊像素。先确认产品纹理、标签和关键细节在原图中清楚可见。