Core Web Vitalsをより良くするために画像を適切にサイズ変更および圧縮する方法

私たちの最終ブログ、Core Web Vitals（CWV）を使用してWebサイトのパフォーマンスを評価する方法を示しました。CWV の最も重要なデータポイントの 1 つが、最大コンテンツフルペイント (LCP) です。画像は Web ページで最も大きなコンポーネントであることが多いため、LCP 指標に大きく影響します。はページスピードインサイトツールは、サイト上のどの画像が処理速度を低下させているかを一覧表示します。

nytimes.comでは、次世代の画像形式を使用するだけで、ページの読み込み時間を13秒短縮し、画像ファイルサイズを最大 40% 節約できます。

LCP を改善するには、画像サイズを最適化することが重要です。これにより、すべての画像ファイルは絶対に必要なサイズだけ大きくなります。3 つの手法があります。

次世代のフォーマットで画像を提供します。
画像を効率的にエンコードします。
画像のサイズを正しく変更してください。

imgix を使用すると、不要なバイトを削除するインテリジェントな自動圧縮が可能になります。ファイル圧縮は LCP を改善するだけでなく、帯域幅とそれに伴うコストを削減します。

AVIFのような次世代画像フォーマットを使用する方法

記事の冒頭にあるnytimes.comの例が示すように、LCPを改善する最も簡単な方法は、次世代の画像形式を使用することです。imgix を使用すると、既存のファイルを JPG、GIF、PNG などのほぼすべての形式から AVIF または WebP に変換できます。これにより、JPEG から変換した場合はファイルサイズを平均 60%、WebP から変換した場合は平均 35% 小さくなり、品質はほとんど損なわれません。詳細については、以下をご覧ください。 AVIF の記事はこちら。

画像を効率的にエンコードまたは圧縮する方法

もう一度nytimes.comを例にすると、画像が効率的にエンコードされていれば、ファイルサイズを最大40％節約できることがわかります。

imgix の圧縮と最適化のソリューションは簡単です。アカウントを設定すると、簡単な URL パラメーターを使用してその場で最適化を行うことができます。最適化はリアルタイムで行われるため、デバイスのブレークポイントに合わせてイメージの一括処理や複数のコピーの管理を行う必要がありません。

たとえば、imgix API パラメーターの場合「自動=圧縮」 URL にがある場合、imgix はベストエフォート型の手法を適用して画像ファイルのサイズを小さくします。以下の例では、イメージファイルのサイズが 99 kb から 10 kb に 90% 縮小されています。

imgix を使う 'q=' パラメータでは、特定の画像に必要な圧縮率を制御できます。芸術作品や詳細な技術画像を表示する場合、ダウンロードに時間がかかる場合でも、可能な限りすべてのピクセルを画像に含める必要があります。imgix API パラメーターを使用すると、画像の処理と最適化のあらゆる面を完全に制御できます。