PhotoshopでWebP形式に画像を最適化

ますます多くの企業が、ウェブサイトからすべての画像を移行するようにデザインチームに求めています。 WebP従来のJPGとPNGを置き去りにする。その理由は恣意的なものではなく、 読み込み速度、SEO、ユーザーエクスペリエンス問題は、PhotoshopやLightroom Classicを使っている場合、一見するとこれらのプログラムはこのフォーマットとはあまり相性が良くないように思えることです。

フォルダ全体を受け取った場合 あなたは.pngファイルと.jpegファイルを持っており、それらをWebP形式に変換するように依頼されました。疑問が生じるのは当然です。正しくエクスポートするにはどうすればよいのか？、品質の低下を防ぐにはどのような設定を使用すればよいのか？、カラープロファイルはどうすればよいのか？ WebPをまだサポートしていないブラウザの場合このガイドでは、ステップバイステップで説明します。 PhotoshopでWebP形式の画像を最適化する方法重量、品質、SEOの観点から注意すべき点、そしてウェブサイトやECサイトに問題なく統合する方法について解説します。

WebPとは何ですか？なぜ皆がWebPについて話しているのですか？

WebPは、Googleがウェブ向けに開発した最新の画像フォーマットです。ファイルサイズを削減するために、VP8フレームエンコードとブロック予測に基づく高度な圧縮技術を使用しています。 JPGやPNGと非常によく似た視覚的品質を維持するだからこそ、Google PageSpeed、Lighthouse、Semrushなどの監査ツールが繰り返し推奨しているのです。

WebPの大きな利点は、 JPEGやPNGといった同等のファイル形式に比べて、最大30%軽量なファイルを作成できます。可逆圧縮と非可逆圧縮の両方で。実際には、これは次のことを意味します。 サイトの読み込み速度が速くなります。これにより帯域幅の消費量が削減され、ユーザーエクスペリエンスが向上します。これはGoogleがランキングにおいて非常に重視している点です。

そのもう一つの大きな強みは、汎用性の高さです。WebPは、PNGのような可逆圧縮と可逆圧縮、透明度（アルファチャンネル）、GIFのようなアニメーションをサポートしていますが、ファイルサイズははるかに小さくなります。そのため、WebPは特に次のような場合に興味深いものです。 オンラインストア、画像が多いブログ、商品ランディングページ、視覚的な負荷が高いウェブサイト.

具体的な例を挙げると、 PNG形式で600kB以上あった画像が、WebP形式では5kB未満にまで縮小された。ユーザーが品質の低下をほとんど感じることなく、ファイルサイズを約80分の1に縮小できるのです。これはページ表示速度に大きな違いをもたらします。

WebPがJPG、PNG、GIFなどの他の形式よりも優れている点

サーバーの半分をWebP形式に急いで変換する前に、この点について明確にしておくことが重要です。 このフォーマットは、ウェブ上で最も一般的に使用されているフォーマットと比べて、実際にはどのような利点があるのでしょうか？全体像は以下のとおりです。

JPG（またはJPEG）これは写真用の標準的なものです。 非可逆圧縮これにより、元の画像情報の一部を犠牲にすることでサイズを大幅に縮小できますが、通常は人間の目にはほとんど気づかれません。品質調整が可能で、製品写真、ポートレート、または複雑なシーンに最適ですが、 透明性に欠ける。.

PNG: 広く使用されている 透明度のあるロゴ、アイコン、グラフィックロスレス圧縮を使用しているため、画像データはすべて保持されます。これはつまり、 画質は向上するが、一般的にファイルサイズは大きくなる。PNG-24はすべての色と品質を維持しますが、PNG-8は色数を削減するため、情報が失われる可能性があります。

GIF歴史的に、 ウェブ上のシン​​プルなアニメーション色数を減らし、フレームごとのアニメーションをサポートしていますが、 提供される内容の割には、ファイルサイズが大きい場合が多い。今日では、WebPはほぼあらゆる点でそれを凌駕している。

SVGこれはベクター形式であり、ロゴ、アイコン、イラストなど、 鋭さを失わずに登る問題は、本来の用途以外で使用した場合（例えば、巨大なラスター画像をSVGに入れる場合）、次のような結果になる可能性があるということです。 巨大なファイルで、同等のPNGやWebPよりも数倍重い。.

WebP: 上記のすべての長所を兼ね備えています: 可逆圧縮または非可逆圧縮、透明度サポート、アニメーション、EXIFおよびXMPメタデータ、そしてJPGより25～34%、PNGより約26%小さいサイズ。Googleの調査によると、Chrome、Firefox、Edge、Safari（バージョン14以降）といった最新のブラウザも、この機能を幅広くサポートしている。

ウェブサイトの画像を最適化する理由（WebP形式に限らず）

画像は通常 ウェブページが読み込む総バイト数の60%～65%それらを制御しなければ、技術的な面がどれほどうまく設定されていても、 ウェブサイトが遅くなるこれは事実上あらゆるものに直接的な影響を与える。

読み込み速度の向上画像のサイズを縮小することによって（WebP、圧縮率の高いJPG、最適化されたPNGのいずれを使用する場合でも）、 ページの読み込みがはるかに速くなりましたこれは特にモバイル端末や低速回線において顕著であり、1キロバイトの容量も重要となる。

帯域幅の消費量が少ない体重が軽いということは サーバーとユーザーのデータプランで消費されるリソースが少なくなります1日に数千件のアクセスがあるECサイトのような規模では、トラフィックの削減効果は非常に大きいものとなる。

SEOとポジショニングGoogleをはじめとする検索エンジンは、この点を考慮に入れている。 読み込み時間とユーザーエクスペリエンスウェブサイトの速度が速いほど、検索順位が上がりやすく、オーガニックトラフィックが増加し、最終的にはより多くのビジネスを生み出すことができる。

コンバージョンと売上eコマースでは、読み込みの遅延が1秒ごとに 患者、見込み客、または売上の損失鮮明で反応の良い画像は、摩擦を軽減し、ユーザーが目的の操作を完了する可能性を高めます。

さらに、画像に気を配ることで よくできたプロフェッショナルなウェブサイトという印象ぼやけた画像、ピクセル化した画像、または途切れ途切れの画像は、非常に粗悪な印象を与え、どんなに丁寧にデザインやコピーライティングを行ったとしても、台無しにしてしまう可能性があります。

エクスポートする前に正しい形式を選択してください

最も一般的な失敗の1つは 「習慣」で全ての画像を同じ形式でアップロードするそれぞれのケースで本当に必要なものをじっくり考えることなく、JPG、PNG、SVG、WebPの中から適切なフォーマットを選択することが、大きな違いを生むのです。 軽量なウェブサイトと、トラック一台分の重さのウェブサイト.

一般的に、推奨事項は以下のとおりです。

• 複雑な写真と背景： 適切に調整された非可逆圧縮を用いたJPGまたはWebP形式。
• 透明度のあるロゴ、アイコン、グラフィック： PNG（最高の画質が必要な場合）または、さらに良いのは、ファイルサイズを小さくするために透明度を設定したWebPを使用することです。
• 純粋なベクターグラフィックス： 巨大なラスター画像を埋め込んでいない、適切に準備されたSVGファイル。
• 光のアニメーション： 対象ブラウザが対応している場合は、GIFではなくWebPアニメーションを使用します。

フォーマットを変更するだけで状況が一変するケースもあります。実際のプロジェクトでは、画像が検出されたのですが、 ベクターを使用していないSVGは、他のSVGの6倍以上の容量があった。 サイトからの重要な画像。PNGに変換するとファイルサイズが約20分の1に縮小され、WebPに変換すると、 最終的なファイルサイズは5kB未満でした。これは魔法ではなく、単に適切なフォーマットを選択するだけです。

画像サイズと解像度と重量のバランス

ウェブ向けに画像を最適化する場合、常に密接に関係する3つの要素があります。 ピクセル単位の寸法、解像度（PPIまたはDPI）、キロバイト単位のサイズこれらのいずれかを怠ると、通常は画像が大きすぎたり、画質が悪くなったりする結果となる。

ピクセル単位の寸法と CSSのwidthプロパティアップロードする画像の種類に関わらず、 ウェブ上で実際に占めるスペースに合わせて調整するバナーが400x400ピクセルで表示される場合、「念のため」800x800でアップロードしても意味がありません。なぜなら、視覚的には400x400で表示されるからです。 大きなイメージとして重みを持ち続けるだろう小さすぎてもいけません。400x400 のスペースに 200x200 の画像をアップロードすると、ブラウザがそれを引き伸ばし、 画像はぼやけて表示されます.

解像度（PPPまたはDPI）ウェブデザインでは印刷解像度は必要ありません。しかし、印刷物では通常、印刷解像度が使用されます。 300dpi以上画面用 72 dpiで十分です実際には、多くのプラットフォームはDPI値を無視してピクセル単位で直接処理を行いますが、Webで使用する場合はDPI値を低く設定することで、サイズが大きすぎる印刷用ファイルをドラッグする手間を省くことができます。

サイズ（KB）最終的にパフォーマンスを決定するのはファイルサイズです。一般的に、 個々の画像のサイズは200kB以下に抑えるようにしてください。特に重要なページ（ホームページ、製品ページ、キャンペーンランディングページ）では、 1ページあたりの画像総数は1MBを超えないようにしてください。 いつでも可能なとき。

Photoshopやその他のエディターでは、これらのパラメーターを実験して 最高の品質と重量のバランスを実現するコツは、圧縮品質を徐々に下げていき、アーティファクトやディテールの損失が目立ち始めたら、一段階上げることです。

Photoshopでウェブ用に画像を最適化する方法

多くの人がカメラや携帯電話から直接写真をアップロードしていますが、プロのアプローチは 必ずPhotoshopのようなエディターを通してください サイズ調整、カラープロファイルの解決、そして適切な圧縮を行うために、Photoshopは長年にわたり、まさにこの目的のために設計されたツールを組み込んできました。

重要な機能の一つは 「ウェブ用に保存」 （クラシック版では） 各圧縮レベルが重量と品質にどのような影響を与えるかをプレビューしますファイルメニューから、またはショートカットを使ってアクセスできます。 WindowsではCtrl + Alt + Shift + S （またはmacOSの同等の機能）。そこで以下の操作が可能です。

• 出力形式を選択します。 JPG、PNG-8、PNG-24、GIFなど、それぞれの形式を好みに合わせて調整してください。
• JPG画質を調整する： ウェブでの使用においては、70～80の値で通常は十分です。100との違いは人間の目にはほとんど認識されませんが、重量は明らかに減少します。
• PNG-8とGIFにおけるパレットの制御方法： デザイン上可能な場合は、色数を減らす。
• ダイアログボックスで画像を直接拡大縮小します事前にキャンバス上でサイズを変更する必要はありません。

さらに、Photoshopでは最適化も可能です。 カラーパレット、メタデータの包含または除外、その他の圧縮技術 これらは適切に調整することで、WebPに変換する前に各画像から最大限の情報を引き出すのに役立ちます。

PhotoshopとLightroom ClassicからWebP形式でエクスポート

かなり長い間 PhotoshopとLightroom ClassicはWebPをネイティブでサポートしていませんでした。現在では、最新バージョンに組み込まれた機能を利用したり、専用のプラグインを追加したりすることで、通常のワークフローを変更することなくこのフォーマットを扱う方法がいくつか存在する。

WebP オプションが「エクスポート」にまだ表示されないバージョンを使用している場合は、 公式プラグインをインストールすれば、Photoshopから直接この形式でエクスポートできるようになります。インストール後、Web 用にエクスポートまたは保存する際に、WebP が利用可能なフォーマットとして表示され、次のようなパラメータを調整できるようになります。

• 圧縮タイプ: 損失あり、または損失なし。
• カリダド： 中間値（70～80程度）は、ほとんどの写真で優れた結果をもたらします。
• 透明度： アルファチャンネルが必要な場合に、それを維持するかどうか。
• メタデータ： EXIFとXMPを保持するか、数KBの容量を節約するために削除するかを決定します。

Lightroom Classic では、一般的なワークフローは次のようになります。 写真の現像と調整 いつものように、そして従来の形式（例えば、圧縮率の高いJPG）でエクスポートしてから、 外部ツールまたはスクリプトを使用して、そのJPGをWebPに変換します。Photoshopのプラグインを使うほど簡単ではありませんが、開発作業をすべてLrC内で完結させることができます。

しなければならない場合 大量の画像を変換する非常に推奨される方法は、Photoshopで[画像/画像]を作成することです。 滴つまり、写真フォルダをドラッグして、 定義した設定でWebPへの一括変換を自動化しますこれにより、同じ作業を何百回も繰り返す手間が省けます。

Photoshopを使いたくない場合や、別の軽量な代替ソフトを好む場合は、次のようなポータブルエディターを試してみてください。 フォトデーモン これにより、バッチ処理のワークフローも迅速化されます。

大量処理向けのオンラインコンバーターと自動化システム

Photoshopを使いたくない場合、またはプラグインをインストールできない場合は、 PNG/JPGからWebPへのオンラインコンバーター最もよく使われる機能のいくつかでは、以下のことが可能です。

• 圧縮レベルを選択してください （品質管理に不可欠なもの）
• 一定のバッチ制限まで、複数のファイルを一度にアップロードできます。
• GIFアニメーションをWebPアニメーションに変換する機能も備えています。

これらのサービスの欠点は、 通常、バッチあたりのファイル数を制限している最大容量やダウンロード速度にも影響しますし、大容量画像をアップロードするには安定した接続環境も必要です。

あなたが開発者であるか、近くにIT担当者がいる場合は、もう1つの非常に強力な選択肢は Node.jsを使用して変換を自動化する 次のようなモジュール 画像分 そしてプラグイン イメージミンウェブプこの方法を使えば、変換処理をビルドスクリプト、CI/CDパイプライン、または夜間プロセスに統合できるため、プロジェクトに追加された新しい画像が自動的にWebP形式に変換されます。

WebP圧縮：非可逆圧縮と可逆圧縮

WebP にエクスポートする際の重要な質問の 1 つは、 非可逆圧縮または可逆圧縮選択はあなたの優先順位次第です。 絶対的な品質または性能.

非可逆圧縮: これは、次のような場合に推奨されるオプションです。 サイトのパフォーマンスが最優先事項ですロッシーWebPは、予測と数学的変換に基づいて、冗長な情報やほとんど知覚できない情報を除去するアルゴリズムを使用します。Googleによると、 非可逆圧縮のWebP画像は、同等のJPG画像よりも25～34%小さくなる可能性がある。ほとんどの場合、非常に似た視覚的な品質を維持している。

無損失圧縮: 必要な場合は、これが代替案です すべての詳細をそのままにしておく例えば、色に非常に敏感な企業グラフィックや、後で編集する必要のあるアセットなどでは、ロスレスWebPは平均的に魅力的な選択肢となります。 これにより、PNGよりも約26%小さいファイルサイズを実現できます。外観はオリジナルと全く同じ。

実際には、ほとんどのウェブサイトやオンラインストアは 適切に調整された損失による圧縮 商品写真、バナー、および大容量のビジュアルリソースについては、 非常に特定の要素に対するロスレス圧縮 すべてのピクセルが重要となる場所。

画像をレスポンシブデザインに対応させ、様々なデバイスでの使用に適した形式に調整する。

画像の最適化は、フォーマットや圧縮だけではありません。 デバイスによって配信方法が異なります同じ2.000ピクセル幅の画像を携帯電話に送信するのと、4Kモニターに送信するのとでは、全く意味がありません。

理想的には、 各画像には、携帯電話、タブレット、デスクトップ向けに最適化された異なるバージョンが用意されています。そして、レスポンシブ画像技術を用いてブラウザに最適な画像を選択させるようにします。これにより、モバイルデバイスが巨大な画像をダウンロードして縮小表示する必要がなくなります。

さらに、レスポンシブバージョンでは、 不要な画像を表示しないようにする多くのランディングページやセクションには、デスクトップでは見栄えが良いものの、モバイルでは無限スクロールを引き起こし、データ消費を増やすだけの余分な装飾が施されています。そのような場合、 フィラー画像をトリミング、置換、または削除する 小さな画面での閲覧体験を大幅に向上させるのに役立ちます。

HTMLでWebPを使用する方法：古いブラウザでウェブサイトが壊れないようにするには

WebPに切り替える際に最も懸念される点の1つは、 まだサポートしていないブラウザとの互換性既に幅広いブラウザ（Chrome、Firefox、Edge、最新版Safariなど）に対応しているものの、古いブラウザを使用しているユーザーもいるかもしれない。

誰一人取り残さずに WebP を導入する推奨方法は、 古典的なマーキングのために HTML内では、基本的なパターンは次のとおりです。

このようにして、 WebPをサポートするブラウザは最新バージョンを読み込みます指定しない場合は、自動的に代替のJPG画像が使用されます。複数のタグを追加できます。異なる解像度や使用条件で メディアクエリ 例えば、 WebP形式はモバイル端末でのみ利用可能です。 または画面幅に応じて。

この技術により、 互換性を損なうことなくWebPの利点を活用する特に、ユーザーのブラウザを正確に制御できない大規模プロジェクトに取り組む際に役立ちます。

CSSとModernizrでのWebPの使用

CSSでは、この問題はややデリケートです。 ネイティブメカニズムは、 背景画像のWebPサポートをテストするには、通常、[ライブラリのリスト]などのJavaScriptライブラリが使用されます。 モダナイザー.

Modernizr は、 ブラウザがWebPをサポートしているかどうかを検出する そして、結果に応じて、要素に特定のクラスを追加します。そこから、例えば次のような条件付きCSSルールを作成できます。

.webp .hero { background-image: url(«hero-image.webp»); }
.no-webp .hero { background-image: url(«hero-image.jpg»); }

このアプローチでは、 最新のブラウザは背景画像をWebP形式でダウンロードしますまた、古いファイルも引き続きJPGまたはPNGを使用するため、HTMLを複製する必要はありません。これは、多くのファイルを使用する場合に非常に便利なソリューションです。 CSSで画像を背景画像として使用する.

WebPとWordPress：ネイティブサポートとプラグイン

サイトがWordPressで構築されている場合、朗報は、 バージョン5.8以降、CMSはWebP画像をネイティブでサポートしています。つまり、WebPファイルをJPGファイルやPNGファイルと同じようにメディアライブラリにアップロードすれば、WordPressが対応するサムネイル画像を生成します。

古いバージョンを使用している場合、または何らかの理由で更新できない場合は、 WebPのサポートを追加するプラグインはいくつかあります。これらのプラグインは通常、以下の処理を行います。

• WebPファイルのアップロードを許可する メディアマネージャーへ。
• 既存のJPGファイルとPNGファイルを自動的に変換します WebP形式に対応し、サポートされていないブラウザ向けには代替手段を維持する。
• 画像URLを書き換える ブラウザがWebPをサポートしている場合は、常にWebP形式で配信する。

さらに、 Imagifyなどの最適化プラグインやその他の圧縮ツール これにより、画像サイズ（WebPを含む）がさらに縮小され、品質パラメータが微調整され、不要なメタデータが削除されます。したがって、WordPressは実質的に自動化されたシステムになります。 画像最適化とインテリジェント配信.

ECサイトに商品写真をアップロードするための必須チェックリスト

オンラインストアの場合、商品画像は 販売の鍵となるアイテムの1つしかし、適切に管理しないと、パフォーマンスの最大のボトルネックになる可能性もあります。ECサイトに何かをアップロードする前に、必ず以下の点を確認してください。

1.適切なサイズ写真をアップロードしないでください 必要以上に大きい商品ページ、サムネイル、商品一覧などに使用するサイズを定義し、そのサイズでエクスポートしてください。表示サイズが1.200ピクセルなのに、6.000ピクセルの画像をアップロードしないでください。

2. 最適化されたファイル名: 古典を捨てる代わりに IMG_1234.webpキーワードを含む説明的な名前を使用してください。 男性用黒スニーカー.webpこれは画像SEOに役立ち、Googleに文脈情報を提供します。

3. ALT属性と説明必ず記入してください 代替テキスト（ALT） 明確で適切な説明文を添えることで、アクセシビリティが向上するだけでなく、Googleが画像の内容を理解しやすくなるため、SEO対策にも役立ちます。

4. 画像用CDNストアに海外からのアクセスがある場合は、[プラットフォーム名が欠落しています] を介して画像を配信することを検討してください。 コンテンツ配信ネットワーク（CDN）このようにして、WebPをはじめとする各種リソースはユーザーに最も近いサーバーから配信されるため、遅延が低減されます。

既に多くの画像をアップロードしている場合の対処法

サイトは既に設定済みで、 数百枚または数千枚の最適化されていない画像一つずつやり直すのは悪夢のような作業だが、特にWordPressを使っている場合は、近道もある。

次のようなプラグイン WPがどんな （そしてそれらに似た他のもの） 大量の画像を一括で最適化する無料版では、ワンクリックで一度に最大50枚の画像を処理でき、ダウンロードしたり、Photoshopで編集したり、再アップロードしたりすることなく、画像のサイズを縮小できます。

WebP に変換してフォールバックを管理するプラグインと組み合わせると、 サイトのメディアライブラリの大部分を変換できます ほとんど手作業なしで。そこから先は 適切なエクスポートと命名規則を維持する 新しい画像について。

外部ツールと補完的なワークフロー

たとえメインのワークフローにPhotoshopが含まれている場合でも、強くお勧めします。 TinyPNGやTinyJPGなどのオンラインツールを使用して、さらに圧縮レイヤーを追加する （WebP 版も同様です）。仕組みは非常にシンプルです。画像をアップロードすると、システムがインテリジェントな圧縮を適用し、ほぼ常に少し小さいファイルをダウンロードできます。 品質の顕著な低下なしに.

より高度な環境では、これらの最適化を統合することができます。 プロジェクトのビルドにおける自動化されたタスク （例えば、gulp、webpack、npmスクリプトなど）を使用すると、リポジトリに新しい画像を追加するたびに、手動で介入することなく、透過的に圧縮され、WebPに変換されます。

画像が適切に最適化されているか確認してください。

最後に、これまでの努力が報われているかどうかを確認するために、 Google PageSpeed Insightsのようなツールを使用できます分析したいページのURLを入力し、「分析」をクリックするだけです。

レポートには、次のようなさまざまなセクションがあります。 画像最適化、次世代フォーマット（WebPなど）の使用、および改善の機会すべてが緑色であれば、順調に進んでいます。赤色または黄色で表示されている場合、PageSpeed は通常、次のようなことを示しています... 具体的にどの画像が問題を引き起こしているのでしょうか？ そして、その解決方法。

Photoshop、WebP、WordPressプラグイン、レスポンシブ技術などのツールを使用して画像のフォーマット、圧縮、サイズ、配信を管理すると、ウェブサイトが「軽量化」されるだけでなく、 SEO効果を高め、リソース消費量を削減し、プロフェッショナルな印象を与えます。 ユーザーが一目で認識できるもの。さらに、適切なツールを使ってコンバージョンと定期的なレビューを自動化すれば、視覚的に魅力的で高速なウェブサイトの維持管理はもはや頭痛の種ではなくなり、ワークフローの自然な一部となる。