网站素材格式和分辨率，应按展示用途、清晰度要求和加载速度一起选择。图片优先考虑照片与透明图形的差异：照片可用 WebP 或 JPEG，透明图形可用 PNG 或 WebP，标志和图标适合 SVG；视频则要同时看封装格式、编码和播放设备。分辨率不宜一味选最大，应匹配页面实际显示尺寸，并为高像素密度屏幕留出余量。

图片格式怎么选：先看内容，再看透明和兼容性

JPEG 适合照片、渐变和色彩丰富的画面，兼容性好，但不支持透明背景。压缩质量降低时文件会变小，也更容易出现色块或细节损失。若页面需要兼顾加载和观感，可先把 JPEG 与 WebP 的实际效果、体积放在目标尺寸下比较。

WebP 可用于照片和带透明通道的图片，通常能在清晰度与文件体积之间取得较好平衡，适合多数现代网站。AVIF 压缩效率也较高，适用于对体积敏感的图片，但编码、处理和旧环境兼容性需要纳入项目测试。若访问环境较复杂，可保留 JPEG 或 PNG 作为兼容方案，而不是只提供一种新格式。

PNG 支持透明，适合需要清晰边缘的界面截图、简单插图和透明素材；对于照片，文件往往会比有损格式更大，不宜默认使用。SVG 是矢量格式，放大通常不会出现像素化，适合 Logo、图标、线条图和简单插画；照片、复杂纹理则不适合用 SVG 替代。若素材来自外部，使用前还应确认授权范围，格式本身并不代表可以免费商用。

分辨率按显示尺寸确定，不按“越大越清晰”确定

网页中的 CSS 显示尺寸与图片像素尺寸不是一回事。比如图片在页面上显示宽度为 300 CSS 像素，在设备像素比为 2 的屏幕上，准备约 600 像素宽的图片，通常能避免明显模糊；设备像素比为 3 时，可考虑约 900 像素宽的版本。实际应以页面布局、素材内容和目标设备为准，并非每张图都必须提供最高倍率版本。

只上传一张超大图片，再用网页缩小显示，通常会让移动端也下载不必要的数据。更合适的做法是按常见展示宽度准备不同尺寸，并让页面根据屏幕条件选择资源。图片的高度也要与裁切比例匹配：横幅、卡片封面和头像即使像素总量相近，比例不同也可能导致主体被裁掉。

视频格式与清晰度：播放兼容优先于单纯追高

常见网页视频会使用 MP4 容器搭配 H.264 编码，设备支持面较广；WebM 可作为另一种选择，具体能否采用取决于目标浏览器、播放器和编码流程。MP4 是容器名称，不等同于视频编码；选素材时要确认文件实际编码是否能在网站目标环境中播放。需要更广覆盖时，可准备兼容版本并在主要设备上测试。

分辨率根据播放器尺寸和内容细节确定。页面主体较小、以讲解为主的视频，不必仅因素材标有“超清”就上传大体积版本；全屏播放、画面含细小文字或细节丰富时，更高分辨率才更有价值。还要同时检查码率、帧率和音频：分辨率相同的视频，压缩设置不同，清晰度和文件体积也会不同。移动网络用户较多时，提供多档清晰度通常比强制所有人加载最高规格更实用。

按页面场景筛选的实用顺序

先确认素材是照片、透明图形、矢量元素还是视频，再确定页面实际显示尺寸和裁切比例；随后选择能够满足展示质量的格式与分辨率，最后在常见手机、桌面浏览器和网络条件下检查效果与加载表现。若素材放大后仍清晰但加载过慢，应优先调整尺寸或压缩，而不是继续提高分辨率；若文字边缘、透明边界或主体细节受损，则应更换格式或提高输出质量。

用于网站的免费素材也要单独核对许可条款，尤其是商用、署名、修改和再分发要求。完成授权确认后，再按页面用途选择尺寸与格式，能避免把“可下载”误当成“适合上线”。