IMGタグのストレスを激減して画像王に俺はなる

文字ばかりのページって、よっぽどコンテンツ力がないと見る気がしない。でも一点でも写真があると、ぐっとページの見栄えがよくなる。ブログの記事にも最低1つは写真を入れるようにしている人も多いと思う。

ワードプレスや無料ブログなんかのシステムは、写真のアップロードや画像サイズの変更にかかるストレスがかなり低減されており、記事内に画像を入れるのもそれほど面倒ではない。しかしHTMLを直接書く場合、IMGタグの指定や画像サイズの変更ってかなり面倒。

そこらへんを見なおしてみた。

スポンサーリンク

とにかく楽に画像を扱えるように

IMGタグで画像を使う場合、今まではPhotoshopで使うサイズに変更して、それをそのまま指定していた。サイトのレイアウトに直結する部品ならしっかりサイズが決まっているが、記事中に差し込む写真の場合、なんとなく勘でサイズを決めたり、サイトによっては横200pxとか決めて、それに従っていた。

しかし、この方法ではリサイズを繰り返すと画質が劣化するので、オリジナルを残しておく必要があるし、そもそもリサイズが面倒。

IMGタグやCSSのサイズ指定でブラウザが縮小表示してくれるのはもちろん知っていたが、IE6での縮小表示が汚くて実用にはならなかった。しかしワードプレスではCSSでサイズ変更しているのを知り、自分もそれに従うことにした。

CSSで画像サイズを変更

IMGタグにクラス指定でサイズ変更をする。調べてみるとIE6でも綺麗にリサイズできる記述も見つかり、早くやっとけば良かったという感じ。注意点として、表示サイズよりも大きな画像を読み込む事になるので、デジカメ画像なんかの巨大な画像は常識的な範囲に縮小しておく必要はある。

横・縦のどちらかが指定サイズまで縮小されるCSS設定。最後の -ms-interpolation-mode: bicubic; はIE6で縮小表示を綺麗にする記述。200pxと300pxの2つを定義しているけど、そこらへんはご自由に。

img.resize200{
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 200px;
}
* html body img.resize200{
    width: expression(this.width > this.height ? "200px" : "auto");
    height: expression(this.width < this.height ? "200px" : "auto");
}
img.resize300{
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 300px;
}
* html body img.resize300{
    width: expression(this.width > this.height ? "300px" : "auto");
    height: expression(this.width < this.height ? "300px" : "auto");
}
img{
    -ms-interpolation-mode: bicubic;
}

トップページとかレイアウトなどの表示回数の多い場所は、キッチリPhotoshopでリサイズした方が綺麗だしトラフィックの無駄も発生しない。記事に差し込む画像などは今後この方法を使っていこうと思う。

PHPのヒアドキュメントで使えるIMGタグ出力クラスを作る

今回、ちょっとまとまった量のWEBマニュアルを作成する必要があって、そのマニュアルには数ヶ所で同じデータがでてくるので、動的にデータを扱った方が良さそうだった。よって各ページはPHPのヒアドキュメントで記述することにした。

ヒアドキュメント内でスマートにIMGタグを記述したくて、IMGタグ出力関数を作ったが、ヒアドキュメント内では関数が呼び出せない。そこで、クラス化して変数にすることで表示できた。

class img_class{
    public function show( $file , $class , $alt = '' ){
        global $imgdir;
        if ( $class ){
            $class = " class="{$class}"";
        }
        return "<img src="{$imgdir}{$file}"{$class}{$alt}/>";
    }
}
$img = new img_class();

こんな感じのクラス。ヒアドキュメントからは

$content=<<<EOD
<p>{$img->show('left.jpg','left resize400')}管理画面の左側に常に表示されています。</p>
EOD;

などのように指定する。

リサイズ処理のCSS化とタグ出力の関数化で楽に画像を指定できるようになった。IMGタグはALT属性がオプションではなく必須項目となっており、ALTを指定しないとSEO的にやや弱いと言われているが、そこにはそれなりの労力が必要なので、ケースバイケースで指定しないのも有力な選択肢かと。

 

 

スポンサーリンク