Какой ширины должно быть изображение на сайте? Начните с размера на экране
Укажите размер изображения, обрезку и вес файла индивидуально для полноразмерной обложки с мобильной картой.
Если фотография товара находится на карточке шириной 480 пикселей на главной странице, нет необходимости отправлять снимок с разрешением 5000 пикселей на каждый телефон. Если одну и ту же фотографию можно открыть на весь экран, то в большой версии тоже есть такая функция. Первое измерение производится на площади, занимаемой изображением в браузере, а не в папке с файлами.
Оцените маленькую карточку, увеличив масштаб.
Например, для карточки шириной 480 CSS-пикселей подготовьте два вывода шириной 480 и 960 пикселей. Браузер может выбирать на основе плотности экрана и макета с соответствующим образом определенными значениями исходного набора и размеров. Если на телефоне карта обрезана по-другому, поместите меньший размер в отдельную рамку. Простое уменьшение размера не вернет продукт, находящийся за пределами рамки.
Откройте два выхода на реальном телефоне. Если тонкая упаковочная линия рвется, постепенно уменьшайте сжатие. Если изображение остается резким, используйте более светлый файл. Запись того, какой размер использовался для обложки, листинга и крупного плана, упрощает поддержание того же качества в будущих обновлениях сайта.