1ドットGIFというページを10年ほど前に作りました。
Web関連の勉強にあたり、久しぶりに高さ1ピクセルの画像を作ってみました。
CSSレイアウトの練習時、自由な大きさに表示できる、便利な画像です。
ファイルサイズが小さいのもすてき。いずれも、約1.4キロバイトです。

  • 使用例:
    • <img src="1px.jpg" width="500" height="200" />
    • background: url("1px.gif") repeat;
実寸(200px×1px) 150×200で表示 250×100で表示
1ピクセルJPEG 1ピクセルJPEG 1ピクセルJPEG
1ピクセルJPEG 1ピクセルJPEG 1ピクセルJPEG
1ピクセルGIF 1ピクセルGIF 1ピクセルGIF
作り方(たとえばPhotoshopで)
  1. (新規ダイアログボックスで)幅200px、高さ1px、解像度72ppi
  2. (300%程度に拡大表示)
  3. グラデーションツールを選択
  4. オプションパネルの[クリックでグラデーションを編集]をクリックし、グラデーションを編集
  5. Shiftキーを押さえながら水平方向にドラッグ
  6. Webおよびデバイス用に保存
  7. <Jpeg 最高画質>で保存