piapia123
ja

プレースホルダー画像ジェネレーター

画像

処理はすべてブラウザ内で完結します。データは送信されません

「ここに将来 800×600 の画像が入る」という場所を押さえるための、寸法入りのグレー画像を作ります。既定は SVG です。ベクターで数十バイト、拡大してもぼやけず、CSS の `background-image` にそのまま使えるのでファイルを保存する必要もありません。デザインソフトやチャット用には PNG か JPEG に切り替えてください(この 2 つは斜めの線が入るので、画像の読み込み失敗による空白と間違えられません)。既定では寸法が画像に書かれるため、カンプに貼れば実画像の大きさが一目で分かります。

機能

  • サイズは 1〜4000 ピクセルで自由、既定は 800×600
  • 既定は SVG 出力:ベクター、数十バイト、拡大してもぼやけません
  • PNG / JPEG には斜めの線が入り、プレースホルダーだと一目で分かります
  • 寸法を画像に表示。自分のテキストにも差し替えられます
  • 背景色は 4 種類(ウォームグレー・白・中間グレー・ダーク)
  • 寸法とファイルサイズを表示し、そのままダウンロードできます

使い方

  1. 幅と高さを入力します
  2. 必要に応じて文字・形式・背景色を変えます
  3. プレースホルダーがその場で生成されます
  4. 「ダウンロード」で保存します

よくある質問

既定が SVG なのはなぜですか?
プレースホルダーは通常、ページやカンプに一時的に場所を確保するために置くもので、SVG は数十バイトで拡大してもぼやけず、CSS の background-image として直接使えます。SVG を扱えない相手(一部のチャットや古いデザインツール)には PNG に切り替えてください。
PNG の斜線は消せますか?
あの線は意図的なものです。プレースホルダーで最も困るのは「画像の読み込みに失敗した空白」と受け取られることです。薄い斜線が 2 本あるだけで、意図して置いたものだと誰でも分かります。均一な塗りが必要な場合は斜線のない SVG をお使いください。
そのまま Web ページに使えますか?
使えます。SVG を保存するか、内容を CSS に直接書いてください(`background-image: url("data:image/svg+xml,...")`)。後者ならファイルも不要で、数十バイトのインラインデータは画像リクエストよりずっと軽いです。
入力した寸法は送信されますか?
いいえ。画像はすべてブラウザ内で描画され、ページはリクエストを送りません。

関連ツール