WordPress GIF无法播放问题排查

这几天尝试使用GIF嵌入到Wordpress文章中来做一些简单的流程演示,但在使用过程中发现GIF出现无法播放的情况,本文用于记录该问题的排查过程。

GIF无法播放

我使用ScreenToGIF工具将屏幕操作录制为GIF动图,而后嵌入到Wordpress文章中,但在操作过程中我发现直接在文章内容中的GIF出现了无法播放的情况(即仅为一张静态图),而我设置为封面的GIF却可以正常播放:

文章中GIF

文章中我插入GIF的方式为直接从本地复制GIF文件,而后粘贴至Wordpress的古藤堡编辑器中,而后更新文章后却发现该GIF无法正常播放。

封面GIF:

我设置为文章封面的GIF却可以直接播放:

因此我首先排除了CDN上的缓存问题,因为从逻辑上将全局的图片缓存配置应该是一致的,同时我在阿里云CDN上并未进行特殊的图片Cache设置,而所有的图片都没有走外面的图床,直接从CDN走的数据,因此逻辑上不是CDN配置的问题。

GIF图片地址分析

在查看GIF图片的地址时我发现一个非常关键的问题:

作为文章封面的GIF路径地址直接为我上传的GIF原始名称。

而文章内部的GIF图片则出现了`-1024×707`的文件名后缀。

而我尝试直接访问不带该后缀的URL时,该地址可以正常访问到GIF动图:

https://blog.oyxf.top/wp-content/uploads/2024/01/jira-create-bitbucket-branch-1.gif

因此到这里其实已经问题非常明确了,Wordpress将我上传的原始GIF进行的不同缩略等级的压缩,而这种压缩机制不完善,仅将GIF第一帧保存为了不同分辨率的thumbnail,因此导致表面上看就是该文件后缀虽为gif,但实际仅为包含一帧的png文件,因此需要通过某种方式禁止Wordpress对GIF进行这种不合理的压缩。

最后我找到一个最直接的解决办法,即将GIF尺寸选择为全尺寸时,Wordpress将不对原始GIF进行任何压缩操作,因此GIF将保持原始的数据,可以正常播放:

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注