responsive img

[npofopr]

Приветствую.
Подскажите, как вы делаете картинки под разные экраны?
Я не про max-width: 100%;
Делаете/делали ли вы разные вариации изображений, т.е. под телефончики свои картинки, под айпадики свои и под телевизоры свои.
Как это лучше всего делать?
Нашел пару понравившихся скриптов:
http://responsiveimg.com/
https://github.com/teleject/hisrc
Может еще подскажите какие? Чтобы не было нагромождения кода, а просто указывалась картинки через data="" или автоматически.
Или это все можно делать вообще другими способами? Пхп там или еще как то?
Скорее всего еще битрикс будет стоять, может там какие то встроенные или расширяемые штуки есть?
Интересует мнение, как удобнее и правильнее, но чтобы не в ущерб.

 

[lekzd]

на новой айоси и новых андройдах, после обновления браузера на webkit их обозреватели автоматически начнут воспринимать атрибут srcset у img - это нативное решение как раз для таких случаев
в Foundation 4 из коробки идет решение для таких изображений

 

[npofopr]

Ну вот вроде
<img src="http://responsiveimg.com/images/flower.jpg" srcset="http://responsiveimg.com/images/flower_small.jpg 720w" alt="">должно же срабатывать. При 720px вроде как должно переключать картинку. Но не работает, или я в корне что то попутал)

 

[lekzd]

должно же срабатывать. При 720px вроде как должно переключать картинку. Но не работает, или я в корне что то попутал)

ага, srcset должен содержать адрес картинки двойного разрешения для экранов типа retina, я видно зря не так понял сначала
в фоундейшн решение как раз под экраны разного размера, еще есть плагины на js, которые используют data-атрибуты