WordPressの画像容量を軽くする方法|サイズ・圧縮・形式で表示を速くする
WordPressの画像容量を軽くするには、アップロードする前に「縦横のサイズを小さくする」「圧縮する」「合った形式を選ぶ」の3つを行うのが基本です。画像が軽くなると、ページが速く表示されやすくなり、サーバーの容量も節約できます。この記事では、それぞれのやり方と、アップロード前の準備を順番に紹介します。
画像の容量を軽くするポイントは「サイズ」「圧縮」「形式」の3つ
ホームページの表示が遅いとき、原因になりやすいのが画像です。とくに、スマートフォンやデジタルカメラで撮った写真をそのまま載せると、1枚の容量がとても大きくなることがあります。
画像の容量を軽くするポイントは、次の3つです。
- サイズ:縦横の大きさ(ピクセル数)を、表示される大きさに合わせる
- 圧縮:見た目をほとんど変えずに、データの量を減らす
- 形式:写真やイラストなど、画像の種類に合ったファイル形式を選ぶ
この3つは、アップロードする前にまとめて行うのが効率的です。WordPressに入れてから直すより、手間が少なくすみます。表示速度の全体的な見直し方は「WordPressの表示速度を改善するには?」で解説しています。
画像のサイズ(縦横のピクセル数)を表示に合わせて小さくする
画像の容量にいちばん大きく関わるのが、縦横のサイズです。たとえば、テーマや画像の貼り方によっては、ページの中で小さく表示される画像でも、大きなデータを読み込んでしまうことがあります。
まずは、その画像がページの中でどのくらいの大きさで表示されるかを確認しましょう。そのうえで、表示される大きさより極端に大きくならないように縮小します。高精細な画面でもきれいに見えるよう、表示される幅の2倍程度までにする、という考え方もあります。
なお、WordPressは画像をアップロードすると、いくつかの大きさの画像を自動で作ります。そのうち主な大きさ(サムネイル・中・大)は「設定」→「メディア」で確認できます。ただし、元の画像もサーバーに残ります。大きすぎる画像をそのまま入れ続けると、サーバーの容量も使っていくことになります。
画像を圧縮して容量を減らす(画質とのバランス)
圧縮とは、画像のデータを整理して、ファイルの容量を小さくすることです。縦横のサイズは同じままで、容量だけを減らせます。
圧縮には、次のような方法があります。
- 画像編集ソフトで、保存するときに画質を調整する
- 画像を圧縮できるWebサービスやアプリを使う
- アップロードしたときに自動で圧縮するプラグインを使う
圧縮を強くするほど容量は小さくなりますが、画質も下がります。商品の写真など、細かいところまで見せたい画像は控えめにするなど、用途に合わせて調整しましょう。圧縮したあとは、実際の画面で見て、文字や輪郭がぼやけていないかを確かめてください。
画像形式の選び方(JPEG・PNG・WebP)
画像には、いくつかのファイル形式があります。ホームページでよく使われるのは、次の3つです。
- JPEG(ジェイペグ):写真に向いています。色の多い画像を、小さな容量で保存できます。
- PNG(ピング):ロゴ、イラスト、図、画面の切り抜きなどに向いています。背景を透明にすることもできます。写真をPNGで保存すると、容量が大きくなりやすい点に注意しましょう。
- WebP(ウェッピー):比較的新しい形式で、同じ見た目でも容量を小さくしやすい形式です。現在のWordPressはWebPの画像も扱えますが、サーバーの環境によっては、うまく処理できない場合もあります。
迷ったときは「写真はJPEG、ロゴや図はPNG」と覚えておくと、大きく外すことはありません。WebPを使いたい場合は、まず数枚で試し、表示や自動で作られる画像に問題がないかを確認してから広げると安心です。
アップロード前の準備と、すでにある画像の見直し
画像をアップロードする前に、次の点を確認する習慣をつけましょう。
- 縦横のサイズを、表示に合わせて縮小する
- 圧縮して、容量を小さくする
- ファイル名を、内容が分かる半角英数字にする(例:shop-front.jpg)
- スマートフォンの写真は、撮影場所などの情報が残っていないか確認する
代替テキストは、画像をページに入れる前にメディアの画面で入れておくか、すでに入れた画像はブロックの設定で確認します。代替テキストは、画像が表示されないときや、読み上げ機能を使う人に向けた、画像の説明です。検索エンジンが画像の内容を理解する手がかりにもなります。
すでにたくさんの画像がある場合は、まずトップページや、よく見られるページの画像から見直すと効果を感じやすくなります。まとめて置き換えたり、自動で圧縮する機能を使ったりする前には、「WordPressのバックアップ」を取っておきましょう。
よくある質問
画像を小さくすると、ぼやけて見えませんか?
表示される大きさに合わせて縮小すれば、見た目はほとんど変わりません。縮小しすぎたり、圧縮を強くしすぎたりすると、ぼやけることがあります。
1枚あたり、どのくらいの容量にすればよいですか?
表示する大きさや画像の内容によって変わるため、一律の基準はありません。同じ見た目のまま、できるだけ小さくすることを目指しましょう。
すでにアップロードした画像も軽くできますか?
できます。元の画像を縮小・圧縮して入れ直す方法や、プラグインで一括して圧縮する方法があります。作業の前にはバックアップを取ってください。
まとめ
WordPressの画像容量を軽くするには、縦横のサイズを表示に合わせ、圧縮し、写真やイラストに合った形式を選びます。アップロードの前に準備する習慣をつければ、画像を載せるたびにサイトが重くなることを防げます。すでにある画像は、よく見られるページから順に見直していきましょう。