前端图片的优化

图片常见的类型有 jpg,jpeg,png,svg,bmp,glf,webp

jpg

jpg是一种有损的基于直接色的图片格式。jpg不适合icon,logo。适合场景:色彩丰富的网络图片

png8

png-8无损压缩,png-8不支持动画,主要用于小图标或颜色简单对比强烈小的背景图片

png24

无损压缩,是基于直接色的位图格式。文件比较大,应用情景:对品质要求极高的图片

优化方式

延时加载

图片的懒加载就是在图片过多的适合,把后续的图片延迟一会,等需要的时候在进行加载。

渐进式图片加载

渐进式图片的意思式在高品质图片加载完成之前会显示低画质的版本,低画质版本由于化值低,压缩率高,尺寸小,加载很快。会优先被下载

图片的预加载

如果页面中起了很重要的作用,想快点火来,那么可以使用link-rel-proload预加载

webp

webp的图片比传统图片少很多

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 本文是转载文,内容不错,分享给大家,希望能对大家学习前端有所帮助 性能优化是前端开发必不可少的一环,而图片优...
    强哥科技兴阅读 258评论 0 1
  • 1. 前端常用图片格式 2. 文件特点概述 2.1 JPEG jpeg图片格式的设计目标,是在不影响人类可分辨的图...
    LichFaker阅读 1,191评论 0 3
  • 近期一直在和朋友讨论前端性能优化的问题,着重聊到了图片相关的优化,就想着总结记录一下。 说到图片优化主要从两个点入...
    鱼羊30阅读 463评论 0 0
  • 前端性能优化--图片 图片格式的选择 JPEG 有损压缩,高品质的压缩方式。图片体积压缩至原有体积的50%以下时,...
    背书包的小儿郎阅读 563评论 0 0
  • 选择合适的图片格式 JPEG JPEG 是由 Joint Photographic Experts Group 所...
    安之素年阅读 592评论 0 1