Web用に画像をリサイズする方法 - 用途ごとの正しいサイズ
大きすぎる画像の配信は、サイトが遅くなる一番の原因です。4000x3000の写真を800x600で表示すると、ピクセルの96%が無駄になります。画像サイズを正しく決める方法を解説します。
今すぐお試しください - 無料、登録不要。
無料で画像をリサイズ →推奨される画像サイズ
| 用途 | 幅(px) | Retina(2倍) |
|---|---|---|
| ヒーロー/バナー | 1600 | 3200 |
| ブログ本文 | 800 | 1600 |
| サムネイル | 400 | 800 |
| 商品画像 | 1000 | 2000 |
| OGP画像(SNS) | 1200x630 | - |
| ファビコン | 512x512 | - |
目安:表示される最大幅にリサイズし、Retinaディスプレイ向けにその2倍にします。800pxで表示するブログ画像なら、幅1600pxにしましょう。
リサイズの方法
- 画像リサイズを開きます
- 画像をアップロードします
- 目標の幅を設定します(高さは比率に合わせて自動で変わります)
- リサイズした画像をダウンロードします
プロのコツ:まずリサイズしてから圧縮しましょう。4000pxの画像を圧縮してから800pxに縮小するのは無駄です。捨てるピクセルまで圧縮していることになります。
よくある質問
リサイズで画質は落ちますか?
縮小は基本的に安全です。ピクセルを足すのではなく減らすだけだからです。拡大すると、ソフトが新しいピクセルを作り出す必要があるため画質が落ちます。Web用に拡大するのはやめましょう。
レスポンシブ画像にsrcsetを使うべきですか?
はい!srcset属性を使うと、ブラウザがデバイスに合った画像サイズを選べます。2〜3サイズ(小・中・大)を用意して、ブラウザに選ばせましょう。
準備はできましたか?今すぐ画像を変換 - 100%無料。
無料で画像をリサイズ →