Руководства

Изображения для быстрого сайта: размер, формат и хорошие практики

Изображения нередко составляют больше половины веса веб-страницы. Если их не подготовить, сайт загружается медленно, посетители уходят, а поисковые системы это замечают. Хорошая новость: оптимизация изображений — одно из самых простых улучшений с наибольшим эффектом. В этом руководстве собран практический рецепт.

Почему изображения важны для скорости

Страница с десятью фотографиями по 4 МБ заставляет посетителя скачивать 40 МБ — это очень медленно на телефоне с мобильным интернетом. Долгая загрузка увеличивает число отказов и портит впечатление. Поисковые системы считают скорость фактором качества, особенно на мобильных устройствах.

Чтобы уменьшить вес изображений, технических знаний не нужно: достаточно последовательно применять несколько простых критериев.

Размеры: не загружайте больше пикселей, чем отображается

Самая частая причина тяжёлых изображений — загрузка фото точно в том виде, в каком оно вышло из камеры. Если на вашей странице изображение показывается шириной 800 пикселей, загрузка снимка в 4000 ничего не улучшает визуально, а вес увеличивает многократно. Определите максимальную ширину, которую изображение займёт на экране, и загрузите версию такой ширины или вдвое больше, если нужна чёткость на экранах высокой плотности.

Ориентировочные значения: главное изображение вверху страницы — 1600–1920 пикселей; изображения в статьях — 1000–1200; миниатюры товаров — 400–600; значки — минимально необходимый размер.

Целевой вес по типу изображения

В качестве разумной цели главное изображение должно весить менее 200–300 КБ, изображения в содержимом — 60–150 КБ, а миниатюры — менее 40 КБ. Это не строгие границы, а ориентиры, позволяющие удерживать общий вес страницы в разумных пределах, в идеале менее 1–2 МБ.

Используйте инструмент сжатия изображений или инструмент точного размера, чтобы приблизиться к этим значениям, следя за тем, чтобы качество оставалось хорошим.

Правильный формат

Выбирайте WebP или JPG для фотографий, PNG или WebP для графики с прозрачностью и SVG для логотипов и векторных значков, которые чётко выглядят при любом размере и весят очень мало. Избегайте тяжёлых анимированных GIF: короткое видео в современном формате обычно намного легче.

Давайте каждому изображению описательное имя строчными буквами через дефис, например «sinie-krossovki.webp», а не «IMG_2043.jpg».

Отложенная загрузка и альтернативный текст

Изображениям вне первого экрана не нужно загружаться при открытии страницы. Атрибут отложенной загрузки в браузере позволяет скачивать их только тогда, когда посетитель приближается к ним. Для главного изображения, которое видно сразу, отложенную загрузку не применяйте.

Всегда добавляйте альтернативный текст с описанием изображения. Он помогает людям, пользующимся программами чтения с экрана, отображается при сбое загрузки и даёт контекст поисковым системам.

Рецепт, с которого можно начать сегодня

Во-первых, измените размер изображений до ширины, которая реально будет использоваться. Во-вторых, преобразуйте их в WebP или JPG с качеством 75–85. В-третьих, проверьте, что каждое укладывается в целевой вес. В-четвёртых, дайте им понятные имена и добавьте альтернативный текст. В-пятых, проверьте страницу на телефоне с обычным соединением.

Делайте так каждый раз при публикации нового содержимого, а если на сайте уже много тяжёлых изображений, начните со страниц с самым большим трафиком.

Попробовать инструмент: Сжать изображение

Частые вопросы

Другие руководства