欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
优化推广News

前端开发中,对图片的优化技巧有哪些?

发布时间:2017:12:13 13:11:46 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1469个文字,预计阅读时间4分钟
导语
A5创业网是国内领先的创业资讯和服务平台,提供权威的创业资讯和精准的品牌营销服务。以创业融资动态、创业学院、产品经理、人物访谈为内容驱动,与互联网创业者共同进步。

  作者:贺师俊

  链接:/question/21815101/answer/19410993

  来源:知乎

  1. 去掉无意义的修饰。嗯,我会瞎说吗?除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,设计本身是否需要用那么多图片?还是说可以更简洁?

推荐阅读:网站如何进行图片搜索优化

  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。这两个新格式都支持无损和有损压缩,都具有更良好的压缩比。当然这需要为不同的浏览器返回不同的图片,,增加了开发成本,也增加存储成本。不过你省了流量或者相同流量下改善了图片质量,提升了用户体验。你会如何取舍呢?对了,别忘了使用优秀的图片编码器及合适的参数。好的图片编码器,尤其是有损图片格式的编码器,能通过算法或手动调整,获得更高的压缩比。

  以下是普遍适用各种资源而不限于图片的优化手段:

  5. 使用data url。资源内嵌于CSS或HTML中,而不必单独请求。注意,多个地方都要使用的资源不一定适合用此优化方式,因为图片数据重复多了,增加流量。另外许多浏览器对data url有长度限制,注意资源的大小。

  6. 按照HTTP协议设置合理的缓存。具体的缓存策略(如永久缓存+重命名)、部署策略(如反向代理、CDN等)这里就不展开了。

  7. 使用支持SPDY的服务器。SPDY可认为是未来的HTTP 2.0的早期实现,Chrome、Firefox 13+、Opera 12+、IE 11+均已支持SPDY。SPDY和HTTP2可参考此中文演讲:/watch?v=r74RAcrc1ZA(请自备梯子),这里就不展开了。

  8. 资源的lazyload或postpone。(lazyload:延迟到其他资源下载完成后再加载,postpone:延迟到元素可见再加载。)目前基本上都要用脚本控制。未来HTML和CSS会增加相关的控制属性,见:Resource Priorities。

  9. 资源的prefetch。可用,见http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch。注意prefetch只是hint,Firefox会预取资源(如果网络空闲的话),而IE 9则是对该资源的hostname进行DNS预解析。如果你真的需要更强的控制,则得用脚本。注意:Chrome支持与prefetch相近但更进一步的,另外SPDY加入了与prefetch相近但语义不同的subresource link支持,这两个新特性我也没用过,有兴趣的可以尝试。

  图片的其他优化技巧如字体图标、CSS Sprites等,不过我不推荐。用字体图标不如用SVG。使用了SPDY和data url后,CSS Sprites完全没有必要用了。

  再有各种特定的图片问题,超出了一般优化的范畴。如许多手机浏览器有黑夜模式,其中有的浏览器允许定制黑夜模式;有的手机浏览器允许在用户开启不加载图片选项的情况下让开发者设置必须加载的图片(有点绕);又如许多手机浏览器有所谓云加速模式,即在服务器端对图片进行处理后再发送给客户端,应该返回怎样的图片给这些服务器有待研究和实践。

  10. 最后是responsive设计所需的图片优化,可能要产生多套不同大小和分辨率的图片,配合media query、以及srcset属性、picture元素、src-N等标准提案,这个话题比较大,尚未形成普遍认可的最佳实践,这里也不多展开了。

  以上。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:追逐算法更新何时了?

下一篇:太阳能路灯网站SEO执行方案

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信