- PVSM.RU - https://www.pvsm.ru -

Яблоко или груша?

Яблоко или груша?

На форуме Stackoverflow обсуждают [1], как сделать PNG, который будет по-разному выглядеть в разных браузерах. Например, картинка вверху выглядит как груша в Chrome/Firefox, но «превращается» в яблоко в браузере IE.

Рецепт простой. Всё дело в гамма-коррекции [2], которая учитывается в одних браузерах и не учитывается в других браузерах. Чтобы эксплуатировать эту разницу, мы берём две картинки: яблоко и грушу. Грушу помещаем в светлые пикселы PNG.

Яблоко или груша?

Яблоко — в тёмные пикселы PNG. Яркость нужно настроить так, что при затемнении груша становится хорошо видна, а яблоко затемняется полностью. И наоборот, при максимальном осветлении груша практически исчезает, а яблоко хорошо видно.

Яблоко или груша?

Совмещаем два изображения, так что светлые и «тёмные» пикселы чередуются шахматкой — и готово. Теперь, если браузер включает гамма-коррекцию, то на экране появляется груша. А если просто сохранить картинку на десктоп и открыть в редакторе, то видно яблоко.

Яблоко или груша? Яблоко или груша?

P.S. Ещё один пример [3]: в браузерах с гамма-коррекцией отображается эмблема GNU, а в старом IE или Opera — цветной пингвин.

Яблоко или груша?

Автор: alizar

Источник [4]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/png/31419

Ссылки в тексте:

[1] обсуждают: http://stackoverflow.com/questions/15858586/why-does-this-png-image-display-differently-in-chrome-firefox-than-in-safari-a

[2] гамма-коррекции: http://hsivonen.iki.fi/png-gamma/

[3] Ещё один пример: http://i.imgur.com/36EgeOF.png

[4] Источник: http://habrahabr.ru/post/175757/