Кратко
Картинка должна приходить в том размере, в котором её показывают, в современном формате и с объявленными размерами в разметке. Ориентир: главное изображение экрана — до 200 КБ, остальные — до 100 КБ. Порог хорошей загрузки — 2,5 секунды до появления самого крупного элемента страницы.
Тяжёлая картинка вредит не абстрактной «скорости», а конкретной секунде: той, в которую посетитель видит главное изображение страницы. Обычно именно оно и есть самый крупный элемент, а значит именно оно решает, попадёт ли страница в порог.
Почему картинки решают скорость страницы?
Потому что они почти всегда самое тяжёлое на странице и почти всегда самое заметное. Свод Core Web Vitals называет три величины; изображения влияют на две из них напрямую:
- LCP — время до отрисовки самого крупного элемента. Хорошим считается результат до 2,5 секунды;
- CLS — накопленный сдвиг вёрстки. Хорошим считается 0,1 и меньше.
Оба порога измеряются по 75-му перцентилю загрузок, то есть три четверти посещений должны укладываться в норму — на медленном телефоне тоже, а не только на вашем ноутбуке.
Сколько может весить картинка?
Считайте от канала, а не от ощущений. Скорость 5 Мбит/с — это 5 000 000 ÷ 8 = 625 000 байт в секунду, примерно 610 КБ/с. Значит, картинка весом 1 МБ едет к читателю около 1,7 секунды — и это без учёта установки соединения и без конкуренции с остальными файлами страницы.
Отсюда бюджет, который легко проверить арифметикой.
| Роль на странице | Ориентир веса |
|---|---|
| Главное изображение экрана | до 200 КБ |
| Иллюстрация в тексте | до 100 КБ |
| Превью в сетке каталога | до 40 КБ |
| Иконка, аватар | до 10 КБ |
Полезно помнить, откуда берутся мегабайты. Несжатый кадр 1920 × 1080 в трёх байтах на пиксель — это 1920 × 1080 × 3 = 6,2 МБ. Всё, что меньше, — заслуга сжатия, и разница между 6 МБ и 150 КБ целиком в том, как именно вы сохранили файл. Какой формат выбрать, разобрано в статье о JPEG, PNG, WebP и AVIF.
Какого размера выдавать файл?
Ровно того, в котором картинку показывают, умноженного на плотность экрана — и не больше. Файл 4000 пикселей в слоте шириной 400 CSS-пикселей не выглядит лучше: браузер всё равно уменьшит его, потратив на это и трафик, и память.
Практический предел — двукратная плотность. Разница между 2× и 3× почти не видна, а площадь, а с ней и вес, растёт в 2,25 раза. Как считать ширину слота и плотность, подробно разобрано в статье о разрешении, размерах и DPI.
Одному слоту при этом обычно нужно несколько файлов: телефон и большой монитор
показывают одну и ту же картинку в очень разной ширине. Для этого в разметке
есть srcset и sizes — браузер сам выбирает подходящий файл, зная ширину
слота и плотность экрана.
Подготовка — это не одно действие, а четыре: размер, формат, разметка, кэш.
Как подготовить картинку для сайта?
Обрежьте до нужной пропорции
Пиксели, которые не попадут в кадр на странице, не должны попасть и в файл.
Уменьшите до ширины слота, умноженной на 2
Один шаг уменьшения из оригинала, а не лесенка из промежуточных размеров.
Сохраните в современном формате
WebP или AVIF с фолбэком на JPEG. Прозрачность — только там, где она нужна.
Сделайте второй и третий размер
Например, 400, 800 и 1600 пикселей по ширине — их перечисляет
srcset.Объявите размеры в разметке
Атрибуты
widthиheightилиaspect-ratioв стилях: браузер займёт место до загрузки.Расставьте приоритеты
Главному изображению —
fetchpriority="high", всему, что ниже первого экрана, —loading="lazy".Проверьте на медленном соединении
В инструментах разработчика включите ограничение скорости и посмотрите, что видит посетитель в первые две секунды.
Сколько размеров держать в srcset?
Обычно достаточно трёх-четырёх ступеней. Шаг между соседними имеет смысл делать примерно в полтора раза: 400, 600, 900, 1400 пикселей. Более частая лесенка почти не экономит трафик — вес растёт как площадь, и разница между 800 и 900 пикселями составляет около 25 % байтов, — зато умножает работу по подготовке и хранению файлов.
Ступени выбирают от вёрстки, а не от круглых чисел. Посмотрите, какой ширины
слот на телефоне, на планшете и на широком мониторе, и возьмите эти три
значения, удвоив каждое под плотные экраны. Атрибут sizes при этом обязателен:
без него браузер считает, что картинка занимает всю ширину окна, и на телефоне
скачивает файл заведомо крупнее нужного.
Как понять, что именно тормозит?
Замером, а не догадкой. Откройте вкладку сети в инструментах разработчика, отсортируйте запросы по размеру и посмотрите на первые пять строк — в подавляющем большинстве случаев это картинки. Затем включите ограничение скорости и перезагрузите страницу: становится видно, какой файл задерживает появление главного экрана.
Полезно смотреть и на разницу между тем, какого размера файл пришёл, и тем, в каком размере он показан. Браузер показывает оба числа в подсказке к элементу. Если файл шире слота больше чем вдвое, лишний вес найден.
Как не дать вёрстке прыгать?
Объявить размеры. Пока браузер не знает пропорцию картинки, он оставляет ей ноль высоты, а после загрузки раздвигает страницу — текст уезжает вниз ровно в тот момент, когда его начали читать. Это и есть сдвиг вёрстки, и он считается в CLS.
Лечится это одной строкой: атрибуты width и height у тега img с реальными
пропорциями файла. Браузеры современных версий выводят из них соотношение
сторон и держат место, даже если ширина в стилях задана процентами.
Что делает кэш и CDN?
Кэш решает вторую и все последующие загрузки: браузер не запрашивает файл заново, если ему разрешено хранить его. Для картинок это безопасно, когда адрес меняется вместе с содержимым — например, имя файла включает отпечаток содержимого. Тогда файлу можно выставить долгий срок хранения без риска показать старую версию.
CDN решает расстояние: файл отдаётся с сервера, который ближе к читателю. Для аудитории в нескольких странах это часто даёт больше, чем ещё двадцать сэкономленных килобайт.
Что происходит при пережатии?
Сжатие с потерями работает блоками. Когда качество опускают слишком низко, появляются три узнаваемых дефекта: квадраты 8 × 8 пикселей на ровных участках, ореолы вдоль резких контуров и полосы вместо плавного градиента — небо и студийный фон страдают первыми.
Важно, что дефекты необратимы и накапливаются. Каждое пересохранение пережатого файла добавляет новые артефакты поверх старых, поэтому правки всегда делаются из оригинала.
Что это значит для картинок из фотостока
Работа со стока приходит в большом размере — это правильно для исходника и неправильно для страницы. Готовя её к публикации, повторите обычный путь: обрезка, уменьшение, современный формат, размеры в разметке. На витрине Picwin превью работы — квадрат со стороной 1024 пикселя, и в сетке каталога оно показывается уже уменьшенным.
ТехникаКадры про интерфейсы, устройства и данные — частый герой лёгких страниц.
Деловые сюжеты для лендингов, где главный кадр решает первую секунду.
Главное
- Порог хорошей загрузки — 2,5 секунды до самого крупного элемента, по 75-му перцентилю.
- Вес считается от канала: 1 МБ на 5 Мбит/с — это около 1,7 секунды.
- Ширина файла равна ширине слота, умноженной на 2, и ни пикселем больше.
- Размеры в разметке убирают скачки вёрстки бесплатно.
- Ленивая загрузка — для всего, кроме главного изображения.
Сколько весит хорошая картинка для сайта?
Главное изображение экрана — до 200 КБ, иллюстрация в тексте — до 100 КБ, превью в сетке — до 40 КБ. Это ориентиры, выведенные из скорости канала, а не жёсткие правила.
Сколько всего должны весить картинки на странице?
Столько, чтобы главное изображение успело показаться за 2,5 секунды. Всё остальное можно и нужно откладывать ленивой загрузкой.
Помогает ли WebP, если картинка уже маленькая?
Да, но выигрыш будет в килобайтах, а не в секундах. Начинать стоит с размера: файл вдвое шире слота даёт куда больший перерасход, чем неудачный формат.
Нужно ли сжимать PNG-иконки?
Иконки почти всегда лучше отдавать вектором. Если нужен растр — уменьшайте палитру: PNG с 64 цветами весит в разы меньше полноцветного.
Что важнее: размер файла или количество файлов?
Сегодня — размер. Современные соединения выдерживают десятки параллельных запросов, а вот лишние мегабайты не ускоряет ничто.
Почему страница быстрая у меня и медленная у посетителей?
У вас всё в кэше и хороший канал. Смотрите на 75-й перцентиль и включайте ограничение скорости в инструментах разработчика.
Как проверить, что стало лучше?
Замерьте время до самого крупного элемента до и после правок на одном и том же ограничении скорости. Ощущения без замера обманывают почти всегда.
Дальше по теме: размеры и разрешение, выбор формата и подготовка к печати — там те же пиксели работают по другим правилам. Готовые работы — в каталоге.
