网站素材格式和分辨率怎么选，不能只看文件大小或原图尺寸。更稳妥的判断顺序是：先确认素材类型和是否需要透明背景，再确定展示区域的实际尺寸，最后根据手机版、桌面端和加载速度选择输出格式。一般照片优先考虑 WebP，兼容性要求高时保留 JPEG；需要透明效果的图形适合 PNG 或 WebP；Logo、图标和线稿优先使用 SVG；分辨率则按照“页面显示宽度 × 设备像素比”准备，而不是把所有图片都导出成超大尺寸。
网站照片、插画和图标，分别该选什么格式？
格式主要决定压缩方式、透明能力、细节保留和浏览器使用成本。选择时先看素材本身的特征，不要为了追求统一而让所有图片使用同一种格式。
| 素材类型 | 优先格式 | 适用原因 | 需要注意的问题 |
|---|---|---|---|
| 摄影照片、生活场景图 | WebP | 适合大量色彩和渐变，通常能在画质与体积之间取得较好平衡。 | 导出时仍要检查细节、锐度和压缩痕迹，不要只看后缀。 |
| 需要广泛兼容的照片 | JPEG | 工作流程成熟，适合不需要透明背景的普通照片。 | 反复编辑、反复保存会损失细节，文字和硬边图形容易出现压缩块。 |
| 透明背景插画、商品抠图、界面装饰 | PNG 或透明 WebP | 可以保留透明区域，适合叠加在不同背景上。 | PNG 的体积可能较大；透明 WebP 发布前要确认当前网站系统能够正常处理。 |
| Logo、线性图标、简单几何图形 | SVG | 由路径描述图形，尺寸变化时不容易出现像素化，适合响应式页面。 | 复杂照片不适合转成 SVG；上传前应清理无用路径和编辑信息。 |
| 需要进一步压缩的照片或插画 | AVIF | 在支持的发布环境中可作为较新的压缩选择。 | 要先确认后台、图片处理链路和目标浏览器是否支持，必要时准备备用格式。 |
简单筛选规则：照片先选 WebP；没有透明需求且兼容性优先时选 JPEG；必须透明时在 PNG 和透明 WebP 中比较实际体积与清晰度；Logo、图标和线稿优先 SVG。不要把 PNG 当成“高清格式”使用，也不要把 JPEG 当成所有素材的默认答案。格式本身不能补回原图已经丢失的细节。
确定图片格式后，手机版分辨率应该按什么尺寸准备？
分辨率要围绕图片在页面中的实际显示尺寸来定。CSS 中显示宽度是 360 像素，并不代表源文件只需要 360 像素宽；手机屏幕可能按更高的设备像素比显示。如果源图过小，图片放大后就会出现模糊、锯齿或文字边缘发虚。
可以使用这个判断方法：
- 先测量图片在页面中可能出现的最大显示宽度，例如卡片、文章正文、横幅或全屏区域。
- 再根据目标设备的清晰度准备源图。常见做法是准备接近显示宽度的版本，以及约两倍显示宽度的高清版本。
- 如果同一张图会在桌面端和手机版使用，分别考虑不同宽度的裁切或输出版本，不要只上传一张超大原图让所有设备下载。
- 发布后查看真实页面：图片是否在手机上清晰，是否被裁掉主体，加载是否明显变慢。若清晰度足够但体积过大，优先调整格式和压缩；若压缩后仍然模糊，再更换更大源图。
例如，一张图片在手机版卡片中以约 360 像素宽显示，可以准备接近 360 像素宽的普通版本，并视页面质量要求准备约 720 像素宽的高清版本。若桌面端会把同一素材展示到更宽区域，则应以桌面端的最大显示宽度重新计算，而不是沿用手机版文件。实际尺寸还要受到图片内容、文字细节、观看距离和网络环境影响。
不同网站区域的分辨率怎么取舍？
- 文章正文图：按照正文内容区的最大宽度准备。图片不会超过正文列宽时，没有必要按整张桌面屏幕导出。
- 手机版卡片图：以卡片在手机上的显示宽度为基准，并预留高清版本。主体应放在安全区域，避免不同裁切比例导致人物或商品被截断。
- 首页横幅和首屏大图：同时检查桌面端与移动端的裁切方向。若两端比例差异很大，最好准备两套构图，而不是简单缩放同一张图片。
- 商品图和作品展示图：优先保证主体边缘、细小文字和纹理清楚。若页面支持放大查看，源图还要按照放大区域的最大需求准备。
- Logo和图标：尽量使用 SVG；如果只能使用位图，则按照页面最大显示尺寸准备高清版本，并检查小尺寸下的线条是否过细。
图片比例、裁切和分辨率，哪个问题应该先处理？
如果图片比例不匹配，单纯提高分辨率并不能解决显示问题。比如原图是横向照片，手机卡片却要求接近竖向比例，直接压缩会让主体变窄，直接拉伸会变形，最常见的结果是页面用裁切方式隐藏两侧内容。因此，正确顺序是先确认展示比例，再确定裁切范围，最后生成对应分辨率。
当素材需要同时适配桌面端和手机版时，可以按以下方式处理：
- 主体位置容易被裁掉时，先重新构图或保留更宽的安全边距。
- 两端比例差异明显时，制作桌面版和手机版两张图，文字与人物位置分别安排。
- 背景可以自然延展、主体居中时，可以使用同一素材配合响应式裁切。
- 图片内含不可裁切的文字、价格或按钮时，不要把关键信息放在边缘，必要时将文字移到网页 HTML 中。
判断是否需要两套素材的依据很明确：如果同一张图在两个端口都能保留主体、文字和视觉重点，就可以通过尺寸变化完成适配；如果任何一端都会切掉关键信息，就应该调整构图或单独制作手机版素材。
图片已经放大变糊，应该先改格式还是换素材？
先区分“源图像素不足”和“压缩质量过低”。如果原图本身就小，放大后细节已经不存在，改成 WebP、PNG 或 SVG 都不能凭空恢复真实纹理，这时应寻找更大尺寸的原始素材，或重新导出设计文件。若原图尺寸足够但页面仍发糊，则检查是否被二次压缩、是否被错误拉伸、是否加载了手机版低分辨率版本。
可以按现象快速处理：
- 边缘出现明显方块：压缩质量可能过低，重新导出并适当提高质量，或更换更适合的格式。
- 文字和线条发虚：不要继续使用 JPEG，优先检查原图尺寸；图标和线稿应优先改用 SVG 或透明位图。
- 图片整体清楚但手机加载慢：分辨率可能超过实际显示需要。保留适合高清屏的版本，同时压缩体积并按设备尺寸提供不同文件。
- 图片被拉长或主体变形：检查 CSS 容器比例和裁切规则，而不是继续增大分辨率。
- 桌面端清楚、手机版模糊：检查手机版是否错误调用了小图，或者移动端源图宽度低于实际显示需求。
发布前怎样确认格式和分辨率选对了？
最终确认可以围绕“素材类型、展示尺寸、端口效果”进行。照片在页面中没有透明需求时，比较 WebP 与 JPEG 的清晰度和体积；有透明区域时，比较 PNG 与透明 WebP；Logo、图标和线稿则检查 SVG 在不同尺寸下是否仍然清楚。分辨率方面，打开桌面端和手机版，分别观察主体、文字、边缘和裁切位置。
如果图片清晰、比例正确、透明效果正常，且没有因为过大的源文件拖慢页面，就说明选择基本合适。最实用的方案不是统一规定“所有图片都用某一种格式”或“所有图片都做成两倍尺寸”，而是让格式服从素材特征，分辨率服从显示尺寸，输出版本服从桌面端与手机版的实际差异。
