ウェブは一般的に画像の使用が特徴です。画像のない Web サイトにアクセスしたことがありますか?そうではないことを保証します。画像は Web の優れたマルチメディア コンテンツであるため、優れたユーザー エクスペリエンスを備えた最適な Web サイトを提供するには、画像の管理方法を学ぶことが重要です。
Squoosh は、Google Chrome 開発チームによって作成および保守されている安全で使いやすいオープンソース ツールで、エンド ユーザーに対するプレゼンテーションの品質を損なうことなく、重量を軽減して画像を最適化します。
公式 Web サイトにアクセスして、画像をアップロードし、ユースケースに応じてその重さと品質を試してみることができます。
たとえば、重さ 1.62Mb の .png 形式の画像をロードすると、最適化プロセスの後、重さ 154Kb の同じ画像を取得できます。これは、ツールを使用するだけで 90% の最適化が行われたことになります。
サンプルのデモを見て確認できます。
画像の最適化を管理するもう 1 つの簡単な方法は、ユーザーのビューポートにすぐにはロードされない画像に対して遅延読み込みを使用することです。これは、おそらく使用する必要のない画像のリクエストを回避することでクライアントの帯域幅を節約することを意味します。
簡単な例を見てみましょう:
この例の最後の画像は、loading="lazy" 属性があるため、デフォルトではロードされません。これにより、ユーザーがスクロールしたときにのみロードされ、ユーザーがその画像を必要としていることがブラウザに示されます。負担。
ご覧のとおり、これは帯域幅を節約し、純粋な HTML をネイティブに使用する非常に簡単な方法です。
Squoosh の公式リポジトリは次のとおりです:
Squoosh は、さまざまな形式で画像サイズを縮小する画像圧縮 Web アプリです。
Squoosh は画像をサーバーに送信しません。すべての画像圧縮はローカルで処理されます。
ただし、Squoosh は Google Analytics を利用して以下の情報を収集します:
Squoosh 用に開発するには:
npm install
npm run build
npm run dev
Squoosh は、コミュニティのあらゆる参加を歓迎するオープンソース プロジェクトです。プロジェクトに貢献するには、貢献ガイドに従ってください。
オープンソース ツールを使用して Web サイトの画像を最適化することは、パフォーマンスを向上させるために非常に重要です。これを遅延読み込みなどのネイティブ HTML 機能と組み合わせると、パフォーマンスが大幅かつ非常に簡単に向上します。
あなたが興味を持ちそうな私の著者のその他の投稿:
以上がSquoosh: ウェブサイト用の画像最適化ツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
