More than 5 years have passed since last update.

Windows版Firefoxで同一srcの画像が荒れる

Last updated at 2014-06-25Posted at 2014-06-25

何を言ってるかわからねえと思うがありのままに起こったことをはなすぜ。

同じ画像を同一ページ内でリサイズして使いまわしていた時の話。

<img src="http://dummyimage.com/400x150/000/fff/?text=NEW%E6%96%B0%E3%81%97%E3%81%84"/>

<img src="http://dummyimage.com/400x150/000/fff/?text=NEW%E6%96%B0%E3%81%97%E3%81%84" width="200"/>

<img src="http://dummyimage.com/400x150/000/fff/?text=NEW%E6%96%B0%E3%81%97%E3%81%84" width="100"/>

<img src="http://dummyimage.com/400x150/000/fff/?text=NEW%E6%96%B0%E3%81%97%E3%81%84" width="50"/>

fiddle

このようなとき、縮小率が50%を切り始めると、小さい方の画像のアンチエイリアスが切れたような感じになる。（ニアレストネイバー法で縮小されている気がする）

なにこれ珍百景。

対処法

@yomotsuさんにより対処法が発覚する。

<img src="http://dummyimage.com/400x150/000/fff/?text=NEW%E6%96%B0%E3%81%97%E3%81%84"/>

<img src="http://dummyimage.com/400x150/000/fff/?text=NEW%E6%96%B0%E3%81%97%E3%81%84&bugfix1" width="200"/>

<img src="http://dummyimage.com/400x150/000/fff/?text=NEW%E6%96%B0%E3%81%97%E3%81%84&bugfix2" width="100"/>

<img src="http://dummyimage.com/400x150/000/fff/?text=NEW%E6%96%B0%E3%81%97%E3%81%84&bugfix3" width="50"/>

fiddle

各画像に対して、キャッシュバスターを付与すれば、荒れない。

でもなぜこうなるのかは不明です。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up