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

Карта, отображаемая шириной 800 CSS, может использовать кандидат изображения, шириной 1600 пикселей изображения в качестве примера 2x. Браузер может выбрать подходящий источник на основе макета, плотности устройства и других условий, когда веб-сайт предоставляет адаптивную разметку изображений. Файл 1600 пикселей не означает, что карта должна занимать 1600 пикселей CSS на странице.

Измерьте фактический макет перед экспортом. Столбец статьи, баннер полной ширины и небольшая карточка продукта редко нуждаются в одинаковом размере источника. Также проверьте макет телефона, где изображение может занимать разную ширину или использовать другую культуру. Сделать каждый файл вдвое наибольшей шириной просмотра на рабочем столе может тратить байты. Относитесь к экспорту более высокой плотности как к кандидатам на реальную адаптивную реализацию, а не к одному негабаритному файлу, который каждое устройство должно загружать.

Эта страница начинается с ящика WebP fit 1600 на 1600 пикселей. Это иллюстративная граница, поэтому замените ее значениями, основанными на измеренном вами размере дисплея. Посадка внутри сохраняет пропорции и не увеличивает меньший источник. Например, широкий оригинал может достигать 1600 пикселей в поперечнике, в то время как портрет соответствует высоте. Проверьте фактические выходные размеры.

Если источник имеет ширину всего 700 пикселей, запись экспорта в 1600 пикселей не создает детали более крупного оригинала. Используйте лучший источник или примите меньшего кандидата. Сравните световую заточку с выключенным после изменения размера и осмотрите тонкие текстуры при предполагаемом размере дисплея. Для прозрачной графики вместо этого используйте PNG, так как текущий экспорт WebP здесь непрозрачный. Сохраните оригинальный дизайн или фотографию, чтобы позже создать разных кандидатов.

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

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

Предположим, что ваша самая широкая карта имеет 400 пикселей CSS, и иллюстрация остается ясной на этой ширине. Кандидат из 800 пикселей является одним из возможных 2-кратных экспорта, когда источник его поддерживает. Проверьте карту и в более узких макетах, так как изображение, которое охватывает весь экран телефона, может иметь другую ширину дисплея от настольной карты. Экспорт из оригинала для каждого необходимого кандидата, а не увеличение наименьшего. Подтвердите, какой файл браузер выбирает на фактической странице. Эта окончательная проверка выбора связывает расчет локальных размеров с байтами, которые действительно получают посетители для изображения.