画像リサイズツール

ソーシャルメディアとウェブ向け画像サイズ

すべてのプラットフォームには固有の画像サイズ要件があります。間違ったサイズを使用すると、慎重にデザインしたビジュアルが切り取られたり、伸びたり、ダウンサンプリングされたりして、ブランドイメージを損ないます。Facebook はリンクプレビューに 1200x630、フィード投稿に 1080x1080 を推奨しています。Instagram は正方形投稿に 1080x1080、縦長投稿に 1080x1350、横長投稿に 1080x608 を使用します。Twitter/X の画像は 1200x675 ピクセルが最適です。これらのサイズを正しく設定することは任意ではなく、プロフェッショナルな印象とアマチュア的な印象の差を生む重要な要素です。

ウェブサイトでは、画像は表示されるサイズと同じサイズで提供することが重要です。CSS で幅 600px と指定された画像が元々 3000px のサイズであるべきではありません。ブラウザは縮小前にフルサイズのファイルをダウンロードするため、帯域幅が無駄になりページ読み込みが遅くなります。例外は Retina ディスプレイで、ここでは CSS 表示サイズの 2 倍（例：600px の表示領域には 1200px の画像）で提供し、高密度画面でも鮮明さを保ちます。

レスポンシブ画像と Retina ディスプレイ

最新のウェブ開発では、デバイスごとに異なる画像サイズを提供する必要があります。1920px 幅のモニターを使用するデスクトップユーザーは、375px の画面を持つモバイルユーザーとは異なる画像が必要です。HTML の srcset 属性と sizes 属性を使用すると、ビューポート幅やデバイスのピクセル比に基づいてブラウザが選択できる複数の画像バージョンを定義できます。つまり、各画像の 400px、800px、1200px、1600px 幅など、複数のバージョンを作成することを意味します。

Retina ディスプレイ（2倍・3倍のピクセル密度）は、同じ画面領域に物理ピクセルを 2〜3 倍詰め込みます。Retina 対応の画像がないと、iPhone、iPad、MacBook、ほとんどの最新 Android デバイスで写真が柔らかくぼやけて表示されます。解決策はシンプルです。画像を表示サイズの 2 倍にリサイズし、CSS でサイズを制限します。600x400 の画像枠には 1200x800 の元画像が必要です。このツールで各サイズバリエーションを作成し、Image Compressor で圧縮してファイルサイズを抑えましょう。

パフォーマンス向上のための最適画像サイズ

最速の画像は、見た目を保ちつつ最も小さい画像です。ヒーローセクションでは圧縮後 200KB 未満、本文中の画像は 100KB 未満、サムネイルは 30KB 未満を目指しましょう。これらは WebP などの最新フォーマットを使用することを前提としています。JPEG のみの場合、同等の品質でサイズは 25〜35% 大きくなります。圧縮する前に必ず表示サイズにリサイズしてください。4000x3000 の写真を 150KB に圧縮した場合、同じサイズに圧縮した適切にリサイズされた 1200x900 の画像よりも画質が劣ります。なぜなら、同じファイルサイズ予算に多くのピクセルを詰め込むために圧縮がより厳しくなるからです。