スマホの写真をそのまま載せていませんか？｜ホームページの画像サイズの目安と縮小のしかた

ホームページの表示が遅い原因として、とても多いのが、スマホで撮った写真をそのまま載せているケースです。

1枚3〜5MBの写真が何十枚も入っていて、表示が遅く、サーバーの容量もぎりぎり、ということがよくあります。

写真は、載せる前に「縦横を小さくして、容量を軽くする」だけで、見た目を変えずに10分の1以下にできることが多いです。

■写真が重いと起きること

・ページの表示が遅くなり、待てずに帰る人が増える。

・表示の速さは、検索の評価にも関わる。

・サーバーの容量を使い切り、ほかの機能に影響が出ることもある。

・バックアップや引っ越しに時間がかかる。

スマホの写真は横4,000ピクセル前後ありますが、ホームページで表示される幅は大きくても1,200ピクセルほどです。

必要よりずっと大きなデータを、毎回読み込ませていることになります。

■今の画像の重さを確かめる

パソコンに保存した写真なら、Windowsでは右クリック→「プロパティ」、Macでは「情報を見る」で、容量と縦横のピクセル数が分かります。

1枚が数MBあれば、縮小と圧縮の対象です。

なお、印刷で使う「解像度（dpi）」は、ホームページでは気にしなくて大丈夫です。

画面の見え方を決めるのは、縦横のピクセル数と容量です。

■用途ごとの目安

・記事やお知らせの中の写真：横800〜1,200ピクセル、100〜200KB。

・一覧に出る小さな画像（サムネイル）：横1,200×縦675ピクセル前後、100〜200KB。

・トップページの大きな写真：横1,600〜1,920ピクセル、200〜400KB。

・施工例や商品など、拡大して見せたい写真：横1,200〜1,600ピクセル、150〜300KB。

・スタッフの顔写真：横400〜800ピクセル、50〜100KB。

最近のスマホやパソコンは画面がきめ細かいため、表示する幅より少し大きめにしておくと、くっきり見えます。

ただし、大きくしすぎると元の重さに戻ってしまうので、上の目安の範囲で考えてください。

形式は、写真ならJPG（またはWebP）、ロゴや図ならPNGと覚えておけば困りません。

■縮小のしかた

1. 縦横を小さくする（いちばん効きます）。

・Windows：「フォト」で開き、「サイズ変更」でピクセル数を指定する。

・Mac：「プレビュー」で開き、「ツール」→「サイズを調整」を選ぶ。

・スマホ：写真の縮小アプリや、ブラウザで使える無料の縮小サービスを使う。

2. 容量を軽くする（圧縮）。

小さくしたあと、無料の圧縮ツールに通すと、見た目をほとんど変えずにさらに軽くなります。

ただし、圧縮を強くしすぎると、色がにじんだり、輪郭がぼやけたりします。

圧縮したあとは、元の写真と並べて見比べてから載せましょう。

3. ファイル名を付け直す。

「IMG_1234.jpg」のままではなく、内容が分かる半角英数字の名前にします。

4. 載せたら代替テキストを入れる。

WordPressの画像の「代替テキスト」に、写真の内容を短く書きます。見えない方への説明であり、検索に写真の内容を伝える欄でもあります。

■WordPressに載せるときの注意

・WordPressは小さい版を自動で作りますが、元の大きな写真もそのまま保存されます。元を小さくしないと容量は減りません。

・記事に入れるときは「フルサイズ」を選ばず、表示する幅に合った大きさを選ぶ。

・同じ写真を何度も上げず、メディアライブラリから選び直す。

・写真を差し替えたのに古いものが出るときは、ブラウザやキャッシュのプラグインに前の表示が残っていることがあります。

■すでに重い写真がたくさんある場合

何年も運用しているサイトでは、数百枚の重い写真がたまっていることがあります。

1枚ずつ直すのは現実的ではないので、バックアップを取ってから一括で圧縮し、使っていない画像を整理するのが一般的です。

一括での作業は、失敗すると画像が表示されなくなることもあるため、慣れていない場合は任せるのが安全です。

■よくあるご相談の例

「トップページの大きな写真を替えてから、急に表示が遅くなった」というケースがよくあります。

この場合は、差し替えた写真がスマホで撮ったままの大きさであることが多いです。

「サーバーの容量が足りないと連絡が来た」というケースもよくあります。

こちらも、何年分もの重い写真がたまっていることが多いです。

■自分で確かめるチェックリスト

・載せる前に、写真の縦横を目安の大きさに縮小している。

・1枚の容量が、数百KBに収まっている。

・写真はJPGかWebP、ロゴや図はPNGにしている。

・ファイル名を、内容の分かる半角英数字にしている。

・代替テキストに、写真の内容を短く書いている。

■よくある質問

Q. 小さくすると、写真が粗くなりませんか？

A. 表示する幅に合わせて縮小する分には、見た目はほとんど変わりません。粗く見えるときは、縮小しすぎか、圧縮が強すぎることが多いです。

Q. 縮小をWordPressに任せることはできますか？

A. 大きな画像を自動で縮小する仕組みや、上げるときに圧縮するプラグインがあります。ただし、自分で縮小してから上げるほうが、容量も仕上がりも見通しやすくなります。

Q. WebPにしたほうがいいですか？

A. 同じ見た目でも軽くなりやすい形式です。ただ、まずは縦横を小さくするだけでも十分に効果があります。

Q. 何枚くらいなら載せても大丈夫ですか？

A. 決まった枚数はありません。1枚ずつが軽ければ、写真の多いページでも表示は保てます。

■表示を速くする作業をまとめて任せたい方へ

ご自分で縮小できる方は、上の手順で十分です。

画像の圧縮やWebP化に加えて、プラグイン、テーマ、サーバーの応答まで調べ、遅くなっている原因から改善するサービスをご用意しています。

WordPressの表示速度を原因から改善します

https://coconala.com/services/4456129