ウェブサイトのパフォーマンスを向上させるために画像を最適化する方法

概要

画像は、Web 上で提供される最も基本的なタイプのコンテンツの 1 つです。一枚の写真は千の言葉に値すると言われています。しかし、注意しないと、画像のサイズが数十メガバイトに達することもあります。

したがって、Web 画像は鮮明でクリアである必要がありますが、サイズを小さく圧縮することで、読み込み時間を許容できるレベルに保つことができます。

私のサイトでは、ホームページのページ サイズが 1.1 MB を超えており、そのうち約 88% を画像が占めていることに気付きました。また、提供している画像が (解像度の点で) 必要以上に大きいことにも気付きました。明らかに、改善の余地が大いにありました。

私は Addy Osmani の優れた電子書籍「Essential Image Optimization」を読み始め、その推奨事項に従って自分のサイトで画像の最適化を始めました。その後、レスポンシブ画像について調査し、それを適用しました。

これにより、ページ サイズは 445kb に、約 62% 削減されます。

画像圧縮とは

画像を圧縮するとは、画像を許容可能な解像度に保ちながらファイル サイズを縮小することです。私は、サイトの画像を圧縮するために imagemin を使用しています。

imagemin を使用するには、Node.js がインストールされていることを確認し、ターミナル ウィンドウを開いてプロジェクトに cd し、次のコマンドを実行します。

npm インストール imagemin

次に、imagemin.js という新しいファイルを作成し、次の内容を記述します。

定数imagemin = require('imagemin');
const PNGImages = 'assets/images/*.png';
const JPEGImages = 'assets/images/*.jpg';
const 出力 = 'build/images';

プロジェクト構造に合わせて、必要に応じて PNGImages、JPEGImages、出力の値を変更できます。

また、画像圧縮を行うには、圧縮する画像の種類に応じて対応するプラグインもインストールする必要があります。

JPEG/JPG

JPGの利点

JPG の最大の特徴は非可逆圧縮です。この効率的な圧縮アルゴリズムにより、非常に軽量な画像形式になります。一方、JPG 圧縮は「非可逆」圧縮と呼ばれていますが、それでも高品質の圧縮方法です。画像サイズを元のサイズの 50% 未満に圧縮すると、JPG は 60% の品質を維持できます。さらに、JPG 形式では、1 つの画像を 24 ビットで保存し、最大 1600 万色を表示できるため、ほとんどのシナリオで色要件を満たすのに十分です。これにより、適切なビジネス シナリオで使用する限り、圧縮前後の品質の低下は人間の目には簡単には検出されません。

JPGの使用シナリオ

JPG はカラフルな画像を表示するのに適しています。日常の開発では、JPG 画像が大きな背景画像、カルーセル画像、バナー画像として表示されることがよくあります。

JPGの欠点

確かに、非可逆圧縮は、上記のカルーセルでは明らかにしにくいですが、ベクター グラフィックスやロゴなど、線がはっきりしていて色のコントラストが強い画像を処理する場合、人工的な圧縮によって生じる画像のぼやけが非常に顕著になります。

また、JPEG 画像は透明処理をサポートしていないため、透明画像を表示するには PNG を呼び出す必要があります。

MozJPEG を使用して JPEG を圧縮する

ここでは Mozilla の MozJPEG ツールが使用されており、imagemin-mozjpeg を介して Imagemin プラグインとして使用できます。次のコマンドを実行してインストールできます。

npm インストール imagemin-mozjpeg

次に、imagemin.js に次のコードを追加します。

const imageminMozjpeg = require('imagemin-mozjpeg');
const JPEGImages を最適化 = () =>
  imagemin([JPEGImages], 出力, {
    プラグイン: [
      画像最小Mozjpeg({
        品質: 70,
      }）、
    ]
  });
JPEG画像を最適化する()
  .catch(エラー => console.log(エラー));

ターミナルで node imagemin.js を実行すると、スクリプトを実行できます。これにより、すべての JPEG 画像が処理され、最適化されたバージョンが build/images フォルダーに配置されます。

ほとんどの場合、品質を 70 に設定すると十分に鮮明な画像が生成されますが、プロジェクトのニーズは異なる場合があり、ニーズに合わせてこの値を設定できます。

デフォルトでは、MozJPEG はプログレッシブ JPEG を生成します。これにより、画像が完全に読み込まれるまで、低解像度から高解像度まで画像が徐々に読み込まれます。また、エンコード方法により、元の jpeg よりもわずかに小さくなります。

Sindre Sorhus のこのコマンドライン ツールを使用して、JPEG 画像がプログレッシブかどうかを確認できます。

Addy Osmani は、プログレッシブ JPEG の使用の長所と短所をわかりやすくまとめています。私の場合、メリットがデメリットを上回ると感じているので、デフォルト設定のままにしています。

オリジナルの jpeg を使用したい場合は、オプション オブジェクトで progressive を false に設定できます。なお、imagemin-mozjpeg のバージョンが変更された場合は、必ず該当するドキュメントを再度確認してください。

PNG (PNG-8 および PNG-24)

PNGの長所と短所

PNG (Portable Network Graphics Format) は、ロスレス圧縮による高忠実度画像形式です。 8 と 24 は、2 進数の桁数です。これまでの知識で述べた対応によれば、8 ビット PNG は最大 256 色をサポートし、24 ビットは約 1600 万色を表現できます。

PNG 画像は JPG よりも色彩表現が豊かで、線の処理も繊細で、透明度も良好です。これは、上で述べた JPG の制限を補うもので、唯一の欠点はサイズが大きすぎることです。

PNG アプリケーション シナリオ

前述したように、色彩豊かな複雑な画像は PNG で処理するとコストが高くなるため、通常は JPG で保存します。

PNG は線や色のコントラストを扱う上で優れているため、シンプルな色と強いコントラストの小さなロゴ、画像、背景などを表現するために主に使用されます。

pngquant で PNG 画像を最適化する

pngquant は PNG 画像を最適化するために私が選んだツールです。imagemin-pngquant 経由で使用できます。

npm インストール imagemin-pngquant

次に、imagemin.js ファイルに次のコードを追加します。

const imageminPngquant = require('imagemin-pngquant');
const 最適化PNG画像 = () =>
  imagemin([PNGImages], 出力, {
    プラグイン: [
      imageminPngquant({ 品質: '65-80' })
    ]、
  });
JPEG画像を最適化する()
  .then(() => PNG画像を最適化します())
  .catch(エラー => console.log(エラー));

品質設定を 65 ～ 80 に設定すると、ファイル サイズと画像品質のバランスが適切に取れることがわかります。

これらの設定により、サイトのスクリーンショットを 913kb から 187kb に取得できましたが、視覚的な損失はまったくなく、なんと 79% もサイズが小さくなりました。

ウェブP

WebPの利点

WebP は、JPEG のように詳細な画像を処理し、PNG のように透明度をサポートし、GIF のように動的な画像を表示できるため、複数の画像ファイル形式の利点を兼ね備えています。
WebP の公式紹介では、この点についてより権威ある説明があります。

WebP ロスレス画像は、PNG に比べてサイズが 26% 小さくなります。同等の SSIM 品質インデックスでは、WebP の非可逆画像は同等の JPEG 画像よりも 25 ～ 34% 小さくなります。 Lossless WebP は、わずか 22% の追加バイトで透明度 (アルファ チャネルとも呼ばれます) をサポートします。非可逆 RGB 圧縮が許容される状況では、非可逆 WebP も透明性をサポートし、通常、PNG と比較して 3 倍のファイル サイズになります。

WebP画像をサポートするブラウザに配信する

WebP は Google が導入した比較的新しい形式で、ロスレス形式とロッシー形式の両方で画像をエンコードすることでファイル サイズを小さくすることを目的としており、JPEG や PNG の優れた代替手段となっています。

WebP 画像は、一般的に JPEG や PNG と同等の鮮明さですが、ファイル サイズははるかに小さくなります。たとえば、上記のスクリーンショットを WebP に変換すると、913kb の元の画像と同等の品質の 88kb のファイルが得られ、90% の削減が実現しました。

個人的には、視覚的な結果は同等であり、サイズの節約は無視できないと思います。

可能な場合は WebP 形式を使用する価値があることがわかったので、WebP のブラウザー サポートが普遍的ではないため、WebP が JPEG や PNG の完全な代替ではないことに注意することが重要です。

執筆時点では、Firefox、Safari、Edge は WebP をサポートしていないブラウザです。

しかし、caniuse.com によると、世界中のユーザーの 70% 以上が WebP をサポートするブラウザを使用しています。つまり、WebP 画像を使用すると、約 70% の顧客に、より高速な Web ページと優れたエクスペリエンスを提供できます。

インストールするには、次のコマンドを実行します。

npm インストール imagemin-webp

次に、imagemin.js ファイルに次のコードを追加します。

定数 imageminWebp = require('imagemin-webp');
const convertPNGToWebp = () =>
  imagemin([PNGImages], 出力, {
    使用： [
      イメージ最小Webp({
        品質: 85,
      }）、
    ]
  });
定数convertJPGToWebp = () =>
  imagemin([JPGImages], 出力, {
    使用： [
      イメージ最小Webp({
        品質: 75,
      }）、
    ]
  });
JPEG画像を最適化する()
  .then(() => PNG画像を最適化します())
  .then(() => convertPNGToWebp())
  .then(() => convertJPGToWebp())
  .catch(エラー => console.log(エラー));

品質を 85 に設定すると、PNG と同等の品質でありながら、サイズがはるかに小さい WebP 画像が生成されることがわかりました。 JPEG の場合、品質を 75 に設定すると、視覚的な品質とファイル サイズのバランスが適切に保たれます。

WebP 画像を HTML 形式で提供する

WebP 画像を取得したら、次のマークアップを使用して、WebP を使用できるブラウザーに画像を提供し、WebP と互換性のないブラウザーには png または jpeg を提供することができます。

<写真>
    <ソース srcset="sample_image.webp" type="image/webp">
    <ソース srcset="sample_image.jpg" type="image/jpg">
    <img src="sample_image.jpg" alt="">
</画像>

このタグを使用すると、image/webp メディア タイプを認識するブラウザーは Webp 画像をダウンロードして表示し、その他のブラウザーは JPEG 画像をダウンロードします。

<picture> をサポートしていないブラウザは、すべてのソース タグをスキップし、下部の img タグを読み込みます。そのため、当社はすべてのブラウザ クラスのサポートを提供することで、ページを徐々に強化してきました。

いずれの場合も、img タグは実際にページにレンダリングされるものなので、構文の必須部分であることに注意してください。 img タグを省略すると、画像はレンダリングされません。

<picture> タグとその中に定義されているすべてのソースは、ブラウザが使用する画像へのパスを選択できるようにするために存在します。 ソース画像が選択されると、その URL が img タグに渡され、それが表示されます。

つまり、ブラウザは <picture> タグやソース タグをレンダリングしないため、これらのタグにスタイルを設定する必要はありません。 したがって、スタイル設定にはこれまでどおり img タグを引き続き使用できます。

上記は、画像を最適化してウェブサイトのパフォーマンスを向上させる方法の詳細です。画像を最適化してウェブサイトのパフォーマンスを向上させる方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。