画像圧縮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

最適な画像の容量は?

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

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

参考Webサイト : Google PageSpeed Insight 画像を最適化する

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

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

最適な画像の大きさは?

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

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

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

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

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

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

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

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

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

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

ブログで使える画像素材サイトの紹介

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

まとめ

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

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

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

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

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

また、画像のSEO対策以外にも、様々なSEO対策についてまとめた記事もあります。コチラも参考していただければ幸いです。

SEOの基礎知識を徹底解説!ブログやサイト運営でSEOを活用しよう

SEOとは?基礎知識を徹底解説!ブログやサイト運営でSEOを活用しよう

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

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

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

副業でオススメのビジネスを分かりやすく解説

副業でおすすめのビジネスを分かりやすく解説【実績を銀行通帳で公開】

ABOUT US

小林 玲王奈Unicorn Consulting Inc. 代表取締役

起業する人やスタートアップ企業に出資や資金調達を含めてサポートしながら、ブログの運営やWebアプリの開発、LINEスタンプ制作をしてひたすらキャラクターデザインをしています。

2003年から映像業界向けの様々な新規事業立ち上げに従事。2014年からは経営/メディアコンサルティング業も始めて2020年01月に独立しました。

最近はアフィリエイト用の特化ブログを4サイト立ち上げて運用しています。

全部同じサイト構成、ブログ記事構成、文章構成なども似せてみて、収益を出すのに再現性があるか?などを試している日々です。

ピックアップしているレンタルサーバーとWordPressテーマを総当たりで組み合わせてサイトスピードがどうなるかなど、思いついた事をひたすら検証する日々も兼ねています。

最近は、WordPress用のシンプルなプラグインやブログパーツの開発にチャレンジしています。

SMPTE Professional Engineer Member

著書 : 『保存版 売上を向上させるためのYouTube活用術』

2020年度 学校法人調布学園 田園調布学園 中等部・高等部「豊かな教養を培う 未来へつなぐ土曜日 コアプログラム『探究』」にて空中ディスプレイコンテンツ制作及びWebサイト制作の特別講師を担当