Короткий ответ
Для сайта изображение стоит готовить под реальный размер отображения: сначала установить разумные ширину и высоту, затем выбрать формат и оптимизировать вес. Загружать оригинал 6000 × 4000 в блок шириной несколько сотен пикселей обычно избыточно.
Пиксели и вес решают разные задачи
1600 × 900 описывает геометрию. 350 КБ описывает объём передачи. Resize и compression связаны, но не взаимозаменяемы.
Почему огромный исходник замедляет страницу
Даже если CSS показывает картинку маленькой, браузеру всё равно нужно скачать ресурс. Лишние пиксели часто означают лишний трафик.
Нужно ли делать ровно по CSS-ширине
Не всегда: плотные экраны требуют запаса. Но запас не означает, что миниатюре шириной 400 px нужен исходник 6000 px.
Как выбрать размер
Найдите максимальную ширину блока в макете, учтите разумный запас для плотных дисплеев и используйте это как ориентир.
Пример
Изображение статьи максимум 900 CSS-пикселей. Исходник камеры 6000 × 4000. Для статьи можно подготовить существенно меньшую копию, сохранив оригинал отдельно.
Миниатюры
Карточке каталога нужен меньший ресурс, чем полноэкранной странице. Отдельные производные размеры экономят передачу данных.
Resize перед compression или наоборот
Обычно сначала приводят изображение к нужной геометрии, а затем оптимизируют конечный файл. Сжимать огромный исходник, который потом всё равно уменьшится в четыре раза, часто нерационально.
Какой формат выбрать
JPEG обычно подходит фотографиям, PNG — графике с прозрачностью и точным пикселям, WebP — современному веб-сжатию. Формат и пиксельные размеры являются отдельными параметрами.
Пошаговый процесс
- Определите место использования.
- Узнайте максимальный визуальный размер.
- Выберите пиксельный запас.
- Измените размер от оригинала.
- Проверьте качество.
- Выберите формат.
- Оптимизируйте вес.
- При необходимости создайте несколько размеров.
Первый этап можно сделать в инструменте изменения размера Helionix →
Почему нет одного идеального размера для сайта
Логотип, hero, товарная карточка, превью статьи и галерея имеют разные задачи. Универсальное «всегда 1920 × 1080» не является техническим правилом.
Как понять, что файл слишком большой
Если блок 400 px, а ресурс содержит несколько тысяч пикселей по ширине и весит мегабайты, почти наверняка есть потенциал оптимизации.
Как понять, что файл слишком маленький
Если браузер постоянно растягивает его выше фактической пиксельной ширины, на тексте и контрастных деталях появится мягкость.
Итог
Оптимизация для сайта начинается с реальной геометрии. Подберите количество пикселей под интерфейс, затем оптимизируйте формат и вес. Это уменьшает лишнюю загрузку без неоправданной потери качества.