Разные размеры изображения под разные разрешения экрана

[edifier]

Сейчас верстаю для своего магазина (ocstore1551) адаптивный шаблон и озадачился вот чем.

 

Специфика товара требует изображения больших размеров на страницах категорий и товаров на дескопах.

В мобильной версии сайта все наоборот. Хочется отдавать пользователю изображения меньшего размера для более быстрой загрузки страниц магазина.

 

Я вижу такое  решение:

При первом заходе посетителя сохраняем разрешение экрана в кукисах. В контроллер  добавить переменную с разрешением экрана взятую с кукисов и исходя из нее отправлять разные значения в model/tool/image

 

У меня не настолько много опыта, чтобы быть уверенным в работоспособности моего решения. Может кто нибудь делал подобное и подтвердит правильность моей мысли, или подскажет другой вариант решения данной задачи?

 

 

[halfhope]

Небезопасно передавать в кукисах на сервер такие данные. В голову приходит аттрибут у изображений, data-mobile-src="изображение для мобильной версии". Потом посредством javascript можно поменять примерно так для мобильников:

if (screen.width <= 700)
{
    var $images = $('img[data-mobile^="http"]');
    $.each($images, function(index, obj){
        var $mobile_src = $(obj).attr('data-mobile-src') || $(obj).data('mobile-src');
        $(obj).attr({'src':$mobile_src});
    });
}  

Змінено 5 лютого 2016 користувачем halfhope

[edifier]

 

Небезопасно передавать в кукисах на сервер такие данные. В голову приходит ...

А в чем заключается опасность? Ведь в кукисах сохраняются к примеру выбор языка, или валюты. Почему тогда опасно сохранить значение ширины экрана?

 

Ваш метод интересен, попробовал его с небольшими правками. Я правильно понимаю, что любой браузер исполнит скрипт раньше, чем пойдет загрузка изображений с значение атрибута src="" который указаны до замены скриптом?

[AlexDW]

как вариант - picturefill

[edifier]

как вариант - picturefill

Спасибо за предложенный вариант.

Но мне хотелось именно на стороне сервера адаптировать изображения.

 

Нашел такое решение - http://adaptive-images.com/

Тут как раз в кукисах сохраняется размер экрана и с помощью mod_rewrite  в htaccess подменяется изображение. Для моих нужд логику нужно переделать, но в целом эта идея мне почему то больше нравится чем решения на стороне клиента. Хотя может я не прав. В общем нужно протестировать и тогда принять окончательное решение.

[halfhope]

Спасибо за предложенный вариант.

Но мне хотелось именно на стороне сервера адаптировать изображения.

 

Нашел такое решение - http://adaptive-images.com/

Тут как раз в кукисах сохраняется размер экрана и с помощью mod_rewrite  в htaccess подменяется изображение. Для моих нужд логику нужно переделать, но в целом эта идея мне почему то больше нравится чем решения на стороне клиента. Хотя может я не прав. В общем нужно протестировать и тогда принять окончательное решение.

 

Предложенный @AlexDW вариант - безкостыльное решение. До этого не знал, что есть такая либа. 

Змінено 7 лютого 2016 користувачем halfhope

[chukcha]

в html5 есть чудный атрибут

<img srcset />

 

<img src="normal.png" srcset="mini.png 320w, large.png 1920w" />

https://www.w3.org/html/wg/drafts/html/master/semantics.html#viewport-based-selection

 

или..

<picture>  <source media="(min-width: 45em)" srcset="large.jpg">  <source media="(min-width: 32em)" srcset="med.jpg">  <img src="small.jpg" alt="The president giving an award."></picture>

Как там с поддержкой браузеров - не знаю

[chukcha]

в варианте AlexDW необходимо чтоб статика отдавалась через apache

 

или же немного переделывать  model tool/image - чтобы в src подставлялось, что-то такое adaptive-images.php?image=название_изображения