zoukankan      html  css  js  c++  java
  • 前端图片相关优化方法总结

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

  • 相关阅读:
    【转】Oracle中的decode在mysql中的等价实现
    Perhaps you are running on a JRE rather than a JDK
    iisapp -a命令出现 :此脚本不能与WScript工作
    HDU 6070 线段树
    HDU 1853 MCMF
    Codeforces 7C 扩展欧几里得
    HDU 5675 智慧数
    Lucas 大组合数
    bzoj 2179 FFT
    POJ 1155 树形背包
  • 原文地址:https://www.cnblogs.com/chenxiangling/p/10561653.html
Copyright © 2011-2022 走看看