Создание полезных сайтов
Картинки на сайте тяжёлые или размытые: проверьте пиксели, байты и sizes
Маленькая картинка на странице может загружаться большим файлом. Начните с одного изображения: выясните, что получает браузер, и исправьте причину проблемы.
1. Сначала назовите проблему
Выберите фотографию или скриншот на реальной странице. Запишите один недостаток: долгая загрузка, потеря деталей или скачок текста при появлении картинки. Исправления могут быть разными. Здесь речь о растровых изображениях в HTML-элементах img; фоновые картинки в CSS и отдельные кадрирования для телефона требуют своей проверки.
Не смешивайте три величины: ширину места на странице в CSS-пикселях, размеры выбранного файла в пикселях и число загруженных байтов. Картинка шириной 360 CSS-пикселей не обязательно загружается из файла шириной 360 пикселей. Слово «small» в имени файла ничего не доказывает.
2. Рассчитайте начальную ширину файла
Для первой проверки чёткости умножьте ширину изображения на странице на плотность пикселей устройства — DPR. При ширине 360 CSS-пикселей и DPR 1 получаем 360 пикселей исходного файла, при DPR 2 — 720, при DPR 3 — 1080. Учитывайте доступные варианты, выбор браузера и видимое качество: формула не гарантирует выбор конкретного файла.
Допустим, фотография мастерской занимает карточку шириной 360 пикселей, а редактор загрузил файл 2400 × 1600. Для проверки при DPR 2 экспортируйте вариант 720 × 480. В первом файле 3 840 000 пикселей, во втором — 345 600. Пикселей примерно в 11,1 раза меньше; это не обещание такого же уменьшения числа байтов или времени загрузки.
Сравните вариант в том размере, в котором его увидит читатель. Сохранились ли нужные детали? Если исходник уже размыт, увеличение размеров не вернёт утраченную информацию. Сохраните оригинал для следующего экспорта.
3. Проверенная ловушка: верный CSS и неверный sizes
В srcset с обозначениями ширины каждое значение с «w» сообщает реальную ширину соответствующего файла в пикселях. Атрибут sizes задаёт ожидаемую ширину показа для выбора файла; видимый размер по-прежнему задаёт CSS. Проверяйте итоговый HTML, даже если его создала CMS.
21 октября 2026 года Coru проверил локальную страницу с тремя собственными тестовыми PNG шириной 360, 720 и 1440 пикселей. Ширина окна браузера составляла 1200 CSS-пикселей, а CSS удерживал ширину картинки на 360. Каждый вариант открывался в новом профиле Chromium с отключённым браузерным кешем.
При sizes="360px" и DPR 1 Chromium загрузил файл шириной 360 пикселей. С тем же sizes при DPR 2 — файл 720 пикселей. При sizes="100vw" и DPR 1 — файл 1440 пикселей, хотя на странице картинка всё ещё занимала 360.
Последняя подсказка описывала всё окно, а не карточку. Приведите sizes в соответствие с реальным макетом. Значение 360px годится только для действительно постоянной ширины; гибкому макету нужны условия с учётом его ширин и отступов. Опыт выполнен в Chrome 155.0.8059.12 и подтверждает три выбора в этих условиях, а не поведение всех браузеров или выигрыш в скорости.
4. Проверьте опубликованную страницу в браузере
В Chrome откройте DevTools → Network, включите Disable cache, задайте проверяемые ширину окна и DPR, затем перезагрузите страницу. Отфильтруйте изображения. Выберите запрос нужной картинки и запишите URL и переданный объём. Ответ из кеша памяти или диска не показывает размер новой загрузки.
В Elements выберите изображение и проверьте его размер на странице, srcset и sizes. Сопоставьте сетевой запрос с реально выбранным файлом: нельзя считать, что браузер взял резервный src. Отдельно выясните размеры этого файла в пикселях. Повторите проверку при более широком окне и другом DPR, каждый раз перезагружая страницу.
Сравнивая результат до и после, сохраняйте браузер, ширину окна, DPR, режим кеша и условия сети. Если сервис изображений или service worker выдаёт другой вариант, отметьте это. Меньшая загрузка — полезное наблюдение об одной картинке; сама по себе она не доказывает ускорение всей страницы.
5. Выберите исправление по наблюдению
- Выбран слишком большой файл: проверьте варианты srcset и соответствие sizes реальному месту на странице, прежде чем снова сжимать оригинал.
- Размеры подходят, байтов много: сравните другой экспорт или формат при тех же размерах и приемлемом качестве. Измеряйте полученный файл; универсального лимита в КБ для всех фотографий и скриншотов нет.
- Видно размытие: сравните выбранный файл с расчётом «ширина × DPR», затем проверьте качество исходника и сжатие. Телефону иногда нужно больше пикселей, чем более широкой карточке на компьютере.
- Текст сдвигается при загрузке: укажите правильные атрибуты width и height для резервирования пропорций и адаптивный CSS, например max-width: 100% и height: auto. Это не требует жёстко фиксировать размер изображения на странице.
- Важная картинка первого экрана появляется поздно: проверьте, не включена ли для неё ленивая загрузка. Она полезна для изображений ниже по странице, но не уменьшает их файлы.
6. Карточка диагностики одной картинки
- Страница и назначение картинки: ___. Конкретный видимый недостаток: ___.
- Условия: браузер/версия ___; ширина окна ___; DPR ___; кеш ___; соединение ___.
- Ширина на странице ___ CSS-пикселей × DPR ___ = начальная ширина файла ___ пикселей.
- URL выбранного файла ___; реальные размеры ___; передано байтов ___; srcset/sizes ___.
- Одно изменение ___; после перезагрузки выбран файл ___, передано байтов ___.
- Качество в нужном размере ___; стабильность макета ___; оставшаяся проблема ___.
Когда можно остановиться
Сохраните изменение, если нужные детали видны, выбранный файл соответствует проверенным условиям показа, а первоначальная проблема уменьшилась без появления новой. Перед заменой общего файла проверьте другие страницы, где он используется. Сохраните исходные измерения для будущего сравнения.
Если разобраться не удалось, укажите в форме обратной связи URL страницы, ширину окна, DPR и наблюдаемый недостаток. Это полезнее сообщения «картинки медленные». Не присылайте адреса закрытых страниц и данные аккаунтов.