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

保守でお預かりしたサイトを調べると、いちばん多く見つかるのが、スマホで撮った写真をそのまま載せているケースです。

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

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

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

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

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

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

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

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

必要な何倍ものデータを、毎回読み込ませていることになります。

■用途ごとの目安

・記事やお知らせの中の写真：横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枚ずつ直すのは現実的ではないので、バックアップを取ってから一括で圧縮し、使っていない画像を整理するのが一般的です。

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

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

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

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

https://coconala.com/services/4456129