图片性能优化

Review

  1. 2021/09/06
  2. 2022/04/07
  3. 2024-10-05 07:42

[!Summary]

  1. 选择合适的图片格式：优先 WebP, AVIF
  2. 使用响应式图片：根据设备屏幕尺寸和分辨率加载不同大小的图片
  3. 懒加载图片

一、Introduction #

  1. 图片压缩：tinypng.com
  2. 图片分割：图片过大，进行分割批量下载，通过CSS拼接完整的图片
  3. 图像宽高
  4. 精灵图
  5. 点九图

常用图片格式对比 #

图片格式压缩比色彩透明度特点使用场景
JPEG高好不支持有损压缩，适用于照片等色彩丰富的图片大多数图片场景
PNG-8中等较好支持无损压缩，支持256色图标、简单图形
PNG-24低非常好支持无损压缩，支持真彩色需要高质量透明度的图片
GIF中等较差支持支持动画，支持256色简单动画、图标
WebP高非常好支持谷歌开发的新格式，压缩比高，支持多种特性需要浏览器支持，适用于各种场景
AVIF非常高非常好支持新一代图像编码格式，压缩比远超WebP需要浏览器支持，适用于对图片质量要求高且带宽有限的场景

推荐使用场景 #

  • JPEG: 适用于照片、自然景物等色彩丰富的图片，压缩比高，文件体积小。
  • PNG-8: 适用于图标、简单图形等色彩较少的图片，支持透明度。
  • PNG-24: 适用于需要高质量透明度的图片，如LOGO、按钮等。
  • GIF: 适用于简单的动画，如加载动画、表情包等。
  • WebP: 广泛适用于各种场景，压缩比高，支持多种特性，是未来发展趋势。
  • AVIF: 适用于对图片质量要求极高且带宽有限的场景，如高清图片、视频截图等。

选择建议 #

  • 优先考虑WebP和AVIF: 它们是目前压缩比最高、支持特性最丰富的图片格式，但需要浏览器支持。
  • 对于不支持WebP和AVIF的浏览器: 可以使用JPEG或PNG作为备选。
  • 根据图片内容选择格式: 如果图片色彩丰富，可以选择JPEG或WebP；如果图片色彩较少，需要透明度，可以选择PNG或WebP。
  • 平衡质量和文件大小: 在保证图片质量的前提下，尽量选择压缩比高的格式。

点九图实现 #

点九图的主要作用：

  • 自适应拉伸： 图片可以根据内容的多少自动拉伸，而不会变形。
  • 固定内容区域： 图片中的重要内容区域不会被拉伸变形。
  • 减少切图工作量： 一个点九图可以适应多种尺寸，减少了设计师和开发者的工作量。

border-image-slice 用法 https://www.cnblogs.com/deajax/p/13518497.html

此属性指定 top, right, bottom, left 边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字。如果省略第四个数字/百分比，它和第二个相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。

border-image-source:url(border.png);
border-image-slice:27 27 27 27;
border-image-width:27px 27px 27px 27px;
border-image-outset:27px 27px 27px 27px;
border-image-repeat:repeat;
  • 设置border-image-slice属性: 这个属性的值表示从图片的四个边分别切除多少像素。例如：border-image-slice: 20px 20px 20px 20px; 表示从四个边各切除20像素。
  • 设置border-image-repeat属性: 这个属性控制切片如何重复。
  • 设置border-image-width属性: 这个属性设置边框的宽度，即切片显示的宽度。
  • 设置border-image-outset属性: 这个属性控制边框图像超出边框的距离。

Reference #