便利なサービス・ツール

画像を最適化する【PageSpeed Insights 画像の軽量化編】

  • このエントリーをはてなブックマークに追加
  • LINEで送る
画像を最適化する【PageSpeed Insights 画像の軽量化編】

以前、Google PageSpeed Insightsの基本として使い方をご紹介したのは記憶に新しいかと思います。
Google PageSpeed Insightsはモバイルだけでなく、PCの表示速度や最適化の方法も提案してくれる無料のツールです!

今回はその提案の中から「画像を最適化する」についてピックアップしていきたいと思います。
「スピードアップデート(Speed Update)」に合わせ、サイトスピードの改善・表示速度の高速化を意識している方は是非、ご確認ください。

【Google PageSpeed Insights】に関する記事はこちら


「画像を最適化する」とは

そもそも画像を最適化するとはどういうことでしょう。
Google PageSpeed InsightsのDevelopersには以下のように記載があります。

要約するとこうです。

  • 画像の見た目の品質に大幅な影響を与えずに、ファイルサイズを小さくする
  • 画像の最適な種類(保存形式)、画質、解像度を選ぶ
  • 必要とする効果がCSSで得られる場合はCSSにする
  • 端末の種類に合わせて適切に拡大縮小される方法で構築する
  • すべてのピクセルが不透明な場合、GIF、PNGのアルファチャンネルを削除する

つまり、画像のファイルサイズは可能な限り小さくし、CSSやテキストで代替できるものは代替しましょうということです。
また画像の最適な種類(保存形式)や品質を選ぶようにしましょう。

現在Webサイトを閲覧できる環境やデバイスは増え続け、常に変化をしています。
ハイスペックなPCからタブレット、スマホ、ガラケー等幅広い環境に合わせられることが求められます。
その為、画像自体の容量や、表示可能なフォーマット選びは、ストレスのない閲覧に影響してきます。
画像のダイエットでサイトスピードを意識するだけでなく、あらゆる環境で閲覧できるようにすることが画像の最適化となります。

画像の最適化の基本

画像サイズ・容量

よくやってしまいがちなのが、カメラで撮影した画像をそのまま使ってしまうケースです。
CMSに投稿すると小さく表示されることがありますが、画像自体の容量は変わりません。
事前に、実際に表示される大きさにリサイズしたり、画質をモニター似合わせることで、大幅に容量を減らせる場合もあります。

Webで扱う画像の場合、モニター越しになる為、画質や解像度は最適な数値より高く設定しても画質の向上はほとんど見られません。
逆に言えば、高画質や高解像度の画像の品質を下げても気になる程の差が出ない為、高品質な画像を最適化しても問題ありません。
推奨されるサイズ・容量を目安にしましょう。

<推奨される画質・解像度>

  • 画質は85
  • 解像度は72dpi

ファイル形式・フォーマット

<推奨される画質・解像度>

  • 写真ならjpg形式
  • 透過部分があるならPNG形式
  • 図形や階調の少ないイラストならgif形式
  • アニメーション画像ならgif形式(可能ならvideo要素)

BMPやTIFFなどは現状のWebでは非推奨です。

画像以外のものに変換する

簡単な図形やテキストで代替ができる場合は、HTMLやCSS、テキストを利用しましょう。
画像はテキストに比べ容量が大きくなる為、画像を避けるのも一つです。
また古いサイトなどでは、画像になっていても現在のHTMLやCSSで実装可能となっているケースもあるので、一度見直しても良いでしょう。

Google PageSpeed Insightsで行える最適化

以前の記事でも紹介しましたが、最も簡単で素早く最適化する方法はGoogle PageSpeed Insightsが分析と同時に用意したリソースを活用する方法です。
リソースはダウンロードできるので、必要な方はダウンロードして活用してください。
見落としやすいですが、ページの下方にあります。

画像、JavaScript、CSSの最適化ダウンロード
最適化されたリソース
【Google PageSpeed Insights】の分析と提案に関する記事はこちら

画像を圧縮するおすすめのオンラインツール

ここまでで画像の軽量化や最適な種類(保存形式)のことは理解できたと思います。
その中で画像の軽量化は一枚一枚行うには大変な作業になることもあります。
そこで無料で使えて、簡単に画像の圧縮を行えるオンラインツールをご紹介します。

TinyPNG

TinyPNG
TinyPNG
画像の最適化無料オンラインサービスと言えば必ず候補に上がるのがこのパンダでおなじみのTinyPNGです。
画質を落とさずにサイズ容量を小さくしてくれる上に、Photoshopで書き出すよりも軽量になると評判です。
名前にPNGとありますが、PNGだけでなくjpgも圧縮可能です。
ただしjpgに関しては見た目の質を落としたくないならPhotoshopの方が勝っているように感じます。

<使い方>

使い方は簡単!写真や画像ファイルをドラッグ&ドロップするだけ!

TinyPNG 使い方01
無料版で一度に圧縮できるのは20ファイルまでとなります。
20ファイルを超えると、21ファイル目から圧縮してくれませんが、アイコンがオレンジに替わる為分かりやすいのが特徴です。
圧縮が終わったら緑の「Download all」からダンロードして完了です。

TinyPNG 使い方02
※有償プランやでPhotoshop用のプラグインも用意されている為、使う頻度の高い方は購入を検討してみても良いかと思います。

Optimizilla

Optimizilla
Optimizilla
こちらも画像の最適化の代名詞と言える無料オンラインサービスです。ワニが目印ですね。
TinyPNG同様、写真や画像ファイルをドラッグ&ドロップするだけです。
違いとしては、画像のサムネに圧縮率が表示され解りやすい他、各画像のクオリティ(画質)が調節できる点です。
実際にサンプルを見ながら調整できるので後から予想と違う結果になることを防げます。
日本語対応しているのも嬉しいですね。

<使い方>

使い方は簡単!写真や画像ファイルをドラッグ&ドロップするだけ!
一度に圧縮できるのは20ファイルまでとなります。

Optimizilla 使い方01
またダウンロード前に各画像のクオリティ(画質)が調節可能です。

Optimizilla 使い方02

まとめ

最近では、画像のないWebサイトは皆無と言ってもいいくらいです。
またサーバーの容量を多く占めることも多いのが現状です。
その為、画像を最適化するにはことで、サイトスピードの改善・表示速度の高速化が飛躍的にスムーズに行えることが多いと言われています。

画像の圧縮はツールを使えば簡単にできますが、最適な種類(保存形式)を選択したり、テキストやCSSで代替できるか検討するのは、経験が必要になります。
CMSなどで運営を続けていると、いつの間にか画像でサーバーが圧縮されることはあるので定期的に最適化を行っていきましょう。

【Google PageSpeed Insights】に関する記事はこちら


  • このエントリーをはてなブックマークに追加
  • LINEで送る

コメントを残す

*