赤猫日誌

前回の記事でも書いたようにFrontBufferを1600*1200、Frapsではこのサイズのままとっているので元画像サイズも1600*1200です。
前回の記事では加工法に関してのみ絞っていたので抜けていましたが、載せている画像は全て縮小済みのものです。

では最初に元の画像を載せてみましょう（今回は加工済みです）

…ですが、そのまんま乗せるとBlogのデザインが崩れてしまうので横幅と縦幅を指定します。今のデザイン幅は横幅最大605なのでそれに設定してみます。

<IMG class=pict height=454 alt=縮小-01 src="http://image.blog.livedoor.jp/fin_fith/imgs/f/6/f6e86a2f.jpg" width=605 border=0>

※クリックすると原寸大

上記のような感じになります。
ですが、この方法の場合ですと2つの問題が発生します。

1. IEの縮小法が単純な縮小の為、見た目がガクガクになる。
2. 縮小しているとはいえ、元のデータを読んでいるので画像の読み込みに時間がかかる。

上記の点からあまりスマートではありません。特に2はナローバンドで閲覧している場合だと大問題です。
一応Livedoorにはサムネイルを自動作成してくれる機能はありますが、横幅160固定なので実用的ではありません。

やはり綺麗に見せるためには「あらかじめフォトレタッチソフトで縮小したもの」を載せるのが一番の手段だと思います。

Photoshop Elements 4.0には何種類かの縮小法があるので比較してみましょう。

【ニアレストレイバー法】

【バイリニア法】

【バイキュービック法】

【バイキュービック法（滑らか）】

【バイキュービック法（シャープ）】

縮小法だけでもこれだけ違いがでます。
ニアレストレイバー法は単純な縮小に近いため使いません。
赤猫日誌ではバイキュービック法（シャープ）を使用することが多いです。

赤猫日誌ではトップは3カラム、記事毎は2カラムにしているため、3カラムのデザインを崩さない、横幅295の画像を使用していることが多いです。
ですが、これだと小さすぎるため、予め横幅800の画像も作っておき、横幅295の画像をサムネイル扱いにしてリンクを張ります。

こうすることにより、サムネイルでもはっきりとした綺麗で容量の小さい画像。クリックした時のみ大きいサイズの画像を表示でき、見た目上も回線上の問題も解決できます。

その分手間は発生しますけどね。