Фото на сайте компании: WebP, AVIF, вес и описания alt

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

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

Почему именно фото чаще всего замедляют сайт

На большинстве сайтов небольших компаний самый тяжёлый элемент — это как раз изображения. Текст и код весят по несколько десятков килобайт, а одна фотография выполненной работы может весить несколько мегабайт. Поэтому, когда меня просят ускорить сайт, я начинаю с фотографий.

Пример из моей работы описан в кейсе о быстром сайте на телефоне: одним из результатов стало уменьшение веса страницы с 3 МБ до 0,5 МБ. Значительная часть этой разницы приходится как раз на исправленные изображения.

Шаг 1: выберите формат — JPEG, WebP или AVIF

Три формата, которые Вы встретите чаще всего:

Мой совет для обычного сайта: сохраняйте фото в WebP. Если сайт делает исполнитель, AVIF можно добавить как основной вариант, а WebP как запасной. Оба формата сегодня поддерживает большинство актуальных браузеров, но после внедрения стоит проверить это у себя.

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

Шаг 2: уменьшите размер в пикселях

Это самая частая ошибка: фото шириной 4000 пикселей, а на странице оно показывается в колонке шириной 600. Браузер загружает весь файл, а потом уменьшает его.

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

• фото на всю ширину страницы (например, вверху): около 1600–2000 px в ширину,
• фото в галерее или в колонке текста: около 800–1200 px,
• миниатюра в списке: около 400–600 px.

Это мои рабочие значения, а не норма Google. Подгоните их под свой проект: если Ваш сайт показывает фото в колонке 500 px, не загружайте 2000 px.

Шаг 3: задайте целевой вес файла

Google не устанавливает одного обязательного числа килобайт для фотографии. Поэтому Вам нужна собственная цель. Я ориентируюсь на такую:

• фото на всю ширину: до примерно 150–250 КБ,
• фото в галерее: до примерно 100–150 КБ,
• миниатюра: до примерно 50–100 КБ.

Это практические ориентиры, а не требование. Фото с большим количеством деталей (например, камень, ткань) может весить немного больше, а простой однородный фон меньше. Важно, чтобы вся страница быстро загружалась на телефоне, а убедиться в этом поможет тест (я описываю его ниже).

Шаг 4: конвертируйте фото в Squoosh

Squoosh — это бесплатный инструмент в браузере, для которого не нужна учётная запись. Работает он так:

1. Откройте сайт Squoosh и перетащите фото.
2. Справа выберите формат (WebP или AVIF).
3. В параметрах изменения размера введите нужную ширину в пикселях.
4. Передвиньте ползунок качества, например примерно на 75–80, и сравните превью слева и справа.
5. Когда результат выглядит хорошо, а файл имеет разумный вес, скачайте его.

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

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

Шаг 5: уменьшайте фото ещё в телефоне

Не ждите, пока фото попадёт на сайт. При отправке с телефона у Вас есть два простых пути:

• Уменьшите размер при отправке. Во многих приложениях (почта, мессенджеры) при прикреплении фото появляется выбор размера. Выберите средний вместо оригинала.
• Установите более низкое разрешение камеры для фото, которые не предназначены для печати, если Ваш телефон это позволяет.

Помните также, что iPhone по умолчанию сохраняет фото в формате HEIC, который браузеры обычно не показывают. При отправке исполнителю выберите вариант, который преобразует их в JPEG.

Шаг 6: добавьте width и height, а также ленивую загрузку

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

Атрибуты width и height сообщают браузеру, сколько места зарезервировать для фото до его загрузки. Без них страница «прыгает», когда появляются изображения, и трудно попасть по кнопке.

Ленивая загрузка (loading="lazy") указывает браузеру загружать фото только тогда, когда пользователь приближается к ним при прокрутке. Это экономит трафик на длинной странице.

<img
  src="taras-drewno-gizycko.webp"
  alt="Taras z desek kompozytowych przy domu jednorodzinnym w Giżycku"
  width="1200"
  height="800"
  loading="lazy"
/>

Есть одно важное исключение: главное фото, которое видно сразу после открытия страницы, не должно загружаться лениво. Оно должно загрузиться как можно быстрее, поэтому оставьте его без loading="lazy". Исполнитель может дополнительно отметить его как приоритетное (fetchpriority="high").

Если Вы хотите указать два формата, код выглядит так:

<picture>
  <source srcset="taras.avif" type="image/avif">
  <source srcset="taras.webp" type="image/webp">
  <img src="taras.jpg" alt="Taras z desek kompozytowych" width="1200" height="800" loading="lazy">
</picture>

Браузер выберет первый формат, который умеет прочитать.

Шаг 7: напишите описание alt

Описание alt служит двум целям. Программа экранного доступа зачитывает его незрячему или слабовидящему человеку. Поисковая система использует его, чтобы понять, что показывает фото. Поэтому пишите его прежде всего для человека.

Правила, которых я придерживаюсь:

• опишите то, что видно, коротко и конкретно (обычно одним предложением),
• добавьте важный контекст: что это за работа, где, из какого материала,
• не начинайте со слов «фото» или «изображение», потому что программа сама сообщит, что это графика,
• не набивайте ключевые фразы вроде «терраса Гижицко дёшево лучшая терраса»,
• декоративные изображения оставьте с пустым alt="".

Два примера:

В аудитах доступности отсутствие описаний alt — одна из самых частых ошибок, поэтому их стоит исправить, когда Вы наводите порядок на сайте. Подробнее о доступности я пишу в статье о доступности сайтов с 28 июня 2025 года.

Шаг 8: давайте файлам понятные имена

Имя файла — мелочь, но оно тоже помогает поисковой системе и упорядочивает материалы. Вместо IMG_4521.jpg или foto-final-novoe2.webp используйте описательное имя:

• строчные латинские буквы, без польских букв с диакритикой,
• слова, разделённые дефисами,
• коротко, 3–5 слов, например terrasa-kompozit-perila-mazury.webp.

Имя не заменяет описание alt, а дополняет его. Измените его до загрузки на сайт, потому что потом легко получить беспорядок.

Чего не делать

• Не загружайте оригиналы с телефона и не рассчитывайте, что сайт сам их уменьшит. Некоторые системы это делают, но не все.
• Не сжимайте слишком сильно. Размытое фото выполненной работы отпугивает сильнее, чем лишние 50 КБ.
• Не размещайте текст на фото (прайс-лист, номер телефона в виде картинки). Программа экранного доступа его не прочитает, а Google будет труднее его понять.
• Не используйте одно фото в трёх размерах, уменьшая его только стилями. Подготовьте отдельные файлы.
• Не оставляйте пустые описания alt у фотографий, которые несут содержание.

Как проверить результат

После изменений запустите бесплатный тест сайта. Примерно за 30 секунд он проверяет сайт в нескольких областях: скорость (измерение Google PageSpeed на телефоне), SEO, безопасность и доступность. Вы увидите, указываются ли изображения по-прежнему как проблема, а при отсутствии alt получите подсказку, что исправить.

Сравните результат до и после. Если оценка скорости заметно выросла, а страница не прыгает при загрузке, фото подготовлены хорошо.

Итог

Подготовка фото — это четыре вещи: формат WebP (или AVIF), размер, подобранный под место на странице, разумный вес файла и осмысленное описание alt с понятным именем файла. Остальное, то есть width, height и ленивая загрузка, — дело нескольких строк кода.

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