画像サイズ容量の削減方法について
【概要】
fwに限らず一般的にWebサイトでは画像や動画のデータサイズは小さいに越したことはないとされています。
アーティストのWebサイトのMVやデザイナーや写真家のWebサイトのポートフォリオ等、一部の例外はありますが、一般的には小さければ小さいほど良しです。
「小さい」の基準値ですが、100〜350前後のKBに収めれば、Googleを始めとする検索エンジンに文句を言われることは少なくなります。
文句言われるの嫌だ！という表示スピード命の方は100KB以下が目標ですがそこまでやらんでも…という気もします。
どう文句を言われるのか確認したい方はこちらでどうぞ。
Googleページスピードインサイド：https://pagespeed.web.dev/?hl=ja
リリース前にある程度画像サイズを制御することは、fwのインフラリソースの節約にも繋がりますのでぜひよろしくおねがいします。
以下のようなシステム仕様が背後では動いていますが、念のため画像サイズ容量は削るように心がけてください。
- サーバでの容量制限
- fw（WP）での容量制限および自動リサイズ
- jpg/pngのWebP化
【方法】
1.まずはリサイズする
特段トリミングする必要がない画像（例：pixta等で新規購入した横長の画像）の場合、元画像のサイズは横幅：4000px前後であることが多いようです。
4000pxを表示しなければならないケースはまずありませんし、多少引き伸ばされてもそう劣化することはありませんので、まずは画像の横幅を2000pxに指定しリサイズします。
※ちなみにGoogleは2000pxもいらん！1200pxでOKだ！と言っていますが、一応保険をかけて2000pxにしました。
リサイズに関しては、Macならプレビューを使っても構いませんし、iMage Tools等のアプリを利用しても構いません。
大抵のツールで、横幅を指定すれば自動で等倍リサイズしてくれるはずです。
プレビュー利用例：https://inakadaisuki.com/picturedata_compression/
iMage Tools利用例：https://pc-karuma.net/mac-resize-multiple-images/
2.次に圧縮する
1のリサイズ時に解像度と合わせて調整する方法もあるのですが、便利なようで分かりづらく調整しづらいので、リサイズだけを行った画像を圧縮する方法をご紹介します。
画像の圧縮とは、平たくいうと、jpgやpngのデータ要素から、ぱっと見たくらいでは分からない要素は全部捨てることです。この圧縮という作業を行わない限り、きれいな画像をKBレベルまで軽くすることはできません。一昔前の技術ですと、圧縮フェーズで大幅に画像が劣化したのですが、昨今はそれなりにきれいに圧縮できます。
ImageOptimというツールが非常に使い勝手がよいのですが有料のため、自分たちで圧縮したりお客様に案内する際にはWebサービスになりますがTinyPNGにぶん投げるというのが楽だと思います。大っぴらに推奨するのが気が引けますが…
TinyPNG利用例：https://compass-media.hatenablog.jp/entry/how-to-compress-pictures
3.細かいトリミングはfw内で行う
丸くトリミングするためにあらかじめスクエアにすることも、中央位置を変えることも、オーバーレイをかけることも、ある程度のレベルまではfwで行うことが出来ます。
圧縮済の単一画像を複数のコンテンツ・ページで汎用的に利用することが、最も効率のよい画像利用方法ですので、ぜひ活用してみてください。
