Web サイトの数は爆発的に増え続け、そして現代は通信速度の向上に伴って画像や動画などのメディアの種類も増え続けています。そうなると気になるのが、Web サイトの表示速度への影響ですね。
何も対策せずに画像を大量に利用するとページ速度に影響を与えることは知っていましたか？
この記事では、Web の高速化のために画像の圧縮がどのように影響するのかを説明します。
画像ファイルの圧縮とは
圧縮とは、不要なデータを削除してデジタル画像またはビデオ ファイルのサイズを縮小するプロセスです。ビジネスでも添付ファイルのやりとりで zip ファイルを利用しますよね。位置づけは似たようなものです。
ご想像のとおり、これにより、ページの読み込み時間が短縮され、ネットワークの帯域幅の使用量が削減されるため、結果としてインターネットを使用するすべての人にメリットがあります。 ただし、Web 開発または Web デザインを始めたばかりの場合、それは重要なトピックではないように思えるかもしれませんね。ですが、すべての画像がサーバーのどこかに保存されていて、ディスクを消費し続けていることも忘れないでください。
なぜ画像圧縮が必要なのですか？
Web を閲覧していて画像に出くわした場合、圧縮されている可能性が高くなります。 平均的な Web ページには約 100 個の画像が含まれており、ブラウザで表示するには、そのほとんどを読み込む必要があります。 つまり、携帯電話やタブレットで Google や Facebook を開くたびに (誰もがモバイル デバイスを使用していると、1 日に何百回も発生することになります)、画像が表示される前に、ダウンロードが完了するまでに 6 秒かかることになります。(人間の見た目ではそれほど時間がかかっていないように見えるかもしれませんが、画面の裏では画像ファイルのダウンロード通信が以外にも長い時間をかけています)
モバイルネットワークもだいぶ高速にはなりましたが、それでもまだ WiFi ネットワークに比べると体感レベルでの遅さを感じると思います。よって、画像サイズを少しでも小さくしてダウンロードが早く完了するようにすることは、ユーザーにとっても、そして検索エンジンなどの SEO にとっても重要なことなのです。
画像圧縮はどのように機能しますか？
画像圧縮は、画像のサイズを縮小して、コンピューターまたはデバイスで画像を表示しやすくするプロセスです。 これは、多くの場合、画像のパレットの色数を減らし、色深度を減らし、解像度を下げることによって行われます。
画像圧縮の目的は、視覚的な品質を維持しながらファイル サイズを縮小し、携帯電話やタブレット、デスクトップ モニターで以前よりも詳細に画像を表示できるようにすることです。
画像圧縮は、ファイルサイズを縮小する目的で何を調整する必要があるかに応じて、非可逆または可逆になる可能性があります (色深度を減らすか、カラー チャネルを減らすか)。 非可逆圧縮は、小さなファイルを保存/保存するときに品質を低下させ、人間の視覚にとっては困難になりますが、人間が必要とする帯域幅の使用量が減少するため、時間の経過とともにダウンロード時間が短縮されます。
画像フォーマット
画像形式は、Web 上で画像を保存する最も一般的な方法です。 JPEG、PNG、GIF は、Web ブラウザーやモバイル アプリケーションで古くから使用される最も一般的な画像ファイル形式です。これらにはさまざまな機能がありますが、いずれも非可逆圧縮を提供するため、ファイル サイズは小さくなりますが、圧縮されていないビットマップ ファイルよりも品質が低くなります。
PNG は、カラー チャネルに加えてアルファ チャネルと、GIF のような透明度情報を使用するため、小さいファイル サイズで JPEG よりも高品質です。 ただし、この余分な情報は、さまざまなデバイス (タブレットとスマートフォンなど) 間で画像をシームレスに表示しようとするときにも問題を引き起こす可能性があります。
そして WebP は、同様の視覚品質の美学を維持しながら、PNG と JPEG の両方よりも優れた圧縮率を提供するもう 1 つの新しい形式です。2022現在では、 WebP で提供できるならば優先的に利用すべき選択肢といえます。
まとめ
この記事では画像ファイルの種類や圧縮について、表面的に学びました。
WordPress では自動で WebP に変換してくれるプラグインもありますので、積極的に利用しましょう。
