ヘッダー画像を設置

5月30日、ヘッダー画像(下の画像)を設置した。

ファイル形式はPNG。容量は206バイトの超軽量。一般的なバナーの数十分の一。サイズは128×32。

今使用しているテーマ「Twenty Eleven」では、ヘッダー画像をサイトの横幅に合わせて拡大して表示される(アスペクト比は固定)。
当初は32×8ピクセルのものを使用するつもりだったが、実際にヘッダーに設置してみると、拡大されたことによってかなりぼやけてしまう事に気付いた。そこで4倍の128×32に拡大した当画像を、バナーとして使うことも兼ねて採用した。

◆画像の作製

  1. 作製する画像の方針
    1.解像度を出来るだけ小さくする。軽量化の為。
    2.縦と横の画素数を2のべき乗にする。(バナーのサイズは規格化されつつあるが、規格の革新を企ててこのようなサイズ設定をした。)
    3.色は、白・黒・赤・青・緑という風に、色光における基本的な色を採用する。これは汎用性を高める為。
    4.使用する色の数は少なくする。
  2. 絵の内容
    解像度が小さくて済むよう、アルファベットでサイト名を書いた。更に解像度を下げるため、文字の間隔をなくした。しかしこのまま(文字の色が一種)だと読めないので、隣り合う文字の色が違うようにした。
    当画像を貼り付ける場所の背景と文字の色が被る事を防ぐため、文字列の周囲を1ブロック分空けるようにした。
    赤は感情、青は理性を意味し、「感情が先で理性が後に存在すること」を表した。緑は植物、黒は鉛筆を意味し、「鉛筆は植物から出来ている」という意味で、因果律を象徴させた。
  3. ファイル形式は、最も容量が小さくなるものを選び、PNG(206バイト)にした。
    ・BMP⇒4170バイト
    ・GIF⇒540バイト
    ・JPG⇒3371バイト
    GIFよりPNGのほうが軽くなるのが意外だった。JPGは不可逆圧縮のため、画像が劣化。

    ペイントソフト「PictBear」を使い、パレットのサンプル数を、必要としている5色に減らしたら、容量が大きく減った。
    普通のバナーの数十分の一の容量を実現した。

◆設置の経緯

ヘッダー画像の設置を決めた理由
(1)「むぎの手記」というサイトのタイトルと、記事の主題の文字の大きさが逆転している
(2)サイトを印象付けるものとして、象徴が欲しかった

画像自体はH24年10月に既に作っていたが、記事の投稿に追われなかなか設置できず、容量削減などを経て、当サイト20000HIT目前を機に設置した。

カテゴリー: 当サイト パーマリンク

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">