【Webエンジニア向け】画像変換によるWebサイトの最適化を解説

画像最適化とは

画像最適化とは、見た目の品質を保ちながら画像の容量をできるだけ小さくすることです。画像の容量が大きいと読み込み時間が長くなり、Webサイトから離脱する可能性が上がります。
また、画像の容量が大きいとサーバーサイドの負荷上昇に伴うWebサービスのパフォーマンス低下や、クライアントサイド（ユーザー側）のデータ通信量増加に伴う端末の負荷増加につながり、ユーザー体験の低下を引き起こすなどのデメリットが生じます。画像最適化をおこなうことで、とくに画像を多く使うWebサイトや、画像のアップロードが頻繁に発生するサービスなどで顧客体験が向上します。

画像最適化が必要な理由

画像最適化が必要な理由は、主に以下の4つです。

• 表示速度の改善
• SEO
• サーバー負荷軽減
• データ通信量の節約

それぞれについて解説していきます。

表示速度の改善

一般的にWebページにおけるデータサイズの占有率は、テキストより画像のほうが圧倒的に大きいです。従って画像最適化はWebページ表示速度向上のために非常に重要な対策になります。
表示速度が遅いと、ユーザーはWebページを離脱する可能性が高くなります。読み込みに3秒以上かかるページからは53％の訪問者が離れているというデータがあります。
逆に、表示速度を改善することでユーザーの待ち時間を減らすことができ、ユーザビリティの向上につながります。また、訪問者の離脱防止にもなり、コンバージョン率を向上できます。

SEO

Googleがページ表示速度を検索順位を決める、ページを評価する指標の1つとしています。画像の最適化をおこなうことで、表示速度が改善され、検索順位の向上が期待できます。
2024年2月時点で、Webサイト1ページ当たりのファイルサイズの中央値は、デスクトップ版で2.5MB、モバイル版で2.2MBというデータがあります。一方、Googleの指標では、1つのページの適切なファイルサイズは1.6MB以下とされています。
画像最適化をおこないWebサイトのファイルサイズを減らすことで、検索順位の向上が期待できます。

サーバー負荷軽減

画像サイズが大きすぎるとサーバーへの負荷が増加して、読み込み速度が遅くなります。とくに高解像度の画像や、多くの画像を使用しているサイトでは、この問題はより顕著になります。
画像はWebページのデータサイズの多くを占めます。画像を最適化することで、サーバーの負荷を軽減し、ページの読み込み速度を向上させることが可能です。

データ通信量の軽減

近年、モバイルデバイスからのインターネットアクセスが増加しています。2023年7月の時点で、国内のインターネットユーザーのうちスマートフォンでの利用は全体の96％で、スマートフォンのみの利用者は59％でした。
スマートフォンをはじめとしたモバイルデバイスのユーザーは、通信環境が安定していない場所でアクセスすることが多く、PCに比べて通信速度が遅くなりがちです。そのため、モバイルユーザーにとってページの軽量化は重要な要素です。
画像を最適化しデータ通信量を軽減することで、モバイル端末のユーザーエクスペリエンスを向上させることが可能です。

画像を最適化するには

画像は、Webサイトやアプリの見た目や印象を大きく左右する要素です。しかし、画像はそのままではファイルサイズが大きく、読み込みに時間がかかったり、表示が崩れたりすることがあります。そこで、画像を最適化することが重要となります。
画像最適化には、以下のような方法があります。

適切な画像フォーマットを選ぶ

画像フォーマットとは、画像のデータ形式のことです。代表的な画像フォーマットには、JPEG、PNG、GIFなどがあります。それぞれに特徴や用途がありますので、画像の内容や目的に合わせて選ぶ必要があります。
たとえば、写真やグラデーションのある画像はJPEGが適しており、ロゴやアイコンなどのシンプルな画像はPNGが適しています。画像フォーマットを適切に選ぶことで、画像の品質とファイルサイズのバランスをとることができます。
また画質の劣化を防ぎ、高い圧縮率でファイルサイズを小さくしたい場合にはWebPなどが適しています。

画像ファイルの縮小

画像のピクセル数が多いほど画像の解像度が高くなりますが、ファイルサイズも大きくなります。画像のピクセル数を減らすことで、ファイルサイズを小さくすることができます。
ただし、画像のピクセル数を減らしすぎると、画像の品質が低下したりぼやけたりすることがあります。そこで画像のピクセル数を縮小する際には、画像の表示サイズに合わせて適切な値を設定することが重要です。

Webで表示する最適な画像サイズ

最適な画像サイズは、画像の用途やデバイスによって異なります。たとえば、Webサイトのヘッダーやバナーなどの大きな画像は、横幅が1,200px程度、縦幅が600px程度が目安です。
一方、コンテンツやサムネイルなどの小さな画像は、横幅が300px程度、縦幅が200px程度が目安です。また、スマートフォンやタブレットなどのモバイルデバイスでは、画像のサイズをさらに小さくすることで、表示速度やデータ通信量を改善することができます。
最適な画像サイズを設定することで、サイトやアプリのユーザビリティやパフォーマンスを向上させることができます。

画像ファイルを圧縮

画像のデータ量が多いほど、画像の品質が高くなりますが、ファイルサイズも大きくなります。画像のデータ量を減らすことで、ファイルサイズを小さくすることができます。
ただし、画像のデータ量を減らしすぎると、画像の品質が低下したり、ノイズなどが発生したりすることがあります。そこで、画像のデータ量を圧縮する際には、画像の品質とファイルサイズのバランスをとることが重要です。

画像変換による対策

画像最適化をおこなうには、以下のような対策方法があります。

画像アップロード時に手元で変換をする

手軽な方法としては、画像アップロード時に手元で変換をすることです。
例えばアップロードする前に、予め掲載する画像を圧縮しておくなどの手段は、データ通信量を抑え、サーバーの負荷対策につながるメリットがあります。
一方で画像最適化に必要なソフトウェアやツールを自分で用意しなければならず、画像最適化に手間や時間がかかります。一括で画像圧縮できるWebサービスも存在しますが、自分でアップロードをし圧縮後の画像をダウンロードするため、完全な自動化ではありません。このようにクライアントサイドで管理すると、作業に手間がかかってしまうことがデメリットになります。
また、画像をアップロードする人が運用者（開発者）以外の場合、たとえばユーザーが画像をアップロードするといったケースでは、運用者の手元で画像最適化をおこなうことができません。あとからWebサイトのデザインを変更した場合、既存の画像をすべて再変換するといった対応も必要となります。
この方法は、画像の数が少なく、画像の品質やファイルサイズにこだわりたい場合に適しています。

画像アップロード時にサーバーサイドで加工する

2つめの方法は、サーバー側で画像最適化をおこなう方法です。この場合、 画像最適化に必要なソフトウェアやツールを自分で用意したり、手間や時間をかけたりする必要がなく、画像の品質やファイルサイズに一定の基準を設けることができます。
クライアントサイドで管理する作業に比べて、手間が少なく楽だというメリットはありますが、サーバー環境への対応が必要になります。具体的には、メモリ増強や高性能なCPUを搭載した高スペックサーバーを構築する必要があります。インフラエンジニアが運用することになるため、費用や作業工数がかかってしまうデメリットがあります。
サーバーサイドでインストールをして利用するOSS（オープンソースソフトウェア）もありますが、脆弱性の対応やソフトウェアを利用するためにハードウェアのメモリ増強も必要であるという課題もあります。
クライアントサイドで管理する対応と同じになりますが、Webサイトのデザインを変更した場合も、システム上で既存の画像すべて再変換することになるので、画質が劣化する場合があります。
この方法は、画像の数が多く、一定の品質やファイルサイズで変換する場合に適しています。

画像CDNサービスを利用する

CDNとは、Webコンテンツを高速に配信するためのネットワークのことです。なかでも、画像CDNサービスとは、画像の配信や最適化を専門におこなうサービスのことです。
画像CDNサービスを利用すると、サービス側で画像最適化が自動化されます。サービス側のシステム管理はサービス提供者がおこなうので、サーバー負荷などの原因に伴う障害対応の心配はありません。画像の再変換による画質劣化の心配もなく手間もかかりません。
また、WebPフォーマットを配信する際に、あらかじめ未対応ブラウザでWebP以外のフォーマット画像を表示させる設定をしておくことで、WebP対応ブラウザと未対応ブラウザ配信の振り分けも自動化できます。
画像CDNサービスを利用する方法は、画像の数の多さに加えて、ユーザーが画像をアップロードするといったケースのサイトや、Webサイトのリニューアル時の作業を軽減したい場合、画像の配信や最適化に高いパフォーマンスや柔軟性を求める場合に適しています。

ImageFluxについて

便利な画像CDNサービスとして、ImageFluxをご紹介します。
ImageFluxは、さくらインターネットがピクシブ社と共同開発したクラウド型の画像変換・キャッシュ配信サービスです。オリジナル画像をもとにデバイスに最適化された画像を簡単に生成でき、画像変換・最適化とキャッシュ・配信までを一括におこなうことができます。ピクシブ社の画像変換技術のノウハウを凝縮し、日本語のサポートやドキュメントも対応していて、無料のトライアルで、気軽に試してみることができます。

まとめ

Webサイトの運営において、画像管理は重要な課題の一つです。特に、画像のフォーマット変換や配信の最適化は、サイトのパフォーマンスに大きく影響します。こうした課題に対し、ImageFluxは効果的な解決策を提供します。
ImageFluxは、画像の加工やフォーマットの変換をクラウド上で行うことができるサービスです。例えば、WebPへの画像変換はもちろん、サイズ調整や圧縮といった加工も簡単に実行できます。また、キャッシュ配信機能により、画像の読み込み速度を大幅に改善し、ユーザー体験を向上させることが可能です。さらに、オリジンサーバーの負荷軽減にも寄与し、安定した画像配信を実現します。
Webサイト運営の際には、多くの画像に関する課題が生じますが、ImageFluxを利用することで、これらの課題を一括して解決することができます。その多機能性とユーザーフレンドリーな操作性により、ウェブサイトの画像管理を効率的かつ効果的に行うための最適な選択肢と言えるでしょう。