開発マトリョーシカ

Google Chromeで画像がぼやけるのを防ぐためにやったこといろいろ

こんにちは。スカッとさわやかマトリョーシカです。

今回は、コーディングの話です。

最初に断っておきますが、多少ぼやけるくらいは気にしないよ、という人は見なくて構いません。
でも、環境によっては劇的に変わるので、どうぞやってみてください。

まず、結論から言います。
Google Chromeも使うのをやめて、直ちにMicrosoft Edgeにしてください。
......いや、この件についていろいろ検証してみたら、Microsoft Edgeだと綺麗に表示されることがわかってしまって、Microsoft Edge、案外すごいな、と。
とはいえ、Microsoft Edgeを広めるのは、何かしらの対応をするより大変なのでやめておきます。私自身、今のところはMicrosoft Edgeに乗り換えるつもりがないので。

というわけで、真面目な結論を。
画像サイズをちゃんと割り切れるサイズにしてください。これが最も有効です。

例えば、表示サイズが200x300ピクセルなら、実サイズは200x300ピクセル(等倍)か400x600ピクセル(2倍)か800x1200ピクセル(4倍)にしてください。
等倍である200x300ピクセルにするのが最も有効です。ブラウザにリサイズさせなければ、どんなブラウザでも同じように表示されます。Retina対応が必要でなければ、等倍にしましょう。

表示サイズが小数にならないようにしてください。
例えば、リキッドレイアウトなどにしていて、ボックスのサイズを960ピクセルの49%みたいな指定にしていて、画像の幅をそのボックスに対して100%にした場合、画像の幅が470.4ピクセルになります。これはダメです。必ず整数になるようにしてください。
リキッドレイアウトであっても、ボックスのサイズは%で指定するのではなくて、幅に合わせて何種類かのパターンにしておくほうが綺麗になります。

画像サイズを調整したら、ちゃんと綺麗になりました。よかった。
念のため、Microsoft Edgeでも確認してみたら、超綺麗になっていました。おおっ。

以下、やってみたけどうまくいかなかったヤツについても書いておきます。

CSSでbackface-visibilityを指定する

backface-visibilityプロパティは、要素の裏面がユーザに面したときに、裏面を可視にするかどうかを決めます。要素の裏面は常に透明な背景を持ち、可視ならば表面の鏡像を表示します。(二つの要素を交互に使って)カードを裏返す効果を使う場合のように、要素の裏面から表面が見えてほしくない場合があります。このプロパティは 遠近感(perspective)のない2Dの変換(transforms)には効果を及ぼしません。
......だそうです。正直よくわかりませんが、「これを指定したらうまくいきますよ」っていう人がいたので使ってみました。でも、あまり変わらないし、画像の一部がギザギザになるし、全然ダメでした。

CSSでimage-renderingを指定する

image-renderingプロパティは、拡大/縮小された画像の描画に使用されるアルゴリズムについてのヒントをブラウザに与えます。これは、拡大/縮小された画像(およびその他の要素)に対して適用されます。拡大/縮小されていない画像には効果がありません。例えば、画像本来の寸法が100x100ピクセルであり、ページに表示する寸法を200x200ピクセル(または50x50ピクセル)と指定した場合、画像は、このプロパティで指定されたアルゴリズムで拡大/縮小表示されます。ユーザのズーム操作にも適用されるでしょう。
......だそうです。画像のレンダリング方式をCSSのプロパティで変えちゃおうっていうわけですね。Google Chromeではpixelatedだけが指定できるのでこれを指定してみましたが、ある部分は綺麗になってある部分はギザギザになるという悲しい結果になりました。

ブラウザのレンダリングについてはこれからも改善されていくと思いますが、それでも画像サイズをちゃんと調整するのは有効なので、ぜひ、やってみてください。

執筆者

マトリョーシカの中の人

マトリョーシカの中の人

株式会社JBN 制作部副部長

「難しそうなことはきっとマトリョーシカがなんとかしてくれるはず。」
そんな都市伝説を形にするため地上に降り立ったクリーチャー。
年齢も性別もみんな不明。一体お前は何なんだ。
手も足も出ないし、首も回らない。
それなのに、いつもどうやって設計しているんだろう。
どうやってプログラム書いているんだろう。
そっちのほうが都市伝説。