ブログに写真沢山掲載すると遅くなるので改善した
このブログは実際に使ってみて良い物を紹介しているため、家にある物を撮りまくって大量の写真を載せています。自宅の光回線＋有線LANなら快適でも、外出先のスマホやタブレット（LTE接続）で見ると画像の重さで表示が遅くなってしまいます。
そこで、iPhoneで撮影した写真（約2.5MB）をパソコンで必要な範囲に切り取り、WordPressプラグイン 「Compress JPEG & PNG images」 で自動JPEG圧縮した上で、ピクセル寸法（解像度）を 400×400ピクセルの範囲（約21KB） にリサイズすることで、スマホでも劇的に速く表示できるように改善しました。
※本記事は2020年9月当時、当ブログをWordPressで運用していた際の実機改善記録です（当サイト自体は現在Astroによる静的サイト環境へ移行し、全画像のWebP配信で高速化していますが、写真のトリミング・ピクセル寸法最適化の基本原則は現在も共通です）。
- ブログの1記事あたりに写真を何十枚も掲載しており、スマホでのページ表示速度の遅さに悩んでいる方
- iPhoneで撮影した巨大な写真ファイルを効率よくリサイズ・軽量化したい方
- パソコン・スマホ・タブレットのどのOS環境でも互換性高く高速に表示させたい方
外出先のLTE回線でブログの表示が遅い問題
このブログは使ってみて良い物を紹介しているため、家にある物を撮りまくって載せています。
デスクトップのパソコンで作業していると、光回線＋有線LANの構成なのでストレスなく作業できます（参考：700Mbps越えIPoE方式とtransix導入で回線高速化）。
ところが、外出先でスマホやタブレットで見ると遅い……そう、外ではLTE接続なので、画像が重いと表示が遅いのです。
そこで、写真をどのように加工してブログへ掲載しているのか、改善した手順を紹介します。
写真を2.5MBから21KBまで軽量化する手順
iPhoneで撮影（元ファイル：約2.5MB）
iPhone（iPhone SE 第2世代・16:9設定）で撮影すると、ピクセル寸法（解像度）が 4,032ピクセル×2,268ピクセル（約914万画素） という巨大なファイルができあがります。
iPhoneで撮影したデスクトップパソコンの写真は、ファイルサイズにして 2.5MB にもなります。
切り取りと自動JPEG変換（810KB→86KB）
iPhoneで撮影した写真をデスクトップのパソコン（iMac 2014）で切り取り、まずは 800ピクセル×800ピクセル の範囲でリサイズします。
下の写真は、800ピクセル×574ピクセルに切り取ったものを掲載しています。
この切り取った写真をWordPressのエディタに直接貼り付けます。
実はこの時、WordPress側には PNGファイル（ファイルサイズ：810KB） として保存されます。アップロードする前に自分でJPEGにすればいいじゃないかと思うかもしれませんが、大量の写真を毎回手動でPNGからJPGに変換するのは面倒なのです。
そこで、WordPressのプラグイン 「Compress JPEG & PNG images」（現在の名称： TinyPNG – JPEG, PNG & WebP image compression）を使っています。
写真をWordPressに貼り付けてPNGファイルになると、このプラグインが自動的に圧縮されたJPGファイルに変換してくれます（プラグイン設定で透過なしPNGのJPEG変換を有効化している場合、PNGファイルの方が小さい時を除き自動でJPEG化されます。なお、無料枠は月間500圧縮カウントまでで、WordPressが自動生成する複数サムネイルサイズも対象に含めると消費が早いため、実際に使う画像サイズのみに圧縮対象を絞るのがコツです）。
これでJPEGファイルになり、810KBから86KB になりました。
解像度400px範囲へリサイズ（86KB→21KB）
86KBでも1記事に数枚なら問題ないでしょうが、1記事に何十枚も写真があればブログの描画時間に影響を与えます。
そこで、800×800ピクセルから 400×400ピクセルの範囲 にリサイズします。
すると、21KB まで圧縮できました（元の2.5MBの100分の1以下）。
下の写真は、400ピクセル×287ピクセルにリサイズしたものを掲載しています。
まとめ：全端末での互換性と表示速度を両立する
このやり方は、写真の細かな画質劣化を気にしない実用重視の人向けです。
美しい作品写真を掲載するなら、初めからPNG・JPEG・JPEG 2000・WebP・JPEG XRのどれでいくか、解像度をどうするかを厳密に設計する必要があります。
一方、このブログは「自分が使って良かった物を紹介する」ためのものなので、パソコン・スマホ・タブレットのどれでも見られないといけないし、Mac・Windows・Linux・iOS・iPadOS・Androidのあらゆる環境で正しく、かつ高速に描画されないといけません。
-
① iPhone撮影そのまま ：4,032×2,268 px（約2.5MB）
-
② 800px切り取り貼り付け（PNG） ：800×574 px（810KB）
-
③ プラグイン自動JPEG圧縮 ：800×574 px（86KB）
-
④ 400px範囲へリサイズ ：400×287 px（21KB）
iPhoneの元画像は総画素数が非常に大きいため、必要な部分を切り取っても視認性の劣化は少なくて済んでいます。なお、Web表示におけるファイルサイズを決めるのは印刷用のドット密度（dpi）ではなく ピクセル寸法（横×縦のpx数＝総画素数） と圧縮率です（画素密度 ppi が高い近年のスマホRetina画面などで細かい文字入りスクショをくっきり見せたい場合は、600〜800px幅を残してWebP圧縮すると軽さと鮮明さを両立できます）。掲載画像の基準を400×400ピクセル範囲にしたことで、外出先のスマホでもブログの描画が随分と快適になりました。
※追記：その後、主要ブラウザ（Safari・Chrome・Edge・Firefox）すべてで次世代画像フォーマット 「WebP（.webp）」 が標準サポートされたほか、当サイト自体もWordPressから Astroによる静的サイト（SSG）環境 へ移行し、現在は全画像をWebP形式へ最適化して配信することで高画質と超高速表示を両立させています。
写真掲載時のプライバシー防衛とMac一括変換の時短ワザ
ブログに自宅内で撮影した写真をたくさん載せる際は、ファイルサイズの軽量化とあわせて「個人情報・位置情報の保護」と「一括変換の時短手順」も押さえておくとさらに安全で快適になります。
-
スマホ撮影写真のExif位置情報（GPSデータ）削除を徹底する ：iPhoneやスマートフォンで撮影した元の画像ファイルには、撮影場所の正確な緯度・経度や撮影機種・日時などのメタデータ（Exif情報）が記録されています。元画像をそのまま公開すると 自宅や職場の住所が特定される危険 があるため、必ずExif位置情報を除去してからアップロードしましょう。
-
瞳・窓ガラス・金属面・配送ラベルへの「映り込み」確認 ：光沢のある家電やメッキ部品、車のボディ、ペットの瞳、背景の窓ガラス、段ボールの配送伝票には、撮影者の顔や室内の様子、住所・バーコードが小さく映り込んでいることがあります。切り取り加工の際に一度拡大して、個人情報が写り込んでいないか確認する習慣をつけると安心です。
-
Mac標準Finder「クイックアクション」による一括リサイズ＆Exif削除ワザ ：何十枚もの写真を1枚ずつ開いて変換するのが手間な時は、MacのFinder上で複数画像をまとめて選択し、「右クリック ＞ クイックアクション ＞ 画像を変換」 を使うと一瞬で一括処理できます。希望の画像サイズを選んだ上で 「メタデータを保持」のチェックを外して変換 すれば、リサイズ軽量化とExif位置情報の完全削除を数秒で同時に完了できます。