前端图片相关优化方法总结

  1. 图片压缩：
　　个人常用的是这个网站：https://tinypng.com
　　原理是使用智能的无损压缩技术来减少图片文件的大小，通过智能的选择颜色的数量，减少存储的字节，但是效果基本是和压缩前一样的
  1. 限制图片大小：图片不要超出实际需要的图片大小太多，以免因图片太大造成加载慢和资源浪费的问题
  2. 转成 base64：小于4kb的图片可转成base64内联在文件中，以减少 HTTP 请求的数量
    注：图片转base64的后占用内存会比原图大，但是经过代码压缩后和原图的大小基本差不多
  3. 使用icon-font代替图标图片，使图标可以像字体一样使用(可通过样式调节大小和颜色、背景等)
    注：图标文件会比较大，废弃的图标记得清除，以免图标文件太大造成项目庞大的问题
  4. 精灵图(雪碧图):把零散小图片集成成一张大的图片，以背景图的方式来使用，以减少 HTTP 请求的数量，避免网页的延迟
　　缺点：使用麻烦，需要合成图片，并设置标签背景图的位置和大小等样式
　　适用场景：适用于零散的较小的简单图标
  1. 图片懒加载：当图片出现在可视区域中时才被加载
　　适用场景：一个页面有很多图片，但是首屏出现的图片就只有一小部分图片

posted on 2019-03-19 21:46  湘陵  阅读(179)  评论(0)  编辑  收藏  举报

导航