На странице фотография самоката занимает 700 пикселей, а браузер скачивает исходник шириной 4000 пикселей. Уменьшение картинки на экране не уменьшает загружаемый файл. Чтобы страница открывалась быстрее, сначала выясните, какое изображение получает посетитель, а не только как оно выглядит в статье.
Сначала найдите тяжёлые изображения
Не нужно сразу переделывать всю медиатеку. Откройте страницу с несколькими фотографиями и загляните во вкладку Network в инструментах разработчика браузера. Там видны размер переданных файлов и время загрузки. Для предварительной проверки пригодится и описание возможностей Lighthouse: инструмент оценивает страницу и указывает в том числе на проблемы с изображениями.
Не ограничивайтесь самым большим файлом. Десять иллюстраций по 300 КБ вместе весят больше, чем одна фотография на 500 КБ. Важно и расположение: снимок, который виден сразу после открытия страницы, стоит отличать от фотографий далеко внизу. Для нескольких характерных страниц запишите, какие изображения весят больше всего, какой ширины они показаны и попадают ли на первый экран.
Подберите размеры под место на странице
Исходник высокого разрешения лучше сохранить отдельно — он может пригодиться для другой вёрстки или печати. В статью же стоит вставлять подготовленную копию. Если фотография занимает около 700 пикселей по ширине, версия в 1400 пикселей обычно оставляет запас для экрана с высокой плотностью пикселей. Файл шириной 4000 пикселей для этого чаще всего не нужен. Размер выбирайте по макету: полноширинная обложка и небольшое фото в тексте требуют разных версий.
На адаптивном сайте может понадобиться несколько размеров одной фотографии. Атрибуты srcset и sizes сообщают браузеру, какие файлы доступны и сколько места картинка занимает при разной ширине окна. Так телефону не приходится скачивать версию для широкого монитора. Подробнее об этом — в описанием адаптивного веб-дизайна.
Выберите формат по содержимому
Формат влияет и на вес файла, и на вид деталей. Для фотографий подойдут JPEG, WebP или AVIF — если сайт корректно выдаёт выбранный формат. Схемы и простые рисунки иногда лучше сохранять в PNG или SVG. Универсального варианта нет: сравните готовые файлы.
- JPEG широко поддерживается и удобен для фотографий. При сильном сжатии страдают мелкие детали, например фактура колеса или надписи.
- WebP часто позволяет получить файл меньшего размера при сопоставимом внешнем виде. Подходит для фотографий и некоторых рисунков.
- AVIF может сжимать фотографии ещё эффективнее. Если обработка настроена автоматически, проверьте, поддерживают ли формат ваши инструменты и как выглядит готовый файл.
- PNG сохраняет чёткие границы и прозрачность, но фотография в этом формате нередко получается слишком тяжёлой.
- SVG подходит для простой векторной графики, например значков, но не для сложных фотографий.
После экспорта откройте картинку в том размере, в котором её увидит читатель. Сравнивая варианты, присмотритесь к краям предметов, тексту и однотонным участкам: там хорошо заметны следы сжатия. Гнаться за минимальным числом килобайт не стоит. Если родители рассматривают на фото детали самоката, они должны оставаться различимыми.
Что делать с уже загруженными файлами
Если медиатека большая, настройте создание уменьшенных версий для новых загрузок, а старые файлы обработайте отдельно. Сначала сделайте резервную копию. Прежде чем запускать массовую замену, проверьте несколько страниц: миниатюры, фотографии внутри статей, заставки и изображения с прозрачным фоном. Так вы заметите неудачную обрезку или потерю качества до того, как они появятся по всему сайту.
Не загружайте всё одновременно
Фотографии далеко внизу страницы не нужны сразу после её открытия. Отложенная загрузка позволяет запросить их ближе к появлению на экране. Для обычного элемента img часто хватает атрибута loading="lazy"; некоторые системы управления сайтом добавляют его сами. Но включать отложенную загрузку для всех изображений подряд не стоит.
Крупную фотографию в начале статьи лучше загружать сразу, иначе над текстом может долго оставаться пустое место. Укажите в разметке ширину и высоту картинки: браузер заранее отведёт под неё пространство, и текст не сдвинется после загрузки. Проверьте результат на телефоне и при медленном соединении, а не только на рабочем компьютере.
Уберите лишний вес до публикации
Служебные данные в файле, неподходящий формат и слишком высокое качество при экспорте могут увеличить его размер без заметной пользы для читателя. Для новой фотографии удобно придерживаться такого порядка:
- Выберите кадр и обрежьте пустые края, сохранив детали, важные для понимания материала.
- Подготовьте копии для разных мест на сайте — например, для карточки материала и фотографии внутри статьи.
- Экспортируйте в подходящем формате с умеренным сжатием. Сравните результат с исходником в реальном размере показа.
- Проверьте, не отправляет ли страница исходный большой файл вместо подготовленной версии.
- Добавьте короткий осмысленный альтернативный текст с важным содержанием изображения. Он нужен для доступности страницы, а не для ускорения загрузки.
Переименование файла и альтернативный текст не уменьшают его вес. Если фотография занимает несколько мегабайт, одно лишь новое имя не ускорит загрузку. Плагин сжатия тоже не решит проблему, если браузер по-прежнему получает полноразмерный исходник.
Учитывайте оформление страницы
Тяжёлый файл может скрываться и в оформлении сайта: в большом фоне, баннере или декоративной текстуре. Если такой рисунок повторяется на каждой странице, его замена скажется на всём сайте. Для однотонного фона фотография не нужна, а небольшой узор иногда можно сделать средствами CSS. Если изображение важно для оформления, подготовьте версию для узкого экрана, чтобы телефон не загружал широкую обложку для монитора.
Проверьте и слайдеры. Когда посетителю сразу передаются все пять крупных кадров, хотя виден только первый, страница загружается дольше без пользы для него. Остальные кадры можно запрашивать по мере необходимости, но первый должен появляться без задержки.
Когда помогают кеширование и доставка файлов
Кеширование позволяет браузеру при следующем посещении использовать уже загруженное изображение. Это особенно заметно при переходах между страницами, если файлы меняются редко. Но настройки кеша должны учитывать обновления: после замены картинки по прежнему адресу посетитель ещё некоторое время может видеть старую версию. Системы управления сайтом часто решают это сменой имени файла или параметра версии.
Сеть доставки контента может ускорить выдачу изображений тем, кто находится далеко от основного сервера. Размеры и сжатие она, однако, не заменяет: многомегабайтные фотографии останутся тяжёлыми. Небольшому блогу разумнее сперва привести в порядок файлы и проверить результат, а потом решать, нужна ли более сложная инфраструктура.
Проверяйте результат на конкретной странице
Сравнивайте одну и ту же страницу в одинаковых условиях. С заполненным кешем повторное посещение может казаться быстрым, хотя новый читатель всё ещё ждёт загрузки больших файлов. Сначала откройте страницу с очищенным кешем, затем оцените повторную загрузку. Посмотрите её и при мобильном соединении: не размылись ли снимки, не пропали ли они, не сдвигается ли текст.
Начните с одной статьи, где есть несколько фотографий. Сохраните исходники, подготовьте копии под ширину колонки, замените файлы и снова откройте вкладку Network. Убедитесь, что вместо снимка шириной 4000 пикселей браузер получает подходящую версию. Если всё выглядит нормально и загружается как задумано, повторите тот же порядок для остальных материалов.
