Jump to content
Sign in to follow this  
edifier

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

Recommended Posts

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

 

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

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

 

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

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

 

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

 

 

Share this post


Link to post
Share on other sites

Небезопасно передавать в кукисах на сервер такие данные. В голову приходит аттрибут у изображений, 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});
    });
}  
Edited by halfhope

Share this post


Link to post
Share on other sites

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

 

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

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

 

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

Edited by halfhope

Share this post


Link to post
Share on other sites

в 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>

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.