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

[kolek5520]

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

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

 

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

[halfhope]

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

[Einshtein]

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

[jaffagold]

Цитата

что при загрузке сайта на мобильном (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 пикселей 

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

[kolek5520]

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

[halfhope]

Вот еще что вспомнил: