画像圧縮Webアプリ「Squoosh」で画像を最適化する方法を実例を基に解説

Webで使用する画像データを最適化する

Googleはユーザーが検索したキーワードに対する検索結果の順位を決める要素にユーザーエクスペリエンスの基準を盛り込み、その指標である “Core Web Vitals” を公開しました。

“Core Web Vitals” の内容
  1. ページの読み込み速度
  2. 応答性
  3. 視覚的安定性

参考Webサイト : Chromium Blog “Core Web Vitals”

この記事では、指標の中のひとつにある「ページの読み込み速度」で重要なコンテンツとなる「画像データ」の最適化について解説していきます。

画像圧縮Webアプリ “Squoosh”

Googleは、画像を最適化する為のWebツール “Squoosh” を提供しています。

● Squoosh

“Squoosh” の使用方法はとても簡単です。

  1. “Squoosh”の中に画像をドラッグ&ドロップする
  2. 解像度、圧縮率などの調整をする
  3. シークバーで画像を比較して確認する
  4. 問題なければ、ダウンロードボタンを押す

これだけの動作で画像の最適化が完了します。

Squooshの使用イメージはコチラでも確認できます。

参考YouTube動画 : Google Chrome Developers Demo of Squoosh.app

最適な画像の容量は?

最適な画像の容量については画像の解像度を含め、写真画像なのか、イラスト画像なのかによって扱い方が違うので、ベストな画像容量については言及されていません。

しかし、画像の種類についての適切なガイドラインは示されています。

● Google PageSpeed Insightの画像を最適化について

私の場合は、写真画像の場合は100KB前後、イラストの場合は使用されている色数にもよりますが50KB前後に圧縮しています。

しかし、今回の指標が明示されたことで、画像の容量について改善が必要となる可能性が高いので、より圧縮率を高めて画像の差し替えを行っていく予定です。

最適な画像の大きさは?

最適な画像の大きさについてGoogleは、AMP仕様のWebサイトについては、主にロゴや画像の大きさについて明示している情報があります。

参考サイト : Google 検索デベロッパー ガイド 記事

私の場合は、AMP仕様にする予定はないのですが、使用しているロゴやアイキャッチの画像などは、ガイドの仕様に合わせた解像度にしています。

ユニコブログの画像仕様
  1. ブログのロゴ:横600x縦60px
  2. アイキャッチ : 横1200x縦675px(アスペクト比 16×9)
  3. 記事内画像 : 横は1200px、縦は素材による

Squooshで対応している画像フォーマット

Squooshで対応している画像フォーマットはとても豊富です。

特に、Web向けに最適化されているだけあるので

  1. MozJPEG
  2. WebP
  3. AVIF

の3点セットにはしっかりと対応しています。

一応、上記以外にも多くの画像フォーマットに対応しており、このリライトを兼ねた執筆時点(2022年02月時点)では

  1. AVIF
  2. Browser JPEG
  3. Blowser PNG
  4. JPEG XL
  5. Moz JPEG
  6. Oxi PNG
  7. WebP
  8. WebP v2

などの多くの画像フォーマットに対応しています。

画像の最適化にはalt属性の入力も重要

alt属性の重要さを説明する画像

Webサイトでは、その画像が「何を示しているのか?」という情報を付加するための要素が設定できるようになっています。

alt属性(オルト属性)とは、画像の代替となるテキスト情報です。

特に、Blogサイトを運営している方に多いのが、圧縮してWeb用に最適化した画像をサイトに埋め込むときに、alt属性の入力をしていない方が多いです。

alt属性を入力していないと、画像と記事の関連性をGoogleがクロールしてきた時にそれらの関連性が認識できなくなってしまいます。

あらゆる画像に対してalt属性の中身に内容を示す必要は無いのですが、アイキャッチ、記事内画像は設定しておきましょう。

● 画像素材サイト10選!各サービスの料金と特徴を徹底比較

Squooshはスゴく便利な画像圧縮ツール

最近は、様々なSNSでも投稿時に画像を添付するとalt属性も入力できるようになってきました。

これから適正な画像をどのように設定しているか、ブログサイトだけでなく様々なサービス利用の中で重要になっていく傾向にあります。

話を最初の “Squoosh” に戻しますが、よりこのツールについて知りたい場合のYouTubeリンクを紹介しておきます。

(5:31:25から “Squoosh”の紹介チャプターに入ります。 )

参考YouTube動画 : Google Chrome Developers Chrome Dev Summit 2018 – Day 1 Livestream

Squooshを利用した実際の運用事例

例えば、筆者の場合は以下の手順でブログサイトなどの画像を管理しています。

  1. 画像データをSquooshでMoz JPEG方式で100kb未満に圧縮する
  2. もしCMSがWordPressだったら「Imagify」というプラグインを入れておく
  3. ImagifyでWebPなどの代替画像を生成する

ちょっとプロセス的に効率が割るように見えますが、Imagifyは有料プランでなくても小規模サイトであれば無料で充分に使える高機能な画像圧縮プラグインです。

そこに、Squooshで画像圧縮した画像をWordPress内で利用すれば、サーバー容量も圧迫せずに利用が出来ます。

その上で、さらにサイト表示についてWebPも対応してくれるので、個人的にはオススメの運用方式です。

Squooshによる画像圧縮運用以外のこと

また、画像のSEO対策以外にも、様々なSEO対策についてまとめた記事もあります。

コチラも参考していただければ幸いです。

● SEOとは?基礎知識を徹底解説!ブログやサイト運営のSEO対策を分かりやすく解説

ブログを初めて立ち上げる人向けに様々なノウハウを記事にまとめました。

こちらの記事も参考になれば幸いです。

最後まで読んでいただきありがとうございました。

● 副業でおすすめのビジネスを分かりやすく解説

ABOUT US
ユニコブログの執筆者である小林玲王奈のアイコン
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

放送業界や映画業界で映像制作や新規事業の立ち上げを中心に16年間働いて2019年に独立。2020年1月にユニコーンコンサルティング株式会社を設立しました。現在は、国内・海外向けのWebメディアを複数サイト運営しながら、経営コンサルタントとして数社の技術顧問、及び複数の教育機関で特別講義をおこなったり、Web講演をしています。|BBT経営塾(旧:大前経営塾)第10期生 卒塾

プロフィールの詳細は下記から確認できます。