Как правильно заменять картинки для Ретины?

Question

[Евгений Федоров]

Ребят у меня есть трабл с ретиной, я делаю проверку на ретину и подставляю картинку маленькую и б"ольшую в два раза. Но у меня при этом меняется и сам размер картинка, она начинает быть в два раза больше. Я не применяю к картинке абсолютные размеры, она у меня динамичная. Что посоветуете?

Кроме
<\img src="..." onload="this.width/=2;this.onload=null;" />
есть еще варианты?

Answer 1

[Хороший Человек]

Сохраняйте картинку из фотошопа в 2 раза больше, т.е. была картинка по умолчанию - 200х200 - сохраните ее как image.jpg, а потом еще раз сохраните, но уже с размером 400х400 и назовите например [e-mail]. И экраны, у которых высокая плотность пикселей будут использовать именно вторую картинку. Она будет так же отображаться как и обычная, не подумайте. Экраны с такой плотностью пикселей ужимают картинку 400х400 заданную методом ниже, в 2 раза.

<img src="images/image.jpg" srcset="images/[e-mail] 2x" alt="img">

Почитать тыц и бац

Answer 2

[Сергей Горячев]

Почитайте, возможно решит вашу проблему.

Answer 3

[Дмитрий Христоев]

https://egorkhmelev.github.io/retina/

Answer 4

[Евгений Федоров]

Пока это нравиться больше всего.

<img src="..." onload="this.style.width=(this.width / 2)+'px';this.onload=null;" />

Answer 5

[Павел Гришин]

frontender.info/webkit-implements-srcset-and-why-i...
это если не нужна поддержка IE и опера мини.
P.S. Ретина либо на маках , где нет IE, либо на оч хороших мониторах, где тоже скорей всего нет IE. А если человек пользуется оперой мини, то и картинки в 2 раза большего размера ему не к чему.