😎

GitHubでGIFが表示されない時はcamoが原因かも

2023/05/15に公開

GitHub

この記事について

GitHub上のREADME内でGIFアニメを表示させようとしたところ、その内のいくつかが表示されませんでした🫠
この記事では、表示されなかった原因と、正しく表示させる方法について調べたことを共有したいと思います。

GIFが表示されない

Gyazoを利用してGIFを作成し、README内に以下のように記述します。

README.md

![hoge](https://gyazo.com/hogefuga.gif)

これで大体のGIFは正しく表示されましたが、中には表示されないものもありました。
ネットワークタブで確認してみると、https://camo.githubusercontent.com/で始まるURLへのリクエストでエラーが発生していました。

このリクエスト先のサブドメインであるcamoとは何のことでしょうか。

camoとは

匿名化されたURLについて - GitHub Docs
GitHubでは、camoという画像プロキシ🍡を通して外部サービスでホストされている画像をリクエストしているようです。

Proxying User Images | The GitHub Blog
camoはもともと、混合コンテンツの警告を回避するために使用されていたようですが、現在ではプライバシー保護やパフォーマンスの観点でhttps画像もプロキシするようになった、とのこと。

そのパフォーマンスの観点の一つとして、camoにはプロキシ画像のファイルサイズを制限できる機能があります。
CAMO_LENGTH_LIMITという環境変数を設定することで、プロキシするcontent-lengthの上限値を設定できます。

CAMO_LENGTH_LIMITのデフォルト値は5MB。
camoプロキシから外部サービスへリクエストした画像のファイルサイズがCAMO_LENGTH_LIMITで設定した値を超えていた場合には、camoからクライアントへContent length exceededというテキストが返されるようになっていました。

server.js 一部抜粋

content_length_limit = parseInt(process.env.CAMO_LENGTH_LIMIT || 5242880, 10);

if (content_length > content_length_limit) {
  srcResp.destroy();
  return four_oh_four(resp, "Content-Length exceeded", url);
}

GitHubでもデフォルト値を使用しているようで、試しに5MB(5,242,880 bytes)をオーバーする 5,341,568 bytes のGIFを指定してみたところ、やはりエラーとなってしまいました。

確認してみたところ、今回表示されなかったGIFのサイズはすべて5MBを超えていました。
原因はファイルサイズだったようです🫥

ファイルサイズの違い

Gyazoの無料プランでは、撮影できる動画の時間は7秒までです。
同じ7秒間なのになぜファイルサイズが異なるのか、動画について詳しくなかったため知らなかったのですが、解像度やフレームレート、圧縮率、動きや色の変化が激しいなど、要因は様々あるようです。

今回表示されなかったGIFも、ページ全体を映すために大きくスクロールしているものばかりでした。

GitHubへのアップロード

ファイルのアタッチ - GitHub Docs
GitHubに直接アップロードした場合には、10MBまでの画像ファイルを扱うことができ、camoプロキシによるcontent-lengthの制限を受けることも無いようです。

ただし、GitHubのissueやマークダウンファイルの編集モードを開き、画像ファイルの添付、その後に取得できるURLをエディタにコピペするという…なかなかの手間が掛かってしまいます👿

VSCode上で編集する場合の注意点

VSCodeではデフォルトでマークダウンのプレビュー機能が利用できます。
Markdown Preview Github Stylingという拡張機能を使用することで、プレビューをGitHubのスタイリングに合わせるように変更してくれるため、READMEなどのマークダウンファイルの編集がとても捗ります。
ただし、画像を表示させる際には注意が必要です。

当然ではありますが、VSCodeのプレビュー上では、外部リソースへのリクエスト時にcamoを通さないため、5MB以上の画像ファイルであっても、何の問題もなく表示されてしまいます。
GitHub上で正しく表示されるかどうか、その都度プッシュして確認、なんてことはできないと思うので、非常に面倒ではありますが、コミット前にGitHubのマークダウンプレビュー機能を利用して、当該リソースがcamoの制限に引っかかるかどうか、事前に確認することをオススメします。

もしくはいっその事、全てGitHubへアップロードしてしまってもいいかもしれません💪

おわりに

今回表示されなかったGIFは16MBもあったため、キャプチャ範囲を狭めた上で撮影し直し、Gyazoから落として、圧縮した上でGitHubに直接アップロードしました🫠

そもそも、ファイルサイズやパフォーマンス面を考慮すると、GIFではなく動画を利用したほうが良いのかもしれません。
実際に、先程の16MBのGIFも、MP4としてダウンロードすると8MBにまで抑えられました。

今回調べたことにより、GitHubへアップロードすることで、10MBまでのGIFを扱えるということはわかりました。
ただ、Gyazoを利用するメリットは、取得したURLを共有したり、そのままsrc属性に指定できる簡便さにあると思っているので、色や動きが複雑で動画の方が適しているもの以外は、なるべく5MBを超えないように撮影し、URLを貼り付けるだけで済むようにしようと思います。

ここまで読んでいただき、ありがとうございました。
この記事が誰かの役に立てば幸いです👍