Webサイト用の画像を書き出しする際の落とし穴

Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。

　Webサイト用の画像を書き出しする際、「写真であればJPEG 形式」、「テキストやイラストであればGIF形式」というように使い分けていると思うが、写真とテキストを一緒に書き出しする場合、適切な圧縮形式が変わってくるため、JPEG形式にすると文字部分の輪郭がぼやけたり、GIF形式にすると写真部分が荒くなったりと、どちらも一長一短で方法に悩む【1】。

　この場合、Fireworksの「JPEGマスク」機能を使うと、写真とテキストの圧縮率を個別に設定することができる【2】。

　方法としては、まずマーキーツールでテキスト部分を選択し、この選択範囲が表示された状態で、修正メニュー→“圧縮率によるJPEG”→“選択範囲をJPEGマスクとして保存”とすることで、選択範囲を別の圧縮率で書き出す準備ができる。選択した部分の圧縮率は、修正メニュー→“圧縮率によるJPEG”→“設定”で適宜調整しよう。あとは通常通り書き出すと設定した圧縮率が反映されて出力される。

解説：（有）アップルップル

（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）