Перейти к содержанию
kolek5520

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

Рекомендуемые сообщения

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Цитата

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

Изменено пользователем jaffagold

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.