使用先に合わせて形式を選ぶ
WebP は画質と容量を両立したウェブ画像に向いています。写真やフォームには JPEG、スクリーンショットや透明な図には PNG、対応する環境には AVIF が便利です。
画像の実用ガイド
表示する場所に合わせてサイズを変更
多くのウェブページでは幅1600ピクセルで十分です。プロフィール画像は512 × 512などの指定がある場合があります。小さな元画像は拡大しない方が鮮明です。
画質・容量・互換性のバランスを考える
画質を下げると写真は小さくなりますが、文字やロゴ、スクリーンショットには輪郭を保てる PNG が適しています。実際の使用先で確認しましょう。
「SVG から PNG」のヒント
描画前に解像度を決める
SVG は図形を記述し、PNG はピクセルで構成されます。64ピクセル表示のアイコンは128ピクセルで書き出すと高密度画面に対応できます。
リソースを SVG に埋め込む
外部画像、ウェブフォント、スクリプト、操作を伴う効果には対応していません。必要に応じて文字をパスに変換してください。
透明度とベクター原本を保つ
PNG は既存の透明部分を保持しますが、描かれた白い背景は消しません。別のサイズで出力するために SVG を残してください。
使い方
リソースを埋め込んだ SVG を選びます。
PNG の幅を設定するか、元のサイズを使います。
変換してプレビューを確認し、PNG をダウンロードします。