【コーダー向け】WebPと圧縮で高速表示！画像軽量化の実践方法
- 記事をシェアする：
-
-
-
サイトの表示速度は、サイトへ訪れたユーザーの体験や検索エンジンのランキングに大きな影響を与えます。特に、画像の容量はページの表示速度に大きく影響します。
今回はWebコーダー向けに、画像の軽量化方法と、タグによるWebp画像の制御、などをご紹介します。
【記事の目次】
画像の軽量化の必要性
まず、なぜ画像を軽量化する必要があるのか、です。
その主な理由として、Webコーダー視点から挙げられるものはこちらです。
- ページの読み込み速度がモバイル検索のランキング要素に使用
（引用元：ページの読み込み速度をモバイル検索のランキング要素に使用します） - 53% の調査対象者が「読み込みに 3 秒以上かかるモバイルサイトからは離脱する」と回答
（引用元：モバイルサイトスピードが与えるコンバージョンへの寄与 -Think with Google） - Googleが、1ページの容量を1.6MB以下を目指すべきと掲載
（引用元：膨大なネットワーク ペイロードを避ける）
総じて言えるのは、「ユーザー体験をより良いものにできれば、SEO評価も上げられる」ということです。
したがって、サイトの表示速度に直結する画像の容量を軽量化し、最適な方法で表示する必要があります。
画像軽量化の手段
それでは、まずWebコーダーが使用する画像軽量化の手段を２つ紹介します。
それは、「圧縮」と「Webpへの変換」です。これら２つを使い分けて、軽量化します。
軽量化の目安
むやみに圧縮や変換を行うのではなく、目安を決めておくと作業効率化にも繋がります。
1枚あたり、容量200KB以下を目指す
なぜ200KB以下なのかは、Googleの推奨するページあたりの容量1.6MB以下を目指す場合、200KB以下であれば6枚程度の画像を使用できるからです。
ただし、必ずしも200KB以下にする必要はありません。
大きく見せたい画像は400KB。イラストなどはSVGで20KB程度に抑えるなど、デザインに合わせて配分しましょう。
必要なのは、画像のきれいさ度合いと表示速度のバランスです。
むやみに軽くしてコンテンツの質が下がることは、逆にSEOに不利となる可能性もあるので注意しましょう。
関連性の高い優れたコンテンツを含むページであれば、読み込み速度が遅くても上位に掲載される可能性があります。
Google検索セントラル
圧縮について
圧縮にも種類がありますが、Webコーダーは特別覚える必要はありません。
特に覚えておく必要があるのは、画像のサイズは変わらないことです。
（ここでのサイズとは、画像の縦と横の大きさ）
【圧縮のサンプル】
サンプルとして横640px × 縦575pxの画像を、400px以下の横幅にそろえて並べました。
このように、圧縮後の画像でも書き出しサイズ以下の表示であれば品質を維持できます。
逆に、圧縮に限らず、横幅640pxで書き出した画像を1200pxなどで表示すると表示されるピクセルが大きくなり、粗さが目立ってしまいます。
よって、圧縮の前に書き出しサイズが重要です。
書き出しサイズは、その画像が使用される最大サイズをカバーできるサイズで書き出す、というルールを意識しましょう。
WebPへの変換について
WebPはGoogleが開発した次世代画像フォーマットで、JPEGやPNGよりも高い圧縮率で圧縮が可能です。
また、高い圧縮率でありながら画質を高く保ってくれるため、
「お客様の商品の写真をキレイに表示したい」
「メインビジュアルでウィンドウ幅いっぱいに美しく表示したい」
といったニーズに答えてくれます。
しかし、次世代画像フォーマットであるため、
バージョンの古いブラウザもカバーするコードを記述する、ことが場合によって必要です。
次の章では、その具体的な記述方法について紹介します。
pictureタグで、Webp画像を古いブラウザでも制御する方法
まずは、コードをご覧ください。
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="画像の説明">
</picture>このコードは次のように動作します。
- WebP対応ブラウザ：最初の
<source>要素が読み込まれ、image.webpが表示されます。 - WebP非対応ブラウザ：最初の
<source>要素を無視し、次の<source>要素を読み込み、image.jpgが表示されます。 - 古いブラウザ：
<picture>要素をサポートしていないブラウザでは、<img>要素が読み込まれます。
このように記述することで、WebPに対応していないブラウザでも適切な画像形式で表示することができます。
画像圧縮・Webp変換ツールの紹介
ここでは、普段Webコーダーである筆者が使用しているツールを3つ紹介します。
それぞれを使い分けることで画像がキレイなサイトが制作できるので、ぜひ活用してください。
TinyPNG
自動で高い圧縮率の圧縮を行ってくれます。圧縮後のファイル名が変わらないのも嬉しいポイントです。
PNG・JPEGをWebP画像に一括変換｜サルワカ道具箱
JPEG/PNG/GIFをWebpへ変換できます。使い方は、TinyPNGとほぼ同じで一括ダウンロードも可能です。こちらも無料です。
Squoosh
圧縮率を選べる、変換する形式を選べる、書き出したあとの容量が分かる、この3点が特徴です。
したがって、
「画像が粗く見えない、ギリギリまで高い圧縮率を指定して書き出す」
「できるだけキレイに見せつつ容量を抑えるために、書き出し容量が400KBになるように指定する」
といった、目的に合わせた書き出しが可能です。
また、下記参考のように書き出し前と書き出し後を分かりやすく確認できるのも良い特徴です。
したがって、それぞれの使用用途をまとめると、以下の通りです。
しかし、これはあくまでも筆者の使用環境なので、ご自身にあった方法をぜひ見つけてください！
まとめ
最後に、画像の軽量化はホームページのパフォーマンスを向上させるのにとても有効です。圧縮やWebP変換、適切な画像表示でユーザー体験を大幅改善できます。ユーザーやクライアントの要望に応じて、適切な方法を選びコーディングしましょう。
それでは最後までお読みいただき、ありがとうございました。
また別の記事でお会いいたしましょう！
- 記事をシェアする：
-
-
-
