ようやく Blogの画像圧縮を自動化した

こんにちは。Blogの画像圧縮を自動化した岩崎です。

サイトの表示速度を改善するため、TinyPNGなどで画像の圧縮をすることが多いと思います。

当サイトでも TinyPNGを利用していましたが、Photoshopプラグインでチマチマと書きだしていました。
おまけに 1画像 3サイズを作成しているので、なかなかの手間。1記事に 5つの画像があると、15画像を吐き出す必要があります。

…ということで、ようやく Web APIに切り替え、バックグラウンドでの自動圧縮機能を作りました。
特定ディレクトリにオリジナルの画像をアップすると、自動的に 3サイズの画像が 圧縮されて吐き出されます。便利!

ようやく Blogの画像圧縮を自動化したのメインビジュアル
ようやく実現した自動圧縮。リサイズ機能も盛り込むことで、Blogの運用工数を大幅に削減!!

作り始めたら、サーバ側のセットアップも含めて 2時間程度。
やろうやろうとは思っていたのですが、着手までにずいぶんと時間がかかってしまいました。

本当は、サーバの画像を定期的に監視して、圧縮されていない場合を次々と圧縮していく…という実装をしたかったのですが、APIのコール制限数やエラー処理なども考え、いったん現状の形に落ち着きました。


オリジナルの画像も管理されているので、仕組みとしては TinyPNG以外の選択肢も可能です。
今後 TinyPNGがバージョンアップして圧縮率が上がった場合でも、再度コマンドを叩くだけで解決。リサイズするサイズも自由自在なので、リニューアル時の工数も削減できそうです。

コンテンツの資産を活かすために

Googleが推進する AMPプロジェクト。

画像に限らす、こういったオリジナルの情報も管理して、変換することでページを作成する…という運用(仕組み作り)が、今後はキモになりそう。
記事を書くときに HTMLを書いてしまう(記事にノイズを混ぜてしまう)という運用は、今後はかなり厄介になっていく気がしています。

AMPや Instant Articlesへの対応もそうですが、しっかりと作り込んだ HTML記事だと逆に変換が難しい面があります。書きやすくて、変換もしやすい、例えば Markdownなどで記事を管理すれば、AMPなどの新フォーマットへも対応がしやすいです。

今後、よりチャネルが複雑になっていくのは明白ですし、コンテンツへの接触の仕方も多種多様になっていくことを考えると、あまりコンテンツの記事内に HTMLなどを組み込むのはマイナスになりそう。
資産となるコンテンツを、よりスマートに管理していくことで、将来的に仕様が変化しても コンテンツとしての資産を活かしやすいかな…と感じる今日この頃です。

関連記事:

Webサイトを立ち上げて 20周年を迎えました!!

Webサイトを立ち上げて 20周年を迎えました!!のメインビジュアル
まったく Blog最優先ではなかった 2016年