彩云Sky

ui设计,交互设计,用户体验,前端工程师

微信公众号:彩云译设计(caiyunyisheji)

解决图片缩小变模糊的问题

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


图1,问题图片

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

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


图2,苹果官网截图

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

再查看源码发现,


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

发现显示的图片大小也并非特别大,比问题图片的尺寸还要小一些,但是依然清晰,说明大小方面也有更好的解决方案才对。然后检查了下苹果官网的图片资源,发现其原图是非常大的,只是代码实现了其缩小尺寸,故猜...

2016-05-17

© 彩云Sky | Powered by LOFTER