网站建设前端大虾在处理图片时,是不是有时也苦恼有没有更好的解决方案。这里优网科技小优介绍几种简单易懂的技巧给大家。
1. 去掉无意义的修饰。除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。的优化就是压根不要图片。所以在优化之前要做的,首先是确认设计,设计本身是否需要用那么多图片?还是说可以更简洁?
查看效果:http://www.uweb.net.cn/cn/anli/guanfangmenhu/1883.html
2. 不用图片。直接使用CSS替代图片来实现修饰效果吧!如半透明、边框、圆角、阴影、渐变等,在当前主流浏览器中都可以用CSS达成。将来CSS滤镜得到广泛支持后,还可以做到alpha混合、正片叠底等各种效果。
3. 使用矢量图替代位图。对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持SVG了,所以可放心使用!
4. 使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。基本上,内容图片多为照片之类的,适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。而GIF基本上除了GIF动画外不要使用。且动画的话,也更建议用video元素和视频格式,或用SVG动画取代。除了这些格式之外,Chrome、新版Opera、Android 4+支持WebP格式,IE 9+、IE mobile 10+支持JPEG XR。这两个新格式都支持无损和有损压缩,都具有更良好的压缩比。当然这需要为不同的浏览器返回不同的图片,增加了开发成本,也增加存储成本。不过你省了流量或者相同流量下改善了图片质量,提升了用户体验。你会如何取舍呢?对了,别忘了使用优秀的图片编码器及合适的参数。好的图片编码器,尤其是有损图片格式的编码器,能通过算法或手动调整,获得更高的压缩比。
优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站、APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。
责任编辑:优网科技
版权所有:http://www.uweb.net.cn (优网科技) 转载请注明出处