ホームページの各ページに設置された画像を最適化することで、ホームページの表示速度改善といったSEO、画像の意味付けによるページ品質の向上といったSEO効果を期待することができます。
また、ページ内に適切に設置された画像は、検索エンジンの画像検索においても表示される可能性が高まるため、通常のウェブ検索経由だけでなく、画像検索経由でのホームページへのアクセスが向上します。
商品サンプル画像などの配信が多い事業の場合、画像検索経由でのアクセス向上は一般的なSEOによるウェブ検索経由からのアクセスよりもマーケティングに貢献することがあります。
このSEO内部対策は、ホームページの各ページに設置された画像が高容量ファイルのため、その影響でサイトの表示速度が遅くなっていたり、画像に適切な「代替テキスト・キャプション」が設置されていない場合に画像属性を最適化することで、ページの全体的な品質向上と、画像検索からのアクセスアップへのSEO施策です。
本格的な画像のSEOを行う場合は、CMSのテーマ・テンプレートの仕様に任せるままにせず、ページ生成のあり方、画像キャッシュポリシー、バージョニング、Lazyload条件、Viewport条件付きソースセット（<source srcset>）の制御など、フロントエンドとサーバーサイド双方の視点から統合的にSEO設計することが重要です。
設置画像によるホームページの表示速度への影響を改善
モバイル検索において、ホームページの表示速度は、検索順位結果に影響を与えるものとして重要視されており、SEOのひとつとして重要な要素ですが、ページの応答速度は、SEOの観点からだけではなく、ユーザビリティの向上、ページ離脱回避のためにも、なるべくページの表示速度を向上させる必要があります。
画面上ほとんど同じように見える画像も実はファイルサイズが大きく異なる場合がよくあります。
ホームページにファイルサイズが大きい画像が複数設置されているとその分だけ通信に負荷がかかり、ページの表示速度に影響を及ぼします。
モバイル端末からのWeb検索のSEOにとっても表示速度の向上は重要ですが、何よりも通信にかかる負荷を下げてページの応答速度を上げることは、ユーザーの閲覧・操作環境への配慮にもなります。
画像に対する軽量化などのSEOを手がけることで、SEO対策としての効果だけでなくページの離脱率低下などにも良い影響を与えます。
近年スマートフォンなどで撮影された画像でも、画質向上のためにかなりの高解像度・高容量ファイルになっていますが、ホームページで表現する画像は、PCモニタで表現するため、それほど高解像度のものである必要はありません。
次世代フォーマットの利用
Web画像フォーマットは、コンテンツの性質に応じた適切な使い分けをすると良いと考えられます。写真画像にはJPEGが主流ですが、ホームページに設置する画像としてはWebPやAVIFといった次世代フォーマットを使用することで転送量とレンダリング性能を大幅に向上させることが可能です。WebPは可逆・不可逆の両圧縮をサポートしており、アルファチャネルにも対応しているためPNGで扱っていた透過情報にも対応することができます。
画像をロスレス圧縮
ホームページ制作において、ホームページに設置するJPEGやGIF、PNGなどの画像を最適な画像のファイルにロスレス圧縮することで、画質を落とすことなくサイズを縮小することができます。ロスレス圧縮に関しては、JPEGやPNG、WebPのいずれにおいても、再エンコードによって不要なメタデータの削除、カラープロファイルの軽量化、エントロピー最適化によるサイズ削減が可能です。
例えば、JPEG画像に対してmozjpegなどのライブラリを用いた再圧縮を行うことにより品質を保ちながら20〜40％の転送量削減が可能です。また、PNGの場合はzopfli-pngなどのアルゴリズムによって、圧縮率を最大化するバイトレベルの最適化が行えます。これらはいずれも可逆圧縮であり、ピクセルデータには一切の変化を与えないという点でUI設計や製品画像など劣化を許容できないコンテンツに対して有効です。
画像はテキストファイルと比較してファイルサイズがかなり大きいため、画像の最適化、軽量化でページ自体のファイルサイズを縮小します。ファイルサイズが小さくなることで、その分ページの応答速度が上がるため、モバイル端末での表示に良い影響を与えたり、モバイル検索でのSEOにプラスの効果を得ることができます。
ロスレス圧縮で縮小できるファイルサイズでもまだ画像のファイルサイズが大きい場合がありますが、ホームページへの設置画像はロスレス圧縮以上にある程度圧縮しても特に見栄えは変化しないため、なるべく圧縮率を上げて設置するほうが望ましいでしょう。
なお、画像のファイルサイズの縮小には、もちろん大前提として画像サイズ・解像度の最適化が必要です。ページ上で表示するサイズに合わせてリサイズしておくことが前提となります。
ページの表示速度向上によるSEO
ページの応答速度、つまりユーザーがページにアクセスしたときの表示速度を向上させることは、SEOとしてプラスに働きます。PCからのホームページ表示では通信速度自体はブロードバンド環境であればそれほど影響はない場合もありますが、画像の重さによってサーバーサイドでの負荷の影響で、ページの表示自体が遅れる場合がよくあります。
画像が最適化され、ページのファイルサイズが縮小されると、とりわけ通信速度の影響が大きいスマートフォンなどのモバイル端末でのユーザー満足度が向上するため、モバイル検索時へのSEOの影響が大きくなります。
高解像度の高品質の画像をほとんど見栄えの変わらないロスレス圧縮した画像へと変更することでページ自体のファイルサイズを縮小することは、内部SEOとして、そしてユーザビリティ向上のためにホームページ制作時に配慮するべき項目であると考えることができます。
CDNの利用とCDN側での圧縮・変換処理
画像の軽量化のためのサーバーサイドでの圧縮処理に加え、可能であればCDNの利用ならびにCDN側での圧縮・変換処理を実施すると表示速度を改善することができます。一部のCDNでは動的な画像最適化が可能であり必要に応じてAVIFやWebPへの変換が自動的に行われます。
LCP（Largest Contentful Paint）との関連性
コアウェブバイタル（Core Web Vitals）指標において、最大描画領域を占める画像の最適化はSEO、ページ評価との関係性が強いため、画像の配置については、LCP（Largest Contentful Paint）との関連性を考慮する必要があります。特にLCP対象の画像を遅延読み込み（lazy loading）の対象から除外し、img要素に明示的なwidthおよびheight属性を指定することで、レイアウトシフト（CLS）を防止し、FCP（First Contentful Paint）からLCPまでのレンダリングを安定させることができます。
画像に対するSEO 画像属性を最
また、ホームページ設置画像に対する軽量化だけでなく、画像の属性を最適化することで、画像そのものにSEOを施します。
画像へのSEOは、通常のWeb検索でのランキングへの影響だけでなく、画像検索においての上位表示の可能性も高まるため、画像検索からのホームページへのアクセスも期待することができます。
画像に対する適切な代替テキストの設定やキャプションの設定を行うことで、画像の属性や意味付けを行い、画像そのものや、画像が設置されたページの品質向上を行います。
画像に対して的確な意味付けを行うことで、検索エンジン側の画像に対する推測を確定に変えていくといったイメージのSEO対策です。
画像に関するSEO設定がなされていない場合でも、検索エンジンは、基本的に何の画像なのか、どうしたワードと関係しているのかをページのタイトルや前後の文章で推測しますが、こうした推測を「代替テキストの設定」や「キャプションの設定」によって確定的にしていくことで、ページ自体の品質向上によるSEOとしての検索順上昇や、画像検索で表示されやすくなるといったメリットがあります。
代替テキストの設定
代替テキスト（alt属性）とは、ホームページにアクセスした際に画像が表示できない場合に画像の代わりに表示するテキストの設定です。ホームページ制作の時に画像を挿入するためのHTMLタグの中で代替テキストの設定を行います。
検索エンジンは、画像や画像内部に挿入されたテキストをテキストデータとしては読み込むことができないため、どのような内容の画像かを理解することはできません。
画像に対する適切な代替テキストの設定によって、ホームページ内の設置画像がどういった内容の画像かを検索エンジンに示すことで、設置画像や、画像が設置されたページの品質を向上させることができます。
結果としてそのページや画像に対するSEO効果が高まり、画像を設置したページの検索順位向上や画像検索時の検索結果リストに掲載されやすくなるといったメリットがあります。
画像リンクとalt属性の指定
また画像リンクにおいては、テキストアンカーのように文字列としてのリンクではないため、リンク先がどういった内容で紹介されているのかがわかりません。
画像リンクを設置する場合には、テキストアンカーにおける「アンカーテキスト」のようにalt属性でテキスト内容を指定しておくと、リンクの品質が高まり、SEO効果が高まります。
画像のキャプションとSEO
キャプションとは、画像の下などに設置される画像の簡単な説明文です。
画像の下にテキストデータを設置するだけでなく、画像に関係する説明文であることを検索エンジンに示すことで、その画像の属性をよりうまくクローラーへと伝えることができます。
HTML5では単純な「画像下のテキスト」といったマークアップではなく、その画像専用のキャプションであることを示すことができます。
キャプションのマークアップで、その画像と関連したテキストであることを明確に示すことができるため、画像に対するSEO効果がさらに高まります。
画像SEOによるSEO内部対策
ホームページ制作 京都 ファンフェアファンファーレでは、SEO内部対策のひとつとして、画像の軽量化によるホームページの表示速度の改善や画像検索対策、画像最適化によるホームページのSEOなど、ホームページの画像に関するSEO対策もSEOカスタマイズサービスとして提供しております。
ホームページ設置画像に対する適切なSEOによるSEO内部対策で、現在のページや画像が持つSEO効果を最大限に高めることができます。SEO企画設計においては、最低限設置画像のalt設定や画像リンクの最適化を対象とし、画像のファイルサイズ圧縮等に関しましては、画像に関する改善の費用対効果を判断するため、画像数や現状の設定から再設置にかかる費用を換算し、最適なプランを設計させていただきます。
SEO対策のひとつとして、画像SEOやより高いレベルでのサイト全体のSEOをご検討の場合は、ぜひ一度ご相談ください。
