〔 Web制作 〕

画像サイズ・DPR計算ツール

CSS上の表示サイズから、1x・2x・3x向けの画像書き出しサイズを計算します。

Image Export Size

表示サイズから書き出しサイズを計算

CSS上の表示サイズとDPRから、1x・2x・3xの画像サイズをまとめて確認できます。

px
px
1x

600 × 400px

2x 選択中

1200 × 800px

3x

1800 × 1200px

CSS表示サイズ：600 × 400px

〔 このツールでできること 〕

実務の小さな確認を、すばやく。

デザインデータ上では600px幅でも、高DPR端末を考えて何pxで画像を書き出すべきか確認したい場面に使えます。高さは任意で、横幅だけの計算にも対応しています。

使い方

  1. 01

    Webサイト上での表示幅と、必要なら高さを入力します。

  2. 02

    確認したいDPRを1x・2x・3xから選びます。

  3. 03

    各DPRの推奨書き出しサイズを確認します。

具体例

CSS表示: 600 × 400px
1x: 600 × 400px
2x: 1200 × 800px
3x: 1800 × 1200px

よくある利用シーン

  • • Retina対応画像の書き出しサイズを決めるとき
  • • デザインカンプから実装用画像を準備するとき
  • • 画像容量と表示品質のバランスを検討するとき

関連ツール

srcset・sizes生成 書き出した画像候補からHTMLを作成します。 アスペクト比計算 画像の縦横比からサイズを計算します。