WordPress等でブログを運営していたときには、同システム内でブログ画像を保存しておりましたが、Hugoで始動したここのサイトは、imgur.comで保存することにしました。

imgurに画像を保存するデメリット・メリットと利用について

デメリット

デメリットから先に申します

• imgurのサービス終了もしくは、サーバダウンした際には、画像が全て表示されなくなります
• ログインしないで匿名でアップロードした場合、削除が困難
• アップロードの制限がある（20MB)

メリット

• 無料で簡単アップロード出来る
• アップロードした画像は自動で最適に圧縮される
• EXIF情報はアップロードした際に消去される
• jpgやpngファイルの拡張子を.webpに変えるだけでwebp画像が利用できる
• リンク先のidにThumbnail Suffixの一文字を付けるだけで、解像度やサムネイル画像となる
• アルバムを作成でき、移動しても、リンク情報が保持される
• 保存した画像は、リサイズ・切り欠き・回転の編集ができる
• 動画をGif形式に出来る
• APIが利用できるので、自作プログラムでも利用できる
• vscodeやchromeの機能拡張で簡単にアップロードが出来る

このように、デメリットを承知の上で利用すると、メリットが多く便利に利用できるので、このサイトでは、当面、ブログ画像をimgurで管理する方針です

具体的な利用

ブログでの画像管理って、今まではローカルに保存する場合、imageOptimやjpegminiなどで圧縮・リサイズしたり、WordPressでは自動で圧縮出来るプラグイン入れたりしてたと思いますが、imgurを利用すると、

1. 画像をアップロード
2. リンクのURLが表示されるので、コピペ

これだけで、EXIF削除、最適化圧縮された画像で表示出来ちゃうんです。

さらに応用すると、Macのアプリやその他プログラムの機能拡張を利用した場合、

1. 画像をアップロードした時点で、クリップボードにURLがコピーされる
2. ペーストしたリンクファイル名の拡張子をwebpにするだけで、webpが利用
3. サムネイルも必要であれば、わざわざリサイズする必要なくリンクのIDに（ｓ,ｂ,ｔ,ｍ）のいずれかの一文字を付加するだけ

1.に関しては、HackMDを利用したことがある人なら、わかるのではないでしょうか？？
Macのアプリだと、スクリーンショット撮っただけで、アップロードされクリップボードにURLがコピーされて便利すぎ。

すでにブログで利用している画像で説明すると、
これが通常のjpg画像 (4xZrSVx.jpg)

これを、webp形式に (4xZrSVx.jpgを4xZrSVx.webpに変更するだけ)

さらに、サムネイル表示 (4xZrSVx.webpを4xZrSVxm.webpに変更するだけ)

このように、一つのリンクファイル名から様々な形式の画像を利用できるので、めちゃ便利じゃないですか！

応用

このサイトでは、通常の画像挿入Markdown形式では、さらに速度向上のため、Render hooksを利用して、lazyやasyncのコードを挿入しています。

また、WebP画像については、ブラウザによっては表示されなかったり、レスポンシブル用に読み込む画像形式や画像サイズを変えたりしたかったので、imgur用のショートコードを作成しています。
ショートコードを使った画像

ショートコード作成に当たっては、下記の記事を参考にさせていただきました。

ショートコードでは、VSCodeやNetlifyCMSでプレビュー出来ないのが難点なので、render-imageのhooksの利用も考えたのですが、render-imageはサイト全体に画像挿入Markdownコードが適用されてしまうので、今後の事を見据えて、あえてrender-imageにはあまり手を加えずショートコードにした次第です。