写真やグラフィックをドロップすると、ページに必要な幅の、WebP、AVIF、JPGのコピーが、カメラのデータを除いて得られます。それぞれがどのくらい小さくなったかを確認し、すべてを.zipでダウンロードして、srcsetのコードを貼り付けます。画像がこの端末の外に出ることはありません。無料です。
Webサイト用に画像を最適化する方法、手順ごとに
- 画像を選択するか、ページにドロップします。JPG、PNG、WebP、AVIF、GIFのファイルが使えます。
- 必要な「幅」にチェックを付けます（480〜2560）。画像が元のサイズより大きくなることはありません。
- 「形式」を選びます：AVIF、WebP、フォールバック用のJPG、透明な画像用のPNG。
- 「画質」「sizes属性」「サイトの画像フォルダ」を設定し、変更した場合は、「この設定でやり直す」を押します。
- 「前」と「後」を比べて、「すべてダウンロード（.zip）」を押します。
- 各画像のpictureコードをコピーして、ページに貼り付けます。
なぜ複数の幅なのか？
スマートフォンは、大きなモニターと同じ2000ピクセルの写真を必要としません。srcsetでは、複数の幅を一覧にし、ブラウザが、その画面でもくっきり見える最小のものを選びます。sizes属性は、画像が表示される幅を伝えるため、ページのレイアウトが終わる前に選べます。
AVIF、WebP、JPGのどれがよいですか？
AVIFは通常最小で、WebPがそれに近く、現在のすべてのブラウザで動作し、JPGが安全なフォールバックです。pictureのコードは、その順に提示するため、各ブラウザは、理解できる最良のものを選びます。透明な画像には、透明度が保たれるよう、JPGではなくPNGのフォールバックが付きます。形式がグレーアウトしている場合は、このブラウザでは作成できません。他の形式は、引き続き動作します。
削除されるもの
すべての画像は、描き直されて新しく保存されるため、カメラの詳細、GPSの位置情報、編集履歴、埋め込まれたカラープロファイルは含まれません。横向きで撮った写真は、先に正しい向きに回転されます。写真には、75〜82程度の画質がバランスよく、輪郭のくっきりしたグラフィックは、少し高めのほうがきれいに見えることがあります。
なぜ重要か
- 小さな画像は、特にスマートフォンで、ページの読み込みを速くします。
- 速いページは使いやすく、検索でも有利になりがちです。
- 位置情報を削除すると、写真に写る人や場所のプライバシーが守られます。
- 適切なサイズの画像は、あなたと訪問者の通信量を節約します。
こんな方に
鮮明で素早く読み込まれる画像を求めるブロガー、店主、写真家、開発者。特定のファイルサイズの1枚の画像には、画像の圧縮を、ファイル形式の変更には、画像変換を使ってください。
よくある質問
どの画質を選べばよいですか？
写真には75〜82程度がバランスのよい値です。輪郭のくっきりしたグラフィックには、少し上げてください。
WebPがあれば、AVIFは必要ですか？
AVIFのほうが通常は小さく、表示できないブラウザには、pictureコードがWebPとJPGにフォールバックします。
画像はアップロードされますか？
いいえ。ブラウザ上で処理されます。