今日は、私にとって最も身近で大切なテーマ、画像圧縮についてお話します。半分冗談ですが、品質を落とさずに画像ファイルのサイズを大幅に削減すると、奇妙な満足感が得られます。

この投稿のインスピレーションは、Beaver Builders Facebook グループで非常に人気のある投稿から生まれました。 ImageOptim での Google の新しい Guetzli アルゴリズムの有効化と使用に関するビデオ チュートリアルを撮影したばかりで、これまで馴染みのなかった他のすべてのオプションに衝撃を受けました。この記事では、Web 用に画像を圧縮するためのヒントとツールについて説明します。

最初の用語

さらに詳しく説明する前に、いくつかの一般的な用語を確立しましょう。

JPEG、PNG、SVG – これらは、Web 上で最も人気のある 3 つの画像ファイル タイプです。このチュートリアルでは、圧縮と最適化によって最もメリットが得られる JPEG と PNG に主に焦点を当てます。

JPEG は通常、写真や Web グラフィックスなどの透明度のない高忠実度の画像に適しています。

PNG は、アイコンやロゴなど、透明性が必要なものに最適です。 PNG は、Photoshop または選択したグラフィック編集ツールから出力された後に大幅に最適化することもできます。

ロスレスとロッシー– これらは圧縮方法です。可逆圧縮とは、画像の品質が損なわれないことを意味します。文字通り、まったくありません。これには、画像や品質に影響を与えないものからメタデータを削除することが含まれます。

非可逆とは、圧縮アルゴリズムにより画像の品質が低下することを意味します。より良い圧縮結果が得られますが、画質は犠牲になります。ほとんどの非可逆圧縮ツールにはパーセンテージ スライダーが用意されているため、ファイル サイズに対する品質のバランスを選択できます。

ヒント:大きな画像の背景の場合、画像を少しぼかしたり、写真の上に不透明なカラー レイヤーを追加したりすることがよくあります。詳細を削減したり、カラーを正規化することは、ファイル サイズを大幅に削減できる優れた美的スタイルの選択です。実際の動作は求人ページでご覧いただけます。

画像をどの程度圧縮すればよいですか?

画像圧縮の目的は、品質をあまり犠牲にすることなく、ファイル サイズを可能な限り削減することです。これは科学というよりも芸術であり、「許容できる品質」のレベルは状況によって異なります。

写真スタジオは自社の作品を最高品質で強調したいと考えるでしょうが、不動産ウェブサイトはページ上により多くの画像を表示する代わりに品質を犠牲にすることをいとわないかもしれません。

ほとんどの画像編集ソフトウェアでは、さまざまな品質で画像をエクスポートできます。ただし、専用の画像圧縮ツールを使用している場合は、そのソフトウェアに可能な限り最高の品質を供給し、そこから圧縮アルゴリズムを機能させることが最善の場合があります。

画像圧縮ツールのオプション

最近気づいたのですが、画像圧縮のためのツールやサービスに関しては、選択肢が豊富にあります。

イメージオプティム

私は ImageOptim から始めましたが、今でも ImageOptim を好んでいます。 ImageOptim は OSX でのみ使用できますが、JPEG ファイルと PNG ファイルの両方の非可逆圧縮と可逆圧縮をサポートしています。 Google の比較的新しい圧縮アルゴリズムである Guetzli を使用するように構成することもできます。 Guetzli は、他のアルゴリズムよりも平均してファイル サイズを 20 ～ 30% 削減できます。

ImageOptim は Mac の Dock に常駐するプログラムで、画像をプログラム アイコンにドラッグ アンド ドロップするだけで画像を圧縮します。私は一度に 1 つまたは 2 つの画像を最適化することが多いので、このソリューションは私にとって非常に役に立ちます。ただし、多数の画像やファイル サイズの大きい画像を処理している場合は、大規模なジョブには他のオプションの方が適している可能性があります。

WPMU 開発者のスマッシュ

Smush は、WPMU Dev が提供する無料の WordPress プラグインで、WordPress のインストール時や WordPress にアップロードするときに既存の画像を最適化するように設定できます。 Smush が優れているのは、面倒な作業が WPMU Dev のサーバーによって行われ、画像の最適化とサイズ変更の両方が行われるためです。

クライアント、特にデジタル カメラから数メガバイトの画像を直接アップロードするクライアント向けの Web サイトを構築している場合、Smush は設定しておくだけで済む優れたオプションです。

タイニーPNG

TinyPNG は、Web ベースの画像圧縮プログラムです。画像 (最大 5bm) をアップロードし、圧縮バージョンをダウンロードできます。これにより帯域幅が消費されるため、低速なインターネット接続や従量課金制のインターネット接続を使用している場合には、最適なオプションではない可能性があります。 JPEG および PNG ファイル形式をサポートします。無料です。圧縮の品質レベルを制御する機能はないようです。

TinyPNG を試した後でも、やはり ImageOptim の方が好みだと思いますが、Windows ユーザー、簡単な 1 回限りのジョブ、または特に Web ベースのコンプレッサーを探しているユーザーにとっては、これは素晴らしいオプションとなるでしょう。または、ローカル マシンではなくクラウドに処理をオフロードしようとしている場合。

イマジファイ

Imagify は、Web ベースの SASS オプションの 1 つで、画像をアップロードするときに、または WordPress 管理領域から直接画像を最適化およびサイズ変更する専用の WordPress プラグインを提供します。 Imagify WordPress プラグインは、平均 4.5 つ星の印象的なレビューを誇り、多くのレビューでは、Imagify で実現される画質が他のプラグインよりも優れていると述べています。

Imagify には、2 MB 未満の画像をアップロードして最適化できる無料プランがあります。イメージの最適化されたバージョンは、サーバーから 24 時間ダウンロードできる状態になります。

JPEGミニ

JPEGMini は、主力ソリューションを探している人にとって魅力的な SASS サービスです。 e コマース ストア用に数万枚の高解像度の商品画像を最適化する任務を負っていると想像してください。 JPEGMini を使用すると、その処理をすべて、おそらく高速で最適化されたクラウド サーバーにオフロードできるようになります。

ショートピクセル

ShortPixel も Web ベースの SASS です。画像圧縮をクラウドサーバーにオフロードしたい場合は、チェックしてみると良いでしょう。無料プランでは月に最大 100 枚の画像を最適化でき、それ以上の場合は月額 5 ドルから始まるプレミアム プランがあります。 ShortPixel には WordPress プラグインもあり、BB チームの他のメンバーの中で最も人気があります。

イマジファイ

あなたのお気に入りは何ですか？

この投稿のきっかけとなった元の Facebook スレッドにアクセスすると、他にもいくつかの選択肢があり、さまざまな理由でどちらかを好む人々がいることがわかります。あなたのお気に入りを見逃していませんか？それが何なのか、そしてそれが気に入った理由をコメントで教えてください。

また、あなたがパフォーマンスのために食べて、寝て、息をするタイプなら、現代のパフォーマンスのベストプラクティスについてのジョン・ブラウンへのこのインタビューは魅力的でしょう。