dimage.info

ダミー画像・モック用画像作成サービス

デザインのモックアップ作成・テスト等で、ダミー画像を用意するが大変ではありませんか?
dimage.info は img タグの src 属性に指定する URL を記述するだけで簡単にダミー画像を作成することができます。

基本的な使い方を見る サンプルを見る

基本的な使い方

sample

画像を作成するには以下のような img タグを記述します。 またはブラウザのアドレスバーに直接 http://dimage.info/300x145.png と入力します。

CODE
<img src="http://dimage.info/300x145.png">

横 300px, 縦 145px の PNG 形式の画像が作成されます。

画像の大きさを指定する

sample

CODE
<img src="http://dimage.info/350x160.png">

http://dimage.info/ のすぐ後ろに {width}x{height} の順番で指定します。 widthheight の間にはアルファベットの x (エックス) が入ります。

Important width , height は 1 から 5000 までの整数で指定します。 それよりも小さいまたは大きい数値を指定すると、400 Bad Request になります。

任意のテキストを指定する

sample

CODE
<img src="http://dimage.info/350x160.png?text=Now+Printing">

画像に入れるテキストを指定することができます。クエリ文字列の text に指定します。

"Now Printing" のように単語の間に空白 (スペース) を入れる場合は、Now+Printing のように + を使います。 text に指定する文字列は URL エンコードしてください。

テキストの色を指定する

sample

CODE
<img src="http://dimage.info/350x160.png?text=%23B94A48&color=B94A48">

画像に入れるテキストの色を指定することができます。クエリ文字列の color に指定します。

Webカラーコード (16進数表記) の # を除いた値を指定してください。 #FF0000 (赤) の場合は、FF0000 となります。

背景色を指定する

sample

CODE
<img src="http://dimage.info/350x160.png?text=Background+Color&bgcolor=D9EDF7">

画像の背景色を指定することができます。クエリ文字列の bgcolor に指定します。

Webカラーコード (16進数表記) の # を除いた値を指定してください。 #FF0000 (赤) の場合は、FF0000 となります。

テキストのフォントサイズを指定する

sample

CODE
<img src="http://dimage.info/350x160.png?text=Big+Size&font_size=100">

画像のテキストのサイズを指定することができます。クエリ文字列の font_size に指定します。

font_size は 5 から 100 までの整数で指定してください。数値が大きいほど、テキストのサイズは大きくなります。

画像のフォーマットを指定する

sample

CODE
<img src="http://dimage.info/350x160.jpg">

画像の大きさの後ろに .jpg と指定すると JPEG 形式の画像が作成されます。 .png と指定すると PNG 形式の画像が作成されます。

現在のところ、上記 2 つの形式に対応しています。

今後追加するかもしれない機能・改善点

まだ実装していないけど、こんな機能があればいいなのリストです。要望の多い機能は優先して実装するかもしれません。

機能追加:

  • フォントを指定できるようにする
  • font_size のエイリアスとして size を使えるようにする
  • 色指定 color bgcolor に HTML Named Color を使えるようにする

変更履歴

Version 0.1
(2013-02-25)
  • 初版 リリース