web-dev-qa-db-ja.com

次世代フォーマットで画像を提供する

Google Page Speedの洞察からの私のランキングは、次の理由で厳しく罰せられています。

「次世代フォーマットで画像を提供する」詳細については、Googleのヘルプページ こちら をご覧ください。

ただし、 this 、 this および this によると、これらの形式はほとんどのブラウザーでサポートされていません。

このシナリオで何をしますか？何

imageperformancewebjpegjpeg2000
17
Peter Crawfie

<picture>要素を使用して、WebPイメージをサポートするブラウザーを使用しているユーザーにWebPイメージを配信し、サポートしていない場合はJPEGまたはPNGにフォールバックできます。他のフォールバックメソッドではなく<picture>要素を使用する利点は、要素をサポートしないブラウザーが<img>タグで定義されているソースにフォールバックすることです。

<picture>
  <source srcset="img/yourImage.webp" type="image/webp">
  <source srcset="img/yourImage.jpg" type="image/jpeg"> 
  <img src="img/yourImage.jpg" alt="Your image">
</picture>

ソース画像をWebPに変換する方法 。

WordPressを使用している場合、メディアライブラリからWebP画像を自動的に生成し、フォールバック機能を含むプラグインがあります。私が使ったのはWebP Expressだけですが、100/100 PageSpeed InsightスコアがLighthouseのロールアウトで一晩で30に急降下したことをクライアントが心配したとき、それはかなり役立ちました。

これは、Googleが別の独自技術をプッシュする別の方法のように感じますが、WebP圧縮は 他の「次世代」フォーマットと比較して非常に印象的です です。

16
ColossalYouth

ImageEngine のような画像CDNを常に使用できます。完全な開示私はImageEngineの背後にある会社で働いています。

プルベースのCDNとして機能し、エンドユーザーデバイスがその形式をサポートしている場合、画像をWebPまたはJPEG-2000に自動的に変換します。また、画像コンテンツをさらに最適化するために圧縮とサイズ変更を自動的に適用しますが、ページ速度を確実に向上させます。

無料試用版にサインアップして、Google Page Speedスコアがどのように改善されるかを確認できます。

2
Joseph LoPresti

WebPは現在より広範なサポートを提供しているもので、Safariを除くほとんどすべての主要なブラウザーがサポートしています。

回答の1つで述べたように、colossalyouthはpictureタグを使用してwebp画像を読み込むことができ、サポートされていない場合は、選択した他の形式にフォールバックします。

Background-imageを使用している場合は、 modernizr のようなものを使用して、ブラウザによる機能サポートを検出し、次のようなCSSを作成できます。

my-selector {
    background: url('../images/home-bg.webp') no-repeat scroll center center
}

.no-webp my-selector {
    background: url('../images/home-bg.jpg') no-repeat scroll center center
}

私は実際に私のウェブサイトで両方のことを行い、webpフォーマットを正常に実装しました。私はそれをどのようにしたかについての詳細な投稿を作成しました、あなたがここでそれを確認できるパフォーマンスの向上： nextを使用してウェブサイトの速度パフォーマンスを改善します-gen形式

2
Luis Palacios

このエラーを簡単に解決するには、JPGまたはPNG画像をWebPなどの最適化された形式のいずれかに変換します。

これを行うには、実行時にイメージへのリクエストを処理してイメージを変換し、変換する方法を知るためにこのチュートリアルに従ってください： https://www.digitalocean.com/community/tutorials/how-to-create-and-serve-webp-images-to-speed-up-your-website または、画像が動的でない場合は、画像をWebPに変換して設計時に行うことをお勧めします形式には、次のような多くのオンラインコンバーターがあります。 https://webp.enozom.com/

1
Hazem Torab

https://www.imagecompress.org/ のようなツールを使用して現在の画像形式を変換し、例に従って古いタグを更新できます https：//www.imagecompress .org/examples 。

1
DanielGaffey

主要なブラウザがこれらの次世代フォーマットをサポートするまで、JPG/PNGは広くサポートされているため、おそらくJPG/PNGを使用し続けることが最善です。実際、ほとんどのWebサイトはJPGとPNGを使用しており、ブラウザが次世代の技術に対応するまでには時間がかかります。

1
Dominus Vilicus