アメブロで画像を使用する際、「できるだけ軽い画像にしよう」という気持ちから、なるべくGIF画像を使うようにしていたのですが、今回気づいた点がありますので記事にしておきたいと思います。
GIF画像縮小の際には同時に減色もされる
GIF画像を使う際、ブログ上では小さい画像を使い、詳しく見たい方だけ拡大して見てもらえればいいと考えていました。
ですので、単純に画像を選択して、書き出されるコードをそのまま使うようにしていたのですが、そこで書き出されるHTMLコードでは自動的にリサイズされたGIF画像が使われるように指定されています。
たまに「画像がきたないなぁ」と思いつつ、じゃまくさいのでそのままにしていましたが、GIF画像がリサイズされる際、減色も同時に行わる仕様になっているようです。これを分かったうえで利用する必要がありますね。
3つの書き出しの違いの相違点
そうだとはっきり気づいたのは、下のの図を利用した際。いちばん左の画像は、背景を白にしたかったのに色がついてしまっています。
どうしたものかと、背景を透明にして書きだしてみると背景は白くなってくれました。それが下目の画像。けれども今度は、下向き矢印がきたなく見えるのが気になる。
そこで、マットを白に指定して書き出し直したのが3番目の画像です。
いずれもアメブロ上には別々に登録されている画像ですので、当然元画像は別のものです。ですが、拡大するとすべてほぼ同じように見えることが分かります。透過指定をしながらマット色を指定していない画像のサイドメニューの帯の色が違って見えるのが違う点です。
この画像の場合はサイズが小さいのでJPG画像にしてもそれほど容量は変わりません。ただ、JPGは同じ色の塗りつぶしが苦手ですので、GIFのほうが綺麗に見えます。ですので写真ででもない限り、できるだけ画像はGIF形式を使用したくなりますね。
GIF画像を使用する際の推奨利用方法
GIFの場合、元々画像サイズの容量もそれほど大きくありませんので、自動縮小された画像を使用せず、元画像をwidth指定することで小さく見せ、それをリンクで大きく見せるという方法で利用したほうがよいだろうと思います。
サイズが大きくなると、JPG形式とGIF形式の容量の差は10倍に近づくこともあります。その場合、JPGの自動縮小された画像の容量と、GIFの元画像の容量の差は狭まることになりますので、ますますこの方法が有利になってくるように思えます。