TROUBLE 31 背景が変わると切り抜き画像のジャギーが目立ってしまう | デザインってオモシロイ -MdN Design Interactive-

TROUBLE 31 背景が変わると切り抜き画像のジャギーが目立ってしまう

2024.4.24 WED

【サイトリニューアル!】新サイトはこちらMdNについて

日々のデザイン現場で発生する問題・難題を解決します!

WEB制作トラブル速戦即決術! 第6回


[TROUBLE 31]
Webディレクショントラブル
背景が変わると切り抜き画像の
ジャギーが目立ってしまう

文=境 祐司

A. 透過PNG形式の切り抜きイメージに変更する

大きなロゴや画像で表現されたタイポグラフィを配置する場合、切り抜きイメージ(透過GIF形式のファイル)として扱うことが多い。透過GIFはデータサイズを抑えられるが、ブラウザウインドウの可変によって、想定しない表示結果となってしまう場合がある。特定領域の背景に合わせた切り抜きイメージがほかの背景に重なってしまうと、ジャギーが目立ってしまうのだ。このような場合、PNG-24形式のイメージにしておけばよい。

切り抜きイメージと背景との重なりがブラウザウインドウのサイズ変更によってどう影響するのか検証しておく必要がある。ウインドウを狭めたり、フルスクリーン表示にするなど、できるだけ多様な環境でチェックしておく
切り抜きイメージと背景との重なりがブラウザウインドウのサイズ変更によってどう影響するのか検証しておく必要がある。ウインドウを狭めたり、フルスクリーン表示にするなど、できるだけ多様な環境でチェックしておく

たとえば、白い背景に合わせて作成した切り抜きイメージ(透過GIF)がウインドウ可変によって、ほかの背景パターンなどと重なった場合、ジャギーで見栄えが低下する。重なる領域が大きいほど目立つ
たとえば、白い背景に合わせて作成した切り抜きイメージ(透過GIF)がウインドウ可変によって、ほかの背景パターンなどと重なった場合、ジャギーで見栄えが低下する。重なる領域が大きいほど目立つ

背景との重なりでトラブルが発生しそうな場合は、透過PNG形式でイメージを作成する。PNGは標準ブラウザでサポートされているが、未対応の古いブラウザ(IE 6)については、IE PNG Fixなどのライブラリを活用する
背景との重なりでトラブルが発生しそうな場合は、透過PNG形式でイメージを作成する。PNGは標準ブラウザでサポートされているが、未対応の古いブラウザ(IE 6)については、IE PNG Fixなどのライブラリを活用する
背景との重なりでトラブルが発生しそうな場合は、透過PNG形式でイメージを作成する。PNGは標準ブラウザでサポートされているが、未対応の古いブラウザ(IE 6)については、IE PNG Fixなどのライブラリを活用する

[INDEX]
>>> [TROUBLE 28] floatさせた定義リストのmarginが思いどおりにならない
>>> [TROUBLE 29] TextFieldにTextFormatがきちんと設定されない
>>> [TROUBLE 30] セレクトボックス内の文字が切れてしまう
>>> [TROUBLE 31] 背景が変わると切り抜き画像のジャギーが目立ってしまう
>>> [TROUBLE 32] コーディング期間なのに制作内容の変更を依頼された
>>> [TROUBLE 33] IE6のみでボックスサイズが広がってしまう


『web creators』の情報はこちら!>>>

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在