あなたのウェブサイトのために画像を圧縮する方法

画像はあなたのウェブサイトの大部分を占めています。 ウェブサイトで使用される画像の形式とサイズは、ページの速度に大きな影響を与えるため、検索エンジンでのランキングに大きな影響を与えます。 Webサイトのユーザーエクスペリエンスと可視性を向上させたい場合は、画像を圧縮する必要があります。 このコンパクトなガイドでは、その方法を紹介します。

画像を圧縮する理由

ことわざにあるように、1枚の写真は千の言葉に値します。 多くの場合、オンライン記事を読むか、製品を購入するかを決定する唯一の要因です。 高解像度で魅力的な画像は、ユーザーエクスペリエンスの成功の一部であり、Webサイトの成功に大きく貢献します。

それらを使用することの欠点は？ それらは1000語よりもはるかに多くのストレージスペースを占有します。 オンラインショップからの画像の平均ダウンロード量は、ページビューあたり約2MBです。 結果：ページ速度が遅くなります。

ページ速度は直接的なランキング要素であり、SEOのパフォーマンスに影響を与えることがわかっています。 2021年、Core Web Vitalsの登場により、これはさらに明確になりました。 ユーザーが読み込み中に忍耐力を失い、Webサイトを離れる場合、最も美しい製品写真はどのように使用されますか？

したがって、多くの高解像度画像と高速ページ速度で可能な限り最高のユーザーエクスペリエンスを得るには、画像を圧縮する必要があります。

画像形式とその正しい使用法

一般に、画像形式には「ロスレス」と「ロッシー」の2種類があります。 ロスレス形式の画像は、圧縮されている場合でも、元の画像情報をすべて保持します。 非可逆形式の画像は、その過程で情報を失う可能性があります。 ただし、最適化の可能性は高くなります。

Webサイトの最も重要な画像形式は次のとおりです。

JPEG、JPG（Joint Photographic Experts Group）

これは、インターネットで最も広く使用されている画像形式です。 色深度とモードに柔軟性があり、ほとんどのデジタルカメラの圧縮標準です。 詳細の多い写真や画像に最適です。 品質レベルに分割することにより、最適な圧縮度を決定できます。

PNG（ポータブルネットワークグラフィック）

PNG形式は透明度を表示できるため、さまざまな背景に配置できます。 PNG形式は写真にはあまり適していませんが、同じ色の大きなブロックを持つロゴやその他の画像には最適です。

GIF（グラフィックス交換フォーマット）

GIFは、透明な表面を可能にするロスレス画像形式です。 ただし、256色しか表示できないため、より最新のPNG圧縮を使用することをお勧めします。 GIF形式は、ミーム愛好家の間でのアニメーションの可能性のおかげで、小さな復活を経験しました。 ウェブサイトの運営者として、あなたはそれなしで行うことができます。

WebP

Googleが開発したWebP画像形式は、可逆圧縮と非可逆圧縮の両方を提供するため、柔軟に使用できます。 これは「 Webパフォーマンス」用に完全に最適化されており、最終的にJPGやPNGに取って代わる可能性があります（たとえば、同じ品質でPNG画像を26％縮小できます）。 WebPは、最も人気のあるWebブラウザーでサポートされていますが、すべてではありません。

WindowsとMacで画像を圧縮する方法

ImageMagickで画像を圧縮する

コマンドラインに慣れている場合は、そこから画像を圧縮できます。 ImageMagick、jpegoptim、Optipngなどのプログラムを使用すると、1つのステートメントで画像を最適化でき、時間を節約できます。 ImageMagickは、すべての一般的なオペレーティングシステムにインストールできます。 たとえば、「変換」コマンドを使用すると、JPEG画像を特定の品質レベルに設定できます。

Photoshopで画像を圧縮する

画像を編集および準備するための最も重要なプログラムは、依然としてAdobePhotoshopです。 「画像>画像サイズ」で画像を縮小できます。 画像を処理した後、その圧縮の問題が発生します。 Photoshopは、「ファイル>Web用に保存」ですべての一般的な形式を提供します。 WebPはプラグインを介して追加できます。

多くの圧縮オプションがあるため、Photoshopは画像を圧縮するためのプロレベルのツールです。 ただし、自分で画像を作成または編集するのではなく、単に画像を圧縮したい場合は、Photoshopが最適な代替手段ではありません。 また、ここで紹介するプログラムの中で最も高価です。 多くの画像を次々に手動で圧縮することも、非常に時間がかかる場合があります。

フリーウェアプログラムで画像を圧縮する

画像をすばやく簡単に圧縮したい場合は、無料のツールを使用して圧縮できます。 それらの1つは、WindowsとMacの両方で利用できるフリーウェアプログラムIrfanViewです。 IrfanViewは、すべての一般的な形式と、プラグインを介したWebPをサポートしています。 画像を圧縮するオプションに加えて、寸法と色深度も変更できます。 さらに、編集した画像に直接スタンプを押して、自分の著作権を保護することもできます。

IrfanViewには、画像を圧縮するためのさまざまなオプションがあります。 サイズをピクセルまたはパーセンテージで直接変更するには、[保存]ダイアログを選択し、ファイル形式と圧縮レベルを選択します。 もう1つの可能性は、大量の画像を同時に処理できる、いわゆるバッチ変換です。 これにより、画像サイズを調整したり、画像を別のファイル形式に変換したり、圧縮を調整したりできます。

オンラインツールで画像を圧縮する

追加のプログラムをインストールしたくない場合は、オンラインで直接写真を編集できます。 CompressjpegやOptimillaなど、インターネット上でこれに使用できるツールがいくつかあります。 Compressjpegでは、ドラッグアンドドロップで最大20のJPGをアップロードでき、ファイルは自動的に圧縮されます。 これらは、個別にダウンロードすることも、ZIPアーカイブとしてダウンロードすることもできます。

Optimizillaは基本的に同じ機能を備えていますが、もう少し機能があります。 オンラインオプティマイザーは、最高の最適化アルゴリズムと圧縮アルゴリズムの組み合わせを使用して、必要な品質レベルを維持しながら、JPEG画像とPNG画像の両方を可能な限り最小のサイズに縮小します。 ここでは、品質設定と圧縮度を編集できます。

もう1つの便利な画像圧縮ツールはTinyPNGです。 TinyPNGは、圧縮技術を使用してPNGファイルのファイルサイズを縮小します。 画像の色数を選択的に減らすことにより、データを保存するために必要なバイト数が少なくなります。

図1： TinyPNGを使用して画像サイズを縮小します。

画像を自動的に圧縮する方法

オンライン新聞やオンラインショップなど、多くの画像や写真を掲載しているWebサイトの運営者にとって、画像を定期的に圧縮することはかなりの労力を伴います。 妥協点を見つけるために、彼らは通常、個々の画像の最適化なしで行い、代わりにすべての画像の固定品質レベルに依存します。 ただし、これにより圧縮が最小限になることがよくあります。

個々の画像の最適化の可能性を検討し、最大の圧縮を実現するために、アルゴリズムを使用して人間の目のような画質を評価できます。 クラウドサービスwao.ioなどのプロバイダーは、このようなアルゴリズムに依存して画像を自動的に圧縮します。 最適化は数回クリックするだけで設定でき、圧縮された形式でWebサイトのユーザーに送信されます。

Ryteで画像サイズを確認する

画像のファイルサイズとどの画像を圧縮する必要があるかわからない場合は、 RyteWebPerformanceで簡単に確認できます。 「ファイルサイズ」レポートには、既存のすべてのWebサイトドキュメントのサイズが表示されます。 ドキュメントタイプフィルターを使用して画像を個別に表示でき、テーブルビューですべての画像サイズを詳細に表示できます。

ページ速度を上げるための画像最適化のヒント

Webサイトでの使用に最適化された画像のみをWebサイトで使用する必要があります。 一般に、写真と高品質のグラフィックは.jpegとして使用する必要があります。 .pngよりも詳細が少なく単色の領域があるグラフィック。

ページ速度を向上させるために画像用にウェブサイトを最適化する方法に関するヒントをいくつか紹介します…

現在、すべてのブラウザがWebP形式をサポートしているわけではありません。WebP画像を使用してクロスブラウザ表示を確保する場合は、次のようにJPEGまたはPNG画像へのフォールバックを設定します。

<写真>
<source type = "image / webp">
<source type = "image / jpeg">
<img src = "img/testbild2。jpg"alt="フォールバック画像">
</picture>

ソースコードで適切な画像サイズを指定します。ブラウザがグラフィック自体のサイズを計算する必要がある場合、読み込みに時間がかかる可能性があります。 指定するサイズは、サーバーに保存されている画像の元のサイズに対応している必要があります。 CSSを介して画像サイズの出力を定義することもできます。

<img src = "testimage.png" width = "300" height = "200">

画像からメタタグとEXIFデータを削除する：たとえば、自分のカメラやスマートフォンからの画像を使用する場合、それらには場所、使用されたカメラ、その他のデータなどの多くの追加情報があります。 TinyPNGのようなツールを使用すると、それらを削除してストレージスペースを節約できます。

HTTP / 2への変換：画像が通常のHTTP接続を介して読み込まれる場合は、各画像を個別にリクエストする必要があります。 WebサーバーでHTTP/2に切り替えることにより、Webサイト上のすべての画像とその他のファイルが単一の接続を介してロードされ、ロード時間を大幅に短縮できます。 HTTP/2にはSSL証明書が必要です。

CDNを使用する：上記のように最適化しても大きな画像がまだたくさんある場合は、次のステップはそれらをユーザーに近づけることです。 上記のwao.ioなどのコンテンツ配信ネットワーク（CDN）は、Webサイト上の画像を高速サーバーにキャッシュし、そこからユーザーに送信します。

読み込み時間を短縮するためのヒントについては、ページ速度の最適化に関する詳細な記事をご覧ください。

概要：画像圧縮

優れた画像圧縮は、Webサイトのページ速度を大幅に向上させることができます。 WebPなどの最新のフォーマットはここでのパイオニアです。

ただし、画像がユーザーにとって魅力的に見えるように、画像の品質を維持するように常に注意する必要があります。 したがって、ユーザーエクスペリエンスの観点から、画像の圧縮とその品質の間には適切な妥協点を見つける必要があります。

画像を圧縮するために使用できるさまざまな方法を示しました。 これは、Photoshopまたは他の画像プログラムでの個々の画像の詳細な作業から始まります。 オンラインアプリケーションでのバッチ処理により、複数の画像をすばやく編集できます。

最後に、Webサイトで多くの画像を利用できるようにし、画像の最適化にかかる労力をできるだけ少なくしたい場合は、自動化された代替手段の使用を検討する必要があります。