分享笔记:

怎么在WordPress使用AVIF图片

上传或生成AVIF图片

如果你想要让网站可以加载迅速,需要做一系列的优化,其中之一就是优化图片,像生成WEBP格式图片,因为网站图片是最占内存和影响加载速度的元素之一。

现在网站图片使用的格式主要是以下三种:

  1. PNG:透明图片无压缩
  2. JPG:通常是压缩的普通图片
  3. WEBP:最常用的网站压缩图片格式

不过我们今天不说这三个格式,而是一种全新的图片格式,AVIF图片

怎么在WordPress使用AVIF图片

什么是AVIF格式图片?

其实AVIF早在18年就出现了,只是 WordPress 在 6.5 版本才支持。

我们可以简单的认为AVIF是WEBP的升级版,它们两都是使用的视频文件的压缩算法来压缩图片,不过WEBP的色彩深度被限制在 8 bits,而 AVIF 支持完整的 10 和 12 位色彩深度,具有高动态范围 (HDR)。

AVIF 的压缩方式也不一样,它用 “chroma-from-luma”。大多数图片格式亮度和色彩饱和度是分开储存的,但 AVIF 是利用亮度通道来调整色彩通道的,所以AVIF的图片更小更精确。

AVIF图片和浏览器的匹配度

AVIF图片和现在市面上大多数浏览器都是匹配的,所以你不用担心这点。

avif格式图片浏览器匹配

怎么上传或生成AVIF图片?

上传AVIF图片到WordPress前,你得确保你的网站服务商有开Imagick 或 GD,不然上传不了AVIF的噢!

通过Squoosh生成

Squoosh是我常常使用的一个转换图片格式网站,它是完全免费的,而且操作很简单。

另外它们还有一个官方转换avif网站,效果也可以。

通过插件转换

任何事情都必不可少的插件,像 ShortPixel Image Optimizer,每转化一次要 1 credit,也就是说是付费的。

shortpixel avif

通过Cloudflare提交AVIF

CloudFlare的内容交付网络(CDN)支持AVIF文件,具体操作你可以看看他们的官方文献。

通过HTML提交AVIF

<picture>
<source srcset="imagen.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="imagen.jpg" alt="">
</picture>

你可以通过上面的 HTML 代码提交AVIF图片。

为笔记评分

平均评分 0 / 5. 摘星者: 0

有疑问?留个言吧!

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
?>

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors