gifがブログ上で動かない

ブログ上でgifが動かず、ただの静止画になっています。

contentfulのリッチテキストでは日本語入力ができず、microCMSのリッチテキストでは日本語ができている様子を表示するために作ったのですが、確認したら動いていなくてびっくりしました。

理由はなにか

結論から言うと、gifが動かない理由は画像が最適化されていることが原因っぽいです（たぶん）。

このサイトはGatsby+Netlify+microCMSで管理しているのですが、Gatsbyの公式ドキュメントに以下のようにあります。

In Gatsby components and pages, you’ll want to import animated GIFs instead of using Gatsby Image because of the way it optimizes image data for the responsive picture element.

上の文章は「Gatsby Imageがレスポンシブ要素のために画像データを最適化するので、gifをインポートして使うことをオススメする」的な感じらしいです。

つまり、画像をレスポンシブでいい感じにするときに画像の情報が削減されて動きも一緒に削られてしまうんじゃないかなと思います。

最適化することによって動かなくなってしまうというのは本末転倒な感じがしますが、画像の軽量化のためには仕方ないのかもしれません。

解決策はないのか

なさそう......というか僕ではよくわからない感じでした。

調べた感じだとマークダウンでローカルファイルからgifを取得して～みたいな感じのサイトはあったんですが、僕のサイトはマークダウンじゃないし、そもそもマークダウンもあまりよくわかっていないため現時点の僕には無理っぽいです。

念のためそちらのサイトを載せておきます。

gatsbyのmarkdown記事でアニメーション画像を掲載する方法 | kyabe.net

現時点ではブログ上で動きませんが、gif画像をクリックすると動くgifは見れるのでしばらくはこれで行こうと思います。

ですが、若干不便なことに変わりはないのでいつかブログ上で動くようにしたいです。

何か良さげな方法をご存じの方いましたら是非教えてください。