彩云Sky

今天在做网页设计输出图片时发现当图片缩小会发生严重的锯齿问题，如

图1，问题图片

开始的解决方案是在不影响布局排版的情况下，尽可能的放大些图片，但是发现还是不能很好的满足需要。

然后联想到苹果官网也有很多类似的手机模型图片,如

图2，苹果官网截图

发现他们的图片是清晰的，说明并不是因为把图片斜切会造成锯齿，应该还有更好的方案。

再查看源码发现，

图3，苹果官网前端源码测试图

发现显示的图片大小也并非特别大，比问题图片的尺寸还要小一些，但是依然清晰，说明大小方面也有更好的解决方案才对。然后检查了下苹果官网的图片资源，发现其原图是非常大的，只是代码实现了其缩小尺寸，故猜测解决方案为软件输出大尺寸图片，然后用代码做尺寸适配，应该可以解决此问题。

然后在本地我写了一个demo进行测试。

我用photoshop输出2张尺寸相差50%的图片，然后将大的那张用代码缩小50%，使得他们在显示尺寸保持一致，看看显示效果。

图4，测试代码

图5，对比图。图片被压缩了看不清效果，请见：https://huangmenglong.lofter.com/post/1dee18c9_aff1c76

其中左边为输出大图缩小后的显示效果，与右图输出时缩小一半但保持原尺寸的显示效果相比较，要清晰很多，且没有产生锯齿。

总结：

在设计网页时，如果遇到输出效果图模糊的情况下，可以选择输出多倍图，代码适配的方式来解决锯齿问题！

还有个疑问就是，为什么同样的图片显示尺寸，在同一个机器屏幕下，用软件缩小会变得模糊，而用css缩小却不会模糊？