做网站时图片的分辨率是多少？这个问题我见过太多小白在后台崩溃。昨天有个朋友拿着张4K原图直接拖进后台，结果页面加载转圈转了半分钟，用户早跑光了。这时候你问他图片多大，他说分辨率是300dpi。我差点把咖啡喷屏幕上。

咱们得先扯个淡，很多人被印刷行业的“300dpi”洗脑了，觉得屏幕上也得这么高。大错特错。屏幕是发光的，靠的是像素点，不是墨点。做网站时图片的分辨率是多少？其实对于Web端来说，DPI这个参数根本没人读，浏览器只认像素（px）。你就算把DPI改成600，只要像素尺寸不变，在电脑屏幕上看着还是一样，反而因为文件头信息冗余，可能让某些老旧解析器卡壳。

我上个月给一个做高端家具的客户做改版，他坚持要用单反直出的RAW转换图，单张50MB。我拦都拦不住，结果上线第一天，跳出率高达85%。为什么？因为首屏加载太慢。后来我强行让他用TinyPNG压缩，再配合WebP格式，图片体积降了80%，画质肉眼几乎看不出区别，但加载速度从3秒变成了0.8秒。这就是真实教训。

所以，做网站时图片的分辨率是多少？答案很简单：看你展示的区域多大。如果你的Banner是1920像素宽，那你上传的图片宽度最好就在1920px左右。千万别搞个4000px宽的图去填满它，浏览器会自动缩小，但加载的数据量没变，纯属浪费带宽。

这里有个细节很多人忽略。现在手机屏幕像素密度高，也就是Retina屏。如果你只按1倍图做，在iPhone上会模糊。这时候你需要准备2x甚至3x的图片。比如你的设计稿是1000px宽，那你应该切出一张1000px和一张2000px的图。然后通过CSS的background-size或者HTML的srcset属性来适配。别傻傻地让浏览器去缩放大图，那是对性能的犯罪。

还有，格式选什么？JPEG还是PNG？如果是照片类，必须上WebP，现在主流浏览器都支持，压缩率比JPEG高25%以上。如果是透明背景的图标或简单图形，用SVG，矢量放大不失真，代码量还小。PNG只留给那些必须用传统格式兼容的老旧项目，或者那种颜色极少的简单插画。

我有个做电商的朋友，之前一直用PS导出一堆JPG，后来换了Photoshop的“导出为WebP”功能，配合自动化工具批量处理。结果服务器带宽费用直接砍了一半。这就是技术红利，你不吃，别人吃了。

别再去纠结那个所谓的“72dpi”了，那是上世纪90年代的概念。现在做网站时图片的分辨率是多少，核心在于“像素尺寸”和“文件体积”的平衡。你要做的是在保证视觉清晰的前提下，把文件压到最小。

最后说个扎心的。很多设计师喜欢把图片放在本地调试，本地加载快，觉得没问题。一上线，CDN没配置好，或者图片没压缩，直接崩盘。一定要在真机上测，用Chrome的Lighthouse跑一下分，看看图片加载是不是拖了后腿。

记住，用户没耐心等你加载。每一KB的优化，都是在帮你的转化率省钱。别等数据难看了，才想起来问做网站时图片的分辨率是多少。那时候，黄花菜都凉了。