Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

Размер изображения товаров для пк и телефона


Recommended Posts

Добрый день.
Столкнулся с такой проблемой: сайт имеет ширину 1220px минус боковая колонка, 4 изображения в ряд в сетке товаров по  236px
Размер изображений сделал по 236px, что бы не было лишнего веса при загрузке. Насколько я понимаю, даже если больше выставить в сетке товаров, мы все равно будем видеть изображение 236px (поправьте если не прав)

проблема в том, что при загрузке сайта на мобильном (1 товар в ряд), эти самые изображения в 236px выглядят ужасно

 

Скажите, как сделать что бы на телефоне выглядело прилично, без пиксилизации? Только повышением качества картинок в настройках? но тогда увеличивается общий вес загрузки на пк

Link to post
Share on other sites

При проблемах с версткой желательно указывать в сообщении адрес сайта. Иначе это превращается в гадание на кофейной гуще. Посмотрите srcset.

Link to post
Share on other sites

мы этот вопрос решаем на наших сайтах двойным размером изображения. 
То есть само исходное изображение загружаемое на сервер допустим 1000пк
в категориях ставим размер например 500, с помощью стилей задаем блоку с изображением максимальный размер 250пк и само изображение растягиваем на 100% ширины этого блока. То есть картинка имеет вес как 500 пк, но выглядит как 250, за-то на мобильном нет мыла.
Другого выхода я не нашел, разве что изображение будет не растровым, а векторным, но это другая история. 
Решение не элегантное, с точки зрения оптимизации, но работает вполне нормально. 
А вот с srcset были какие-то проблемы, уже не помню

Link to post
Share on other sites

Цитата

что при загрузке сайта на мобильном (1 товар в ряд), эти самые изображения в 236px выглядят ужасно

Варианты решения можно комбинировать

1. Расположите товар в 2 колонки на экранах от 500 (можете пробовать от 450) до 756 пикселей.

Укажите для размера экрана от 500 до 767 пикс.

 

@media (min-width: 500px) and (max-width: 767px) {

    .product-layout.product-grid.col-xs-12 {

        width: 50% !important;

     }

}

2. Уберите для этих изображений стиль

width: 100%;

там должен быть

max-width: 100%;

3. Укажите размер миниатюр  около 300-350 пикселей 

Edited by jaffagold
Link to post
Share on other sites

спасибо за ответы

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

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.