Webサイト用に画像を最適化

Webサイト用に画像を最適化: 用途

1枚または複数の写真を選び、幅（初期値は480、800、1200、1600 px）、形式（WebPまたはJPG）、品質を設定します。ツールは元のサイズを超えて拡大せずに各版を作成し、それぞれのファイルサイズを表示して、srcset、sizes、width、height、そしてloading=lazy（ページ上部の画像にはfetchpriority=high）を含むレスポンシブなHTMLを組み立てます。

使い方

1. サイトの画像を選びます。
2. 幅、形式、品質、フォルダーを調整します。
3. .zip をダウンロードし、HTMLをページにコピーします。

使うタイミング

• スマートフォンでのサイト表示を速くする。
• Core Web VitalsのLCPとCLSを改善する。
• 商品写真やギャラリーの写真を準備する。

よくある質問

なぜ複数の幅を生成するのですか？

スマートフォンは、大きなモニター向けの1600 pxの写真をダウンロードする必要はありません。srcsetを使えば、ブラウザーが画面で鮮明に見える最小の版を選ぶので、ページの読み込みが速くなり、Core Web Vitals（LCP）の改善にもつながります。

WebPはすべてのブラウザーで使えますか？

はい、現在のすべてのブラウザー（Chrome、バージョン14以降のSafari、Firefox、Edge）で使えます。非常に古い端末との互換性が必要な場合は、JPGを選んでください。

width、height、loading=lazy は何のためのものですか？

widthとheightは、画像が読み込まれる前にその領域を確保し、ページのガタつき（CLS）を防ぎます。loading=lazy は、画面外の画像の読み込みを遅らせます。ページ上部のメイン画像にはlazyを使わないでください。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール