1ピクセルJPEG
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で表示 |
---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
作り方(たとえばPhotoshopで)
- (新規ダイアログボックスで)幅200px、高さ1px、解像度72ppi
- (300%程度に拡大表示)
- グラデーションツールを選択
- オプションパネルの[クリックでグラデーションを編集]をクリックし、グラデーションを編集
- Shiftキーを押さえながら水平方向にドラッグ
- Webおよびデバイス用に保存
- <Jpeg 最高画質>で保存