ブログに載せる画像を軽くする｜表示される大きさに合わせて縮小する

記事に写真を貼っていったら、ページの表示がもたつくようになった。
ブログやサイトを自分で運用していると、そのうち一度は当たる場面かと思います。

原因の多くは、撮ったままの写真をそのまま置いていることです。
スマートフォンで撮った写真は1枚あたり数MBあることも珍しくなく、それを1記事に5枚も貼れば、それだけで十数MBになります。

表示される大きさより大きい画像は、そのぶんが無駄になる

見落としがちなのは、画像の「実際のピクセル数」と「画面で表示される大きさ」が別物だという点です。

たとえば本文の幅が700pxくらいのブログに、長辺4000pxの写真を貼ったとします。
画面上ではきれいに縮んで表示されますが、読み込まれるデータは4000px分のまま運ばれています。

見えていない情報のために通信を使っている、という状態です。※高解像度ディスプレイ向けに表示幅の2倍程度を用意する考え方もあります。それでも4000pxは過剰なことが多いです。

記事1本分をまとめて処理する

1枚ずつ調整するのは続かないので、記事を書き終えたタイミングで、使った画像をまとめて通してしまうのが楽です。

• 記事で使う画像をまとめてドラッグ＆ドロップする
• 長辺のピクセル数と、目標のファイルサイズを決める
• 「まとめて縮小」を押して、結果の一覧で削減量を確認する
• ZIPで受け取り、展開してから記事に使う

長辺は1280px、目標サイズは500KBあたりから試すと、本文用の写真としては扱いやすい大きさに収まります。※アイキャッチなど大きく表示する画像だけは、別の設定でもう一度通すほうが無難です。

WebPに変換するという選択肢

出力形式でWebPを選ぶと、見た目をあまり変えずにさらに小さくできることが多いです。

写真を多く扱うサイトでは、この差が積み上がると効いてきます。※掲載先のサービスやテーマがWebPを受け付けるかは事前に確認してください。対応していない環境では表示できません。

なお、縮小した画像は撮影時のメタデータ（EXIF）が取り除かれます。
自宅で撮った写真をそのまま公開してしまう、といった事故を避けやすくなるので、公開用の画像を通しておく意味はそれなりにあるかと思います。

毎回きっちり最適化しようとすると続かないので、書き終わったあとに画像フォルダごとまとめて通す、といった運用だと手間と効果のバランスが取りやすいかもしれません。