我使用的设备是苹果全家桶。2020 年更换了 iPhone 12 之后,拍照默认就是 HEIC 格式的图片,体积比 JPG 小很多。可惜的是 WordPress 一直以来都不支持插入 HEIC 格式的图片。于是把照片从手机上传到电脑时,需要先转换成 JPG 格式,这样子体积就会大很多,然后再压缩大小。十分麻烦。
今天·登录控制台发现可以更新到 WordPress 6.7 了。看了一下 Feature List 发现有惊喜😄:
Support for HEIC images
HEIC image support improves media management by allowing high-quality, space-efficient images across all blocks.
https://wordpress.org/download/releases/6-7/
试着上传了一张 HEIC 照片,果然可以了!这下方便了。
不知道和webp比起来怎么样,我现在都是先转成wepb再上传。
压缩率应该差不多。但能少一次转换步骤肯定方便一些。
方便了不少。我之前都是截图照片。不过还好很少发图片。
Chrome 浏览器能看到 HEIC 图片?
看不到。firefox 也不行的。
🆗。明白了,看来只有 Safari 能看到。
Chrome的确看不到
以后还是决定继续用 JPG。
webp現在已經漸漸流行開了,heic可能也會因為ios而逐漸為人所接受。
学习了,谢谢分享
用处不大,毕竟chrome都不支持,不如avif
我看到评论区有人提到看不到HEIC图片,你选择继续用jpg。在litespeed cache插件中的“图片优化—[2]图片优化设置“中有一个选项,叫“优化原始图像 ”和“图片WebP替换”,我不知道有没有用,如果有用的话也许可以减少图片的体积,加快加载速度。
我并没有把图片上传到博客后台,原因是之前用typecho时图片和博客分离了(因为typecho没有自动备份文件功能),这个习惯保持到了现在。
但你的图片传到后台了,也许可以试试这个选项的作用如何。
啊,因为6.7刚更新,litespeed cache 还没有增加对 HEIC 图片优化的支持。
对了,我阅读了谷歌拦截我的邮件时提供的链接,我去邮件服务商那里增加了几条DNS记录,确保符合谷歌的校验要求。然后我重新回复了你的评论,这次的邮件没有提示我被拦截。麻烦你看看有没有收到。
能收到了。👍
WordPress 这次支持看上去主要是允许 HEIC 上传 + 后台自动转换成 JPG 格式,基本解决了能上传+访客能看的问题(解决了本地手动转码的问题)
我们之前也是遇到类似的问题,然后发现 Pagespeed 插件不太好用,制作了 WebP Server Go 和 WebP Cloud,前者是开源软件,安装在服务器上之后可以无缝将各种格式的图片转换/压缩成 WebP/AVIF/JXL 格式,然后根据访客浏览器支持情况输出体积最小的图片。
我们最近记录了一篇文章,https://blog.webp.se/webpcloud-heic-zh/
谢谢你们的研究。
不过,你们的文章里说“WordPress 这里的做法是在媒体库中支持了 HEIF 图片的上传,并且在后台转换成了 JPG 格式并输出”这好像不太正确。
因为我这篇文章里面放的一张图片是:
https://springwood.me/wp-content/uploads/2024/11/test-heic.heic
我去后台查看了一下,只有 heic 文件,并没有 jpg 文件。
所以我猜想你们发现的“转换”可能和其他因素有关。
好像不太对,我本地启动了一个全新的 WordPress,上传了 HEIC 图片,发现会被转换成 JPG,目录内容如下:
total 2.0M
-rw-r–r–. 1 33 tape 110K Nov 17 19:33 sample3-1024×683.jpg
-rw-r–r–. 1 33 tape 5.4K Nov 17 19:33 sample3-150×150.jpg
-rw-r–r–. 1 33 tape 237K Nov 17 19:33 sample3-1536×1024.jpg
-rw-r–r–. 1 33 tape 408K Nov 17 19:33 sample3-2048×1365.jpg
-rw-r–r–. 1 33 tape 12K Nov 17 19:33 sample3-300×200.jpg
-rw-r–r–. 1 33 tape 64K Nov 17 19:33 sample3-768×512.jpg
-rw-r–r–. 1 33 tape 527K Nov 17 19:33 sample3.heic
-rw-r–r–. 1 33 tape 618K Nov 17 19:33 sample3.jpg
上文中「https://springwood.me/wp-content/uploads/2024/11/test-heic.heic」这个应该是两件事情:
1. WordPress 支持上传 HEIC 图片了(所以才能正确上传到 /wp-content/uploads/2024/11/test-heic.heic 目录并可以被外界下载到)
2. WordPress 自动将 HEIC 图片转成对应的 JPG 格式,比如 /wp-content/uploads/2024/11/sample3.jpg ),但是不知道为啥你的例子中 https://springwood.me/wp-content/uploads/2024/11/test-heic.jpg 是不可被访问的(说明你的 WordPress 没有做对应的转换)
从代码中 https://github.com/WordPress/wordpress-develop/commit/471a619 也可以看到 HEIC 的支持情况是如下描述的:
Media: Automatically convert HEIC images to JPEG
Automatically create a JPEG version of uploaded HEIC images if the server has
a version of Imagick that supports HEIC. Conversion is done silently through
the existing `WP_Image_Editor` infrastructure that creates multiple sizes of
uploaded images.
This allows users to view HEIC images in WP Admin and use them in their posts
and pages regardless of whether their browser supports HEIC. Browser support
for HEIC is relatively low (only Safari) while the occurrence of HEIC images is
relatively common. The original HEIC image can be downloaded via a link on
the attachment page.
非常感谢你的进一步研究。答案已经很明显了
而我的服务器上并没有安装 imagick。imagick 只是 wordpress 推荐的组件,并不是强制。
喔喔,明白了,可能因为我们测试都是用的 WordPress Docker 镜像 (wordpress:latest) ,然后这个镜像里面可能自带了大量的包导致的。