JavaScript Diary

1×1 の 透過画像 [ 2001/06/28 ]

Web ページ作成において 1×1 サイズの透過画像、いわゆる empty(空) な画像は重宝します。
HTMLのレイアウト、DHTML においても重要で、ダイナミックな要素のBODYに
<a href="#" onClick="〜;" onMouseOver="〜;"><img src="empty.gif" width="64" height="64" border="0"></a>
などのようにしておくことは作業時間の短縮にもなりますし、非常に重要なテクニックです。
多用する画像なら出来るだけ軽い方が良いということで、透過GIF画像を作成しておきました。
今まで使用していた画像よりもこっちの方が軽いという方はダウンロードしてお使い下さい。
1px×1px 透過GIF画像 [ empty.gif - 43bytes ] ( ← 右クリックして対象をファイルに保存 )
GIF を使いたくないという方は PNG 形式 [ empty.png - 139bytes ]
ちなみにこれよりも軽い画像をお持ちの方・・・下さい(笑)

余談ですがこのPNG形式の画像、139bytesですが今現在この画像を作成することが出来ません。
不思議でたまらないんですが、この画像を作成したアプリは恐らくPSP6だと思います。誰かチャレンジしてみて下さい。

もう一つ、1×1の画像を使うことは直接には何の問題もないんですが、
以下のように比較的大きいサイズで背景画像などとして使用する場合、
<div style="width: 100%; height: 100%; background-image: url('empty.gif')"></div>
最悪の場合、数十万個という画像をタイル上に羅列させますのでいささかマシンパワーを必要とし、あまり良くありません。
なので、1×1よりも大きいサイズの透過画像も用意しました。(前述したことを除けば)僕のPCで作成出来る最小の透過画像です。これもまた必要な方は使用して下さい。
[ 1×1, 8×8, 128×128 ], GIF/PNG 計6枚です。←の画像は見えるように64×64のサイズにリサイズしています。

2003/08/10追記:SGRYさんから画像頂きました!
どれも僕が用意したものよりも断然軽いです.Thanks!
作成アプリ:GIMP 透過確認:IE6, Netscape7.1, Mozilla1.4, Opera7.11
PNG形式 1×1 - 95bytes
PNG形式 8×8 - 96bytes
PNG形式 128×128 - 110bytes