ブログに載せる画像を整える
記事に画像を入れるとき、スマホで撮った写真をそのまま貼ると、1枚で5MBを超えることがあります。ページの表示が遅くなり、読者は本文を読む前に離脱します。ここではどの大きさにするかとどう軽くするか、そして公開前に消しておく情報までをまとめました。作業はすべてブラウザの中だけで完結します。
まず、長辺の大きさを決める
画像は「本文が表示される幅」より大きくしても、読者の画面では縮んで表示されるだけです。表示されない分の情報量は、そのまま読み込み時間になります。
| 用途 | 長辺の目安 |
|---|---|
| 記事本文に挟む写真・図 | 1200px |
| 記事の先頭に置く大きな画像（アイキャッチ） | 1600px |
| 本文の途中に小さく添える図 | 800px |
| SNSでシェアされたときの画像（OGP） | 1200×630px |
横幅の広いディスプレイや高精細画面を考えても、本文用は1200pxあれば足ります。「大きいほど綺麗」ではなく、表示される幅の1.5倍あたりが上限と考えてください。
整える4つの手順
-
大きさを揃える
長辺を指定して縮めます。縦横比はそのまま保たれ、指定より小さい画像は拡大されません（引き伸ばすと粗くなるため）。複数枚をまとめて処理して、記事内の画像の大きさを揃えておくと、後から差し替えるときも楽になります。
画像 リサイズをひらく → -
軽くする
縮めたあとに圧縮すると、見た目をほぼ保ったまま容量が半分以下になります。品質80%前後が、写真では劣化を感じにくい境目です。圧縮前と圧縮後のサイズが1枚ずつ表示されるので、どこまで落とすかを見ながら決められます。
画像 圧縮をひらく → -
形式を選ぶ
写真はJPG、透過が必要な図はPNG、どちらもWebPにするとさらに軽くなります。WebPは現行のブラウザがすべて対応しているので、ブログ用途では基本的に使って問題ありません。逆に、読者が保存して他のソフトで開く前提の画像（配布素材など）はJPGのほうが確実です。
WebP JPG 変換をひらく → 画像 圧縮（WebP出力）をひらく → -
公開前に、写真の記録を消す
スマホの写真には撮影場所の緯度経度が埋め込まれていることがあります。自宅や職場で撮った写真をそのまま公開すると、場所が特定できてしまいます。記録を消しても画質は1ピクセルも変わりません。
EXIF 削除をひらく →
よくある質問
写真はどこかに送られますか？
送られません。読み込みから加工・ダウンロードまで、すべてブラウザの中だけで処理します。公開前の画像を外部のサービスへ預ける必要はありません。
WordPressが自動でリサイズしてくれるのでは？
表示用の小さな版は自動で作られますが、元の画像もそのまま保管されます。5MBの写真を100枚アップロードすれば容量を消費し、バックアップも重くなります。入れる前に整えておくほうが、後から効いてきます。
圧縮するとどのくらい画質が落ちますか？
品質80%なら、写真では並べて比べても違いが分かりにくい程度です。文字が入った図や細い線のイラストは劣化が目立ちやすいので、その場合は品質を90%前後に上げるか、PNGのまま使ってください。
ファイル名は日本語のままでいいですか？
日本語のファイル名はURLで符号化されて長くなり、共有時に読みにくくなります。英小文字とハイフンで内容が分かる名前（例: aomori-apple-farm.jpg）にしておくと扱いやすく、画像検索でも内容が伝わります。