Каков предпочтительный способ масштабирования изображений в адаптивном веб-дизайне для мобильных устройств?

Question

Какой предпочтительный способ масштабирования изображений вверх и вниз в адаптивном веб-дизайне?

Лучше использовать разные изображения для экрана разного размера, или мы должны масштабировать одно и то же изображение вверх и вниз?

Какой вариант лучше всего подходит для оценки производительности веб-сайта?

Мне нужен кросс-браузерный способ работы на всех современных и старых мобильных браузерах.

Answer 1

Sencha.io Src - хорошее решение (основано на tinySrc).

Выполняет обнаружение устройства, затем передает масштабированное изображение в зависимости от размера экрана устройства.

http://www.sencha.com/products/io/

Answer 2

Я думаю о написании небольшого плагина jQuery для загрузки изображений через ajax в зависимости от размера контейнера.Но, пожалуйста, не стесняйтесь украсть мою идею.(Просто укажите здесь, если вы закончили.); -)

Answer 3

@ джитендра вьяс,

масштабирование одного и того же изображения для экрана другого размера - это нехорошо, но масштабирование изображений не является плохой вещью для адаптивного веб-дизайна. Возможно, вам придется изменить изображения и дизайн с определенным разрешением, например 1024px и 480px, поскольку они также являются разрешением вкладки и мобильного устройства.

Есть так много причин, как:

1) для мобильного устройства достаточно тяжелая загрузка изображений большого размера.

2) масштабирование одного изображения для другого разрешения стало некрасивым в какой-то момент времени, особенно для больших изображений.

есть несколько ссылок на веб-сайты для справки о том, как разумно вы можете использовать изображения.

http://thinkvitamin.com/

http://colly.com/

http://css -tricks.com /

и статья на нем http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/