# Как готовить картинки, чтобы сайт не тормозил Источник / Source: https://picwin.co/blog/bystrye-kartinki-dlya-sayta Язык / Language: ru Рубрика / Topic: Технологии Автор / Author: Редакция Picwin Опубликовано / Published: 2026-03-24T00:00:00.000Z Обновлено / Updated: 2026-09-03T11:17:26.468Z Слов / Words: 1319 · Чтение / Reading: 7 min Обложка / Cover: https://picwin.co/api/picwin/blog-images/28fe457ba98278c5f799cb915679c6150621fcd273bdada45f3a965aa7e07a70.webp Переводы / Translations: en: https://picwin.co/en/blog/fast-images-for-websites, kk: https://picwin.co/kk/blog/sait-ushin-jyldam-suretter, pt: https://picwin.co/pt/blog/imagens-rapidas-para-sites, uz: https://picwin.co/uz/blog/sayt-uchun-tez-rasmlar Изображения — самая тяжёлая часть большинства страниц, и именно они решают, уложится ли сайт в порог Core Web Vitals. Разбираем, сколько может весить картинка, как считать нужный размер и какие пять строк разметки дают больше всего. --- **Кратко** Картинка должна приходить в том размере, в котором её показывают, в современном формате и с объявленными размерами в разметке. Ориентир: главное изображение экрана — до 200 КБ, остальные — до 100 КБ. Порог хорошей загрузки — 2,5 секунды до появления самого крупного элемента страницы. Тяжёлая картинка вредит не абстрактной «скорости», а конкретной секунде: той, в которую посетитель видит главное изображение страницы. Обычно именно оно и есть самый крупный элемент, а значит именно оно решает, попадёт ли страница в порог. ## Почему картинки решают скорость страницы? Потому что они почти всегда самое тяжёлое на странице и почти всегда самое заметное. Свод [Core Web Vitals](https://web.dev/articles/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](/blog/formaty-izobrazheniy-jpeg-png-webp-avif). ## Какого размера выдавать файл? Ровно того, в котором картинку показывают, умноженного на плотность экрана — и не больше. Файл 4000 пикселей в слоте шириной 400 CSS-пикселей не выглядит лучше: браузер всё равно уменьшит его, потратив на это и трафик, и память. Практический предел — двукратная плотность. Разница между 2× и 3× почти не видна, а площадь, а с ней и вес, растёт в 2,25 раза. Как считать ширину слота и плотность, подробно разобрано в статье [о разрешении, размерах и DPI](/blog/razreshenie-razmery-i-dpi). Одному слоту при этом обычно нужно несколько файлов: телефон и большой монитор показывают одну и ту же картинку в очень разной ширине. Для этого в разметке есть `srcset` и `sizes` — браузер сам выбирает подходящий файл, зная ширину слота и плотность экрана. ![Две колонки: слева тяжёлая картинка без разметки, справа подготовленная](/api/picwin/blog-images/13a9c8278470abddb78255af2c87b5e472e3a9c01eb1bc495d6b4eedd46f0f39.webp) Подготовка — это не одно действие, а четыре: размер, формат, разметка, кэш. ## Как подготовить картинку для сайта? - ### Обрежьте до нужной пропорции Пиксели, которые не попадут в кадр на странице, не должны попасть и в файл. - ### Уменьшите до ширины слота, умноженной на 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` с реальными пропорциями файла. Браузеры современных версий выводят из них соотношение сторон и держат место, даже если ширина в стилях задана процентами. Ленивая загрузка не для всего `loading="lazy"` на главном изображении экрана делает страницу медленнее: браузер откладывает загрузку того, что нужно немедленно. Ленивой должна быть только та часть, до которой ещё надо долистать. ## Что делает кэш и CDN? Кэш решает вторую и все последующие загрузки: браузер не запрашивает файл заново, если ему разрешено хранить его. Для картинок это безопасно, когда адрес меняется вместе с содержимым — например, имя файла включает отпечаток содержимого. Тогда файлу можно выставить долгий срок хранения без риска показать старую версию. CDN решает расстояние: файл отдаётся с сервера, который ближе к читателю. Для аудитории в нескольких странах это часто даёт больше, чем ещё двадцать сэкономленных килобайт. ## Что происходит при пережатии? Сжатие с потерями работает блоками. Когда качество опускают слишком низко, появляются три узнаваемых дефекта: квадраты 8 × 8 пикселей на ровных участках, ореолы вдоль резких контуров и полосы вместо плавного градиента — небо и студийный фон страдают первыми. Важно, что дефекты необратимы и накапливаются. Каждое пересохранение пережатого файла добавляет новые артефакты поверх старых, поэтому правки всегда делаются из оригинала. Как найти границу Сохраните один и тот же кадр в трёх качествах, откройте на 100 % и сравните участок с плавным градиентом. Граница приемлемого проходит там, где на небе появляются полосы. ## Что это значит для картинок из фотостока Работа со стока приходит в большом размере — это правильно для исходника и неправильно для страницы. Готовя её к публикации, повторите обычный путь: обрезка, уменьшение, современный формат, размеры в разметке. На витрине Picwin превью работы — квадрат со стороной 1024 пикселя, и в сетке каталога оно показывается уже уменьшенным. [ТехникаКадры про интерфейсы, устройства и данные — частый герой лёгких страниц. Смотреть работы](/category/technology)[БизнесДеловые сюжеты для лендингов, где главный кадр решает первую секунду. Смотреть работы](/category/business) **Главное** - Порог хорошей загрузки — 2,5 секунды до самого крупного элемента, по 75-му перцентилю. - Вес считается от канала: 1 МБ на 5 Мбит/с — это около 1,7 секунды. - Ширина файла равна ширине слота, умноженной на 2, и ни пикселем больше. - Размеры в разметке убирают скачки вёрстки бесплатно. - Ленивая загрузка — для всего, кроме главного изображения. Нужен лёгкий кадр под задачу В мини-аппе Picwin изображение создаётся под задание — с известной пропорцией и без лишних мегабайтов на странице. [Открыть мини-апп](/partners) ### Сколько весит хорошая картинка для сайта? Главное изображение экрана — до 200 КБ, иллюстрация в тексте — до 100 КБ, превью в сетке — до 40 КБ. Это ориентиры, выведенные из скорости канала, а не жёсткие правила. ### Сколько всего должны весить картинки на странице? Столько, чтобы главное изображение успело показаться за 2,5 секунды. Всё остальное можно и нужно откладывать ленивой загрузкой. ### Помогает ли WebP, если картинка уже маленькая? Да, но выигрыш будет в килобайтах, а не в секундах. Начинать стоит с размера: файл вдвое шире слота даёт куда больший перерасход, чем неудачный формат. ### Нужно ли сжимать PNG-иконки? Иконки почти всегда лучше отдавать вектором. Если нужен растр — уменьшайте палитру: PNG с 64 цветами весит в разы меньше полноцветного. ### Что важнее: размер файла или количество файлов? Сегодня — размер. Современные соединения выдерживают десятки параллельных запросов, а вот лишние мегабайты не ускоряет ничто. ### Почему страница быстрая у меня и медленная у посетителей? У вас всё в кэше и хороший канал. Смотрите на 75-й перцентиль и включайте ограничение скорости в инструментах разработчика. ### Как проверить, что стало лучше? Замерьте время до самого крупного элемента до и после правок на одном и том же ограничении скорости. Ощущения без замера обманывают почти всегда. Дальше по теме: [размеры и разрешение](/blog/razreshenie-razmery-i-dpi), [выбор формата](/blog/formaty-izobrazheniy-jpeg-png-webp-avif) и [подготовка к печати](/blog/podgotovka-izobrazheniya-k-pechati) — там те же пиксели работают по другим правилам. Готовые работы — в [каталоге](/catalog).