Squoosh: ウェブサイト用の画像最適化ツール

?インデックス

1. はじめに
2. Squoosh とは何ですか?
3. 遅延読み込み
4. 参考文献
5. 結論

---

1. はじめに

ウェブは一般的に画像の使用が特徴です。画像のない Web サイトにアクセスしたことがありますか?そうではないことを保証します。画像は Web の優れたマルチメディア コンテンツであるため、優れたユーザー エクスペリエンスを備えた最適な Web サイトを提供するには、画像の管理方法を学ぶことが重要です。

2. Squoosh とは何ですか?

Squoosh は、Google Chrome 開発チームによって作成および保守されている安全で使いやすいオープンソース ツールで、エンド ユーザーに対するプレゼンテーションの品質を損なうことなく、重量を軽減して画像を最適化します。

公式 Web サイトにアクセスして、画像をアップロードし、ユースケースに応じてその重さと品質を試してみることができます。

たとえば、重さ 1.62Mb の .png 形式の画像をロードすると、最適化プロセスの後、重さ 154Kb の同じ画像を取得できます。これは、ツールを使用するだけで 90% の最適化が行われたことになります。

サンプルのデモを見て確認できます。

3. 遅延読み込み

画像の最適化を管理するもう 1 つの簡単な方法は、ユーザーのビューポートにすぐにはロードされない画像に対して遅延読み込みを使用することです。これは、おそらく使用する必要のない画像のリクエストを回避することでクライアントの帯域幅を節約することを意味します。

簡単な例を見てみましょう:

この例の最後の画像は、loading="lazy" 属性があるため、デフォルトではロードされません。これにより、ユーザーがスクロールしたときにのみロードされ、ユーザーがその画像を必要としていることがブラウザに示されます。負担。

ご覧のとおり、これは帯域幅を節約し、純粋な HTML をネイティブに使用する非常に簡単な方法です。

4. 参考文献

Squoosh の公式リポジトリは次のとおりです:

GoogleChromeLabs / シューッという音

ブラウザ内でクラス最高のコーデックを使用して画像を小さくします。

スクォーシュ！

Squoosh は、さまざまな形式で画像サイズを縮小する画像圧縮 Web アプリです。

プライバシー

Squoosh は画像をサーバーに送信しません。すべての画像圧縮はローカルで処理されます。

ただし、Squoosh は Google Analytics を利用して以下の情報を収集します:

• 基本的な訪問者データ。
• 前後の画像サイズの値。
• Squoosh PWA の場合、Squoosh インストールのタイプ。
• Squoosh PWA の場合、インストール日時。

開発中

Squoosh 用に開発するには:

1. リポジトリのクローンを作成します
2. ノード パッケージをインストールするには、次を実行します。

   npm install
3. 次に、以下を実行してアプリをビルドします。

   npm run build
4. ビルド後、次のコマンドを実行して開発サーバーを起動します。

   npm run dev

貢献

Squoosh は、コミュニティのあらゆる参加を歓迎するオープンソース プロジェクトです。プロジェクトに貢献するには、貢献ガイドに従ってください。

GitHub で表示

5. 結論

オープンソース ツールを使用して Web サイトの画像を最適化することは、パフォーマンスを向上させるために非常に重要です。これを遅延読み込みなどのネイティブ HTML 機能と組み合わせると、パフォーマンスが大幅かつ非常に簡単に向上します。

---

あなたが興味を持ちそうな私の著者のその他の投稿:

HTML5 の独自のネイティブ アコーディオン?

クリスチャン・フェルナンド ・ 1月10日

#webdev #html #css ＃フロントエンド

クイック ガイド: Git で適切なコミット メッセージを作成するためのヒント?

クリスチャン・フェルナンド・2024年12月20日

#git #github #gitlab #スペイン語

SSH キーを作成して Windows 上の Github に接続するにはどうすればよいですか? ?

Cristian Fernando ・2024 年 12 月 13 日

#github #git #スペイン語 #gitlab

以上がSquoosh: ウェブサイト用の画像最適化ツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。