Image Optimization

画像の最適化は、用途に必要な画質を保ちながら、画像の配信に必要なバイト数を減らします。適切な形式の選択、表示サイズへのリサイズ、圧縮、不要なメタデータの削除、必要なときだけの読み込みを組み合わせて行います。

Webでは、最適化は配信の方法も対象にします。レスポンシブ画像のマークアップ（srcset属性とsizes属性）により、ブラウザは画面に合ったファイルを選べます。遅延読み込みは画面外の画像の読み込みを遅らせ、CDNは近くの場所からファイルを配信します。

結果は、ファイルサイズと、Googleの Core Web Vitals の1つである Largest Contentful Paint などのページ速度の指標で測定されます。

画像形式を変換する

形式を変更すると、最も大きい削減効果が得られることがよくあります。Image Converter は、PNG、JPG、WebPの間でブラウザ上の変換を行います。

画像の最適化が重要な理由

画像は、Webページで最も大きい部分であることがよくあります。大きすぎる画像は、モバイル回線での読み込みを遅くし、訪問者のデータ通信量を消費し、ページ速度のスコアを下げることがあります。ファイルが小さいと、ドキュメントのリポジトリ、メールの添付ファイル、PDFの書き出しも扱いやすくなります。

最適化の手法

• 表示される最大サイズにリサイズします。たとえば、高密度の画面では CSS の幅の2倍にします。
• 内容に応じて形式を選びます。単色のUIにはPNG、写真にはJPGまたはWebPを使います。
• 非可逆の品質を75〜85程度に設定し、拡大した切り抜きで比較します。
• 不要なメタデータを削除します。ただし、色が重要な場合はカラープロファイルを残します。
• 画面の下方にある画像は遅延読み込みにします。

スクリーンショットの最適化

幅1440ピクセルのウィンドウのRetinaスクリーンショットは、幅2880ピクセルになります。ドキュメントのページで720 CSSピクセルの幅で表示する場合、1440ピクセルのファイルで2倍の画面に対応でき、ピクセル数は4分の1になります。

Temposhotでは、共有用には JPG Export (Adjustable Quality) を選び、品質を1〜100（既定値は85）に設定します。原本には PNG Export (Lossless) を使います。Website Captureは JPEG、PNG、WebP を直接保存します。

よくある間違い

• 小さいサムネイルに、Retinaのキャプチャをそのままアップロードする。
• テキストのスクリーンショットを圧縮しすぎて、文字がにじむ。
• 内容に関係なく、すべてを1つの形式に変換する。
• 唯一のコピーを最適化し、元のファイルを失う。

今すぐ修正したい画像がありますか？

Image Compressor でファイルサイズを縮小してください。その前に、Screenshot Resolution Checker でピクセルサイズを確認できます。

よくある質問

サイトのスクリーンショットにはWebPを使うべきですか？

WebPは、同程度の画質でPNGやJPGより小さいファイルになることが多く、現在のブラウザが対応しています。

ドキュメントのスクリーンショットはどのくらいのサイズにすべきですか？

表示されるCSS幅の約2倍が、高密度の画面に対応しつつ、バイトを無駄にしない目安です。

出典

• Largest Contentful Paint（web.dev）
• Image compression（Wikipedia）

関連リソース

• 書き出し形式: PNG、JPG、WebPのオプション。
• 遅延読み込み: 画面外の画像の読み込みを遅らせます。