画像を軽くしてサイトの表示速度を上げる方法｜ブラウザだけでリサイズ・圧縮・WebP変換
自分のサイトやブログを開いたとき、ページがなかなか表示されなくて、じれったく感じたことはありませんか。文章はすぐ出るのに、写真だけが上から少しずつ現れる。スマホで見ると、さらに待たされる。
そんなとき、原因として一番に疑いたいのが画像です。スマホやデジカメで撮った写真は、そのままだとかなり大きなファイルになっています。それを何枚も貼れば、ページ全体が重くなるのは当然です。
うれしいことに、画像はちょっとした手間で軽くできます。この記事では、見た目をほとんど変えずに画像を軽くする考え方と、ブラウザだけでできる具体的なやり方を紹介します。
画像がページを重くする理由
ページを開くと、ブラウザは文章や画像のファイルをひとつずつ受け取ってから表示します。文章のファイルは小さいので、すぐに届きます。ところが写真は、1枚だけで文章全体よりずっと大きいことがよくあります。
特に気をつけたいのが、撮ったままの写真です。最近のスマホは、とても細かく撮れるようになりました。その分、横幅が数千ピクセルもある大きな画像になっています。
でも、ブログの記事の中で表示される幅は、それよりずっと小さいのが普通です。大きな画像をわざわざ届けて、ブラウザ側で縮めて見せている。つまり、読む人には見えない部分のために待ち時間が生まれているわけです。
表示が遅いと、読者は途中で戻ってしまいがちです。せっかく書いた記事も、読まれなければもったいないですよね。
画像を軽くする3つの考え方
画像を軽くする方法は、大きく分けて3つあります。どれか1つでも効果はありますが、組み合わせるともっと軽くなります。
表示する大きさに合わせて縮める
いちばん効くのがこれです。画像の縦横のピクセル数を小さくすることを、リサイズと呼びます。縦と横を半分にすると、画像の面積は4分の1になります。その分、ファイルもぐっと小さくなります。
目安は、サイトで実際に表示される幅です。記事の本文の幅に収まるなら、それ以上大きくしておく意味はあまりありません。高画質な画面でもきれいに見せたいなら、表示幅より少し大きめにしておくと安心です。
画質を少しだけ下げる
写真は、画質の設定を少し下げるだけでかなり軽くなります。この画質の数字を品質と呼ぶことが多いです。
面白いのは、少し下げたくらいでは、見た目の違いにほとんど気づかないことです。画面いっぱいに拡大して見比べれば分かっても、記事の中で普通に眺める分には気にならない。そのくらいの落としどころを探すのがコツです。
ファイルの形式を見直す
画像には、JPEGやPNGといった保存の形式があります。最近よく使われるのがWebP（ウェッピー）という形式です。同じくらいの見た目でも、JPEGやPNGより小さく保存できることが多いのが特長です。
いまの主なブラウザはWebPを表示できるので、サイトに載せる画像ならWebPにしておくのもよい選択です。ただ、使っているブログサービスや、とても古い環境によっては扱えない場合もあります。使う前に一度だけ確かめておくと安心です。
ブラウザだけで画像を軽くする手順
ここからは、benri-kitの画像ツールを使ったやり方です。ソフトを入れる必要はなく、ブラウザで開くだけで使えます。やり方はかんたんです。
- 画像ツールの圧縮・変換のタブを開きます。
- 軽くしたい画像を選びます。複数枚をまとめて選んでも大丈夫です。
- 出力形式を選びます。元の形式のままでもよいですし、WebPにしてもかまいません。
- リサイズの割合を決めます。大きな写真なら、まずは50%あたりから試すのがおすすめです。
- 品質の数字を決めます。迷ったら60〜80くらいから始めてみてください。
- 圧縮を実行して、元の容量と比べてどれだけ減ったかを確かめます。
- 仕上がりに問題がなければ、軽くなった画像を保存します。
実際に手を動かすと、思った以上に小さくなって驚くはずです。まずは手元の写真を1枚、圧縮・変換のタブで軽くしてみてください。
どのくらいの設定から試せばいいか
設定に正解はありません。写真の中身や、サイトでどう見せたいかで変わるからです。とはいえ、最初の一歩の目安があると迷わずに済みます。
- スマホで撮ったままの写真なら、リサイズを50%にするところから始める
- 品質は70前後にして、見た目を確かめてから上げ下げする
- サイトに載せる写真なら、WebPも試してみる
試したら、仕上がりを実際の表示サイズで見てみてください。拡大して粗を探すより、読者と同じ見え方で判断するほうが、ちょうどいいところを見つけやすいです。
文字が入った画像や、細い線の多い図は、画質を下げると文字がにじみやすくなります。こういう画像は、品質を高めに残しておくほうがきれいです。写真と図で設定を変えるくらいの気持ちで大丈夫です。
気をつけたいこと
画像を軽くするのはいいことばかりに見えますが、いくつか気をつけたい点があります。
元の画像は残しておく
一度縮めたり画質を下げたりした画像は、あとから元のきれいさに戻せません。軽くした画像は別のファイルとして保存して、元の写真は手元に残しておきましょう。あとで大きなサイズが必要になったときに困りません。
透明な部分がある画像の形式
ロゴやアイコンのように、背景が透けている画像があります。これをJPEGにすると、透明な部分が塗りつぶされてしまいます。透明な部分を残したいときは、PNGかWebPのまま扱うのが無難です。
軽くしすぎない
容量が減るのが楽しくなって、つい画質を下げすぎることがあります。ぼやけた写真は、かえって記事の印象を悪くします。容量だけでなく、見た目もいっしょに確かめる習慣をつけておきましょう。
ファイルをサーバーに送らないから安心
画像を軽くするサービスの中には、画像をいったんサーバーに送って処理するものもあります。公開前の写真や、仕事で使う画像だと、少し気になりますよね。
benri-kitのツールは、画像の処理をすべてあなたのブラウザの中で行います。ファイルが外に送られることはありません。まだ公開していない記事の写真も、安心して軽くできます。
インターネットの速さにあまり左右されないのもうれしいところです。画像を送ったり受け取ったりする待ち時間がないので、何枚かまとめて処理してもサクサク進みます。
まとめ
サイトの表示が遅いと感じたら、まずは画像を見直してみてください。やることは、次の3つです。
- 表示する大きさに合わせてリサイズする
- 見た目が変わらない範囲で画質を少し下げる
- 必要に応じてWebPに変える
どれも数クリックでできることばかりです。これから記事に載せる画像から、軽くしてから貼るようにしてみましょう。すでに公開している記事も、画像の多いページから差し替えていくと効果を感じやすいはずです。
読者が待たずに読めるページは、それだけで親切なページです。少しの手間で、あなたのサイトはもっと快適になります。