Photoshopでwebpを作成する方法とバッチ処理（複数の画像ファイルを一括でwebpに変換）の方法
Webサイトの表示速度は、ユーザー体験に大きな影響を与えます。
Googleは1ページのファイル容量を1.6MB（1600kb）以下に抑える事を推奨しています。
Aim to keep your total byte size below 1,600 KiB. This target is based on the amount of data that can be theoretically downloaded on a 3G connection while still achieving a Time to Interactive of 10 seconds or less.
引用：https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight?hl=ja
特に画像サイズについては適切なサイズ、遅延表示、最適化など、さまざまな方法を推奨されています。
AVIF 形式や WebP 形式で画像を配信する理由
AVIF と WebP は、従来の JPEG や PNG と比較して圧縮率と品質の面で優れた画像形式です。JPEG や PNG ではなくこれらの形式で画像をエンコードすると、読み込みが速くなり、モバイルデータの使用量を抑えることができます。
AVIF は Chrome、Firefox、Opera でサポートされており、同じ画質設定の他の形式よりもファイルサイズが小さくなります。 AVIF の詳細については、AVIF 画像配信 Codelab をご覧ください。
WebP は Chrome、Firefox、Safari、Edge、Opera の最新バージョンでサポートされており、ウェブ上の画像の非可逆圧縮と可逆圧縮が強化されています。 WebP について詳しくは、ウェブ用の新しい画像形式をご覧ください。
引用：https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images?hl=ja#why_serve_images_in_avif_or_webp_format
webpをPhotoshopで作成する方法
- Photoshopメニューバーのファイルから別名保存（またはコピーを保存）を選択。
- 保存画面のフォーマットからwebpを選択し保存をクリック。
- webpオプションダイアログの劣化を選択し、画質を入力（サンプルでは画質を40に下げています）
- 元データのjpeg 956kbがwebpに変換後は画像の劣化はほとんどなく、64kbにサイズダウン。
複数のデータを自動で連続処理する方法
Photoshopのバッチを使用するとwebp変換に限らず、あらゆる作業を自動化できます。
- 上記【webpをPhotoshopで作成する方法】の1から3の手順を[アクション]に登録します。
- メニューバーのファイルから自動処理、バッチの順に選択します。
- バッチダイアログのアクションを選択、続いて画像が入っているフォルダを選択してOKで処理が開始します。
画像サイズの縮小が、SEO、ユーザービリティ、アクセシビリティに与える影響
1. SEO
- ページの読み込み速度は、検索エンジンにおける評価基準の一つです。画像サイズの縮小によりページの読み込み速度が向上すると、検索結果における順位が上がる可能性があります。特に開発元であるGoogleがwebpを推奨しているため、Googleの評価が下がる事はない。
- 被リンク獲得の促進: ページの読み込み速度が速いサイトは、ユーザーにとって利便性が高いため、他のサイトから被リンクを獲得しやすくなります。被リンクは、検索エンジンにおける評価を高める重要な要素です。
- クローラーの効率化: クローラーは、検索エンジンがウェブサイトを巡回して情報を収集するプログラムです。画像サイズの縮小によりページの容量が小さくなると、クローラーが効率的に情報を収集できるようになり、インデックスされるまでの時間も短くなります。
2. ユーザービリティ
- 離脱率の低下: ページの読み込み速度が遅いと、ユーザーはストレスを感じ、すぐにサイトを離脱してしまう可能性があります。画像サイズの縮小によりページの読み込み速度が向上すると、ユーザーの滞在時間が長くなり、離脱率を低下させることができます。
- 快適な閲覧体験: ページの読み込み速度が速いと、ユーザーは快適にサイトを閲覧することができます。これは、ユーザー満足度を高め、リピーターを増やすことにつながります。
- モバイル端末での閲覧性向上: スマートフォンなどのモバイル端末でサイトを閲覧する場合、ページの読み込み速度は特に重要になります。画像サイズの縮小により、モバイル端末での閲覧性も向上させることができます。
3. アクセシビリティ
- 画像サイズの縮小により、ページ全体の容量が小さくなり、データ通信量が少ないユーザーや、低速回線を利用しているユーザーにとって、大きなメリットとなります。
webpのメリットデメリット
webpとは
WebPは、2010年にGoogleによって開発された比較的新しい画像形式です。
JPEGやPNGよりも優れた圧縮率と機能性を持ち、Webサイトの高速化や軽量化に役立ちます。
WebPのメリット
1. 高い圧縮率
WebPは、JPEGやPNGよりも20～80％小さいファイルサイズで同等の画質を維持することができます。これは、Webサイトの読み込み速度を向上させ、データ転送量を節約し、サーバーへの負荷を軽減するのに役立ちます。特に、画像を多く使用するWebサイトにとって恩恵が大きいです。
2. 透過処理とアニメーションへの対応：WebPは、透過処理とアニメーションをサポートしています。
3. 主要ブラウザのサポート：Chrome、Firefox、Edge、Operaなどの主要なWebブラウザで広くサポートされています。Safariは一部未サポートですが、iPhoneには対応しています。
参照元：https://caniuse.com/?search=webp
4. SEOへのメリット
WebPを使用すると、Webサイトの読み込み速度が向上し、ページサイズが小さくなります。これは、検索エンジンによる評価を向上させ、検索結果における順位を上げることが期待できます。
WebPのデメリット
1. 比較的新しいフォーマット：すべてのWebサーバーやCMSでサポートされているわけではありません。古いブラウザでは表示されない場合があります。
2. 編集ソフトの対応状況：すべての画像編集ソフトでサポートされておらず、PhotoshopやGIMPなどの主要なソフトでも、一部の機能が制限されています。
3. 変換の手間：すでにJPEGやPNG形式で保存されている画像をWebP形式に変換するには、専用のツールやサービスを使用する必要があります。