前端经典面试题 | 性能优化之图片优化

🖥️ 前端经典面试题专栏：前端经典面试题 | 性能优化之图片优化
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

---

目录

一、回答点

二、深入回答

如何对项目中的图片进行优化?

常见的图片格式及场景

---

一、回答点

base64格式 选择正确图片格式 CDN加载..

二、深入回答

如何对项目中的图片进行优化?

• 不使用图片,大多数时候我们用到很多修饰类图片,这类图片可以直接使用css代替
• 在移动端,不需要去加载原图,使用CDN去进行加载,计算出适配屏幕的宽度,请求相应裁剪好的图片
• 小图使用base64格式
• 将多个图标文件整合在一张图中
• 选择出正确的图片格式:
  • 能够显示WebP格式的浏览器尽量使用WebP格式.它具有更好的图像数据压缩算法,能带来更小的图片体积,缺点:兼容不太好

常见的图片格式及场景

• BMP => 无损 支持索引色同时也支持直接色的点阵图.没有对数据进行压缩,文件体积较大
• GIF => 无损 采用索引涩的点阵图. LZW压缩算法对其进行编码.文件小,并且支持动画及透明.但是GIF只支持8bit的索引色,它适用于 对色彩要求不高且文件提交小的场景.
• JPEG => 有损 采用直接色点阵图.优点:采用了直接色,得益于更丰富的色彩,它非常实用来用存储图片,与GIF对比,它不适合用来存储企业的Logo 线框类的图.有损压缩会导致图片模糊,而直接色的选用,会导致图片体积比GIF大
• PNG-8 => 无损 采用 索引色的点阵图. 它是一种较新的图片格式,PNG8是非常好的GIF格式的替代者,尽可能的去使用PNG8而不是GIF.在相同情况下,PNG8有更小的体积.并且它支持透明度的调节.除非需要动画的支持 否则没理由使用GIF.
• PNG-24 => 无损 采用直接色的点阵图.优点: 压缩了图片数据,同样效果的图片 PNG24格式的大小比BMP小得多,当然比JPEG GIF PNG8大得多.
• SVG => 无损矢量图. SVG图片由直线和曲线及绘制它们的方法组成.当放大SVG图片时,看到的还是线和曲线.不会出现像素点.SVG图片放大时 不会失真,非常适合用来制作logo等..
• WebP => 新图片格式(谷歌开发),WebP同时支持有损和无损压缩,采用 直接色的点阵图.从名字看 由Web而生,相同质量的图片WebP具有更小的体积.如果能降低每一个图片的文件大小,将大大减少浏览器和服务器之间的数据传输量,从而降低访问延迟,提升体验.只有谷歌浏览器和Opera浏览器支持WebP格式.前文说到了,兼容性不太好.
  • 在无损压缩情况下,相同质量的WebP图片,体积要比PNG小25%上下.
  • 在有损压缩的情况下,具有相同精度的WebP图片,体积要比JPEG小30%上下