一张1600像素宽的照片放进800像素宽的栏里，普通屏幕上正好，换成高像素密度的屏幕就糊了。浏览器排版用的是CSS像素，不是文件像素：容器宽800个CSS像素时，高密度屏上一个CSS像素对应2×2个物理点，浏览器手上只有800个样本要铺满1600个点，中间全靠插值补，细节就是这么丢的。图片像素够大网页上还是模糊，多半就差在这一步：按目标宽度乘2准备图。
文件像素是图片里真实存在的点数，改大小改的是这个。CSS宽度是设计稿上写的显示宽度，决定图在页面上占多宽。设备像素比是这两者的桥梁，普通屏是1，高密度屏常见2和3。
页面不会因为你上传了1600像素宽的图就把它显示成1600宽，它只按CSS宽度排版。反过来说，你手上的图够不够，要拿CSS宽度乘像素比去算，不能拿文件的像素数直接和设计稿上的数字比。
把图按100%打开，看文字边缘和细小纹理。边缘发毛发虚、但颜色是对的，多是取样不足；边缘出现彩色杂点或块状台阶，多是压缩过度。两种现象经常一起出现，先看边缘的形态，再看平坦区有没有色块。
还有一个快办法：把同一张图的两个版本并排贴在页面上，缩放到实际显示大小再看。屏幕上看不清的差别，放大到400%才看得见，那种差别对读者没有意义。
第一步，打开图片改大小，点「打开图片」把原图放进来，左侧工具栏切到「修改尺寸」。
第二步，选择尺寸保持「自定义」，图片宽度填目标CSS宽度的两倍。栏宽800就填1600，栏宽600就填1200。
第三步，图片高度留「原比例」，不要手填数字。手填会把比例改掉，图会被拉扁。
第四步，压缩等级从「不压缩」改成80。两倍像素的原图直接上线，体积通常拦不住；改完还是大，就再走一轮JPG图片压缩。
第五步，允许图片变形保持不勾选，点「开始处理」，保存后用页面的实际显示宽度复查一遍。
装饰性背景、大面积色块、图标这类，一倍图就够了，多出来的像素只增加体积。真正需要对细节的是文字截图、产品细节图、图表和带小字的宣传图。
也要看图片占多大面积。整屏宽的主图值得两倍，侧栏里200像素宽的小图，一倍半就已经超过大多数人的分辨能力。
两倍图会不会让页面变重？
会。所以两倍图要配压缩，压缩等级80上下通常能把体积压回一倍图的1.2到1.5倍，肉眼几乎看不出差别。
为什么设计稿上看着清楚，上线就糊？
设计稿是矢量渲染，文字和图形没有像素上限；图片是栅格，样本数固定。两者的清晰度来源不一样。
图片像素够大网页上还是模糊，还有别的原因吗？
有。容器宽度不是整数、浏览器做了非整数缩放，也会插值。这种要改布局，不是换图能解决的。
图片像素够大网页上还是模糊，问题多半不在文件，而在CSS宽度和像素比这两个数没对上。先算目标宽度乘二，再把压缩等级压到80，最后按实际显示尺寸验收，三步就能定位。
扫描二维码关注
解锁更多压缩功能
咨询客服
QQ客服咨询
微信客服咨询
联系电话
