Статья

Оптимизация медиа сайта для скорости и Core Web Vitals

Изображения и видео обычно составляют от 60 до 80 процентов общего веса веб-страницы. Привести их в порядок это самое результативное, что вы можете сделать для скорости загрузки, оценок Core Web Vitals и позиций в поиске. Хорошая новость: для этого не нужны ни специальный софт, ни сервер, и вашим файлам никогда не приходится покидать устройство.

Сначала выберите правильный формат

Выбор формата важнее любого ползунка качества. Для фотографий на веб-странице WebP это правильный выбор по умолчанию: он на 25-35 процентов меньше JPEG при том же визуальном качестве, и его поддерживает каждый современный браузер. AVIF сжимает ещё сильнее, до 50 процентов лучше JPEG, ценой более медленного кодирования. Используйте AVIF для главных и товарных фото, которые сжимаются один раз; WebP для всего, что обрабатывается пакетами или нужно быстро. PNG уместен только там, где требуется точность без потерь или прозрачный фон. SVG это единственный разумный выбор для логотипов, иконок и иллюстраций: он масштабируется до любого размера и часто весит несколько килобайтов против сотен у растрового эквивалента.

Сжатие изображений без видимой потери качества

Начните с приведения размера к фактическим габаритам отображения: главному изображению, которое показывается шириной 1280 пикселей, не нужны 4000 пикселей данных. Сначала меняйте размер, потом сжимайте. Для фотографий качество 80 в WebP или JPEG это практичный порог, ниже которого обычные зрители начинают замечать разницу, поэтому держитесь в диапазоне 75-85 и смотрите результат при полном увеличении перед публикацией. Для графики с текстом и плоскими областями PNG без потерь или SVG сохраняют чёткость, которую форматы с потерями смазывают. Компрессор изображений на этом сайте работает со всеми этими форматами, запускается целиком в вашем браузере и применяет те же алгоритмы, что и специальные настольные программы.

Конвертация видео для веба без его загрузки

Фоновые петли и встроенное видео это то, где оптимизация веб-медиа часто проседает. MP4 с H.264 воспроизводится везде, но WebM с VP9 на 20-40 процентов меньше при том же качестве, что важно для мобильных пользователей на ограниченных соединениях. Практичный подход это сконвертировать один раз в WebM, отдавать его как предпочтительный источник в элементе video и держать MP4 запасным вариантом. Видеоконвертер здесь использует FFmpeg, скомпилированный в WebAssembly: преобразование идёт прямо в вашем браузере, ничего не загружается, и файлы любого размера работают, пока у устройства хватает памяти. Для встраиваемого фонового видео также присмотритесь к обрезчику видео, чтобы убрать пустые секунды перед кодированием: длительность это главный фактор размера файла.

Встроенные ресурсы: base64 и SVG

Очень маленькие изображения, иконки и фавиконки, встроенные прямо в HTML или CSS строками base64, убирают один сетевой запрос на каждый ресурс. Это имеет смысл для ресурсов примерно до 2 КБ, которые встречаются на каждой странице, например спрайт логотипа или индикатор загрузки. Более крупные ресурсы стоит оставить отдельными файлами, потому что base64 кодирует на 33 процента тяжелее двоичного формата, а браузеры кэшируют ссылки на файлы, но не встроенные данные по отдельности. Оптимизатор SVG убирает редакторский мусор из экспортированных SVG, не затрагивая визуальный результат. Конвертер изображения в base64 генерирует готовый к вставке data URI прямо в вашем браузере.

Инструменты из этой статьи

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

Влияет ли сжатие изображений на мои позиции в поиске?

Google использует Core Web Vitals как сигнал ранжирования, а Largest Contentful Paint почти всегда это изображение или постер видео. Страница, чьё главное изображение грузится менее чем за секунду, ранжируется лучше той, где это занимает три секунды. Сжатие и правильный формат напрямую влияют на эту метрику, так что да, оптимизация изображений даёт измеримый эффект для SEO. Эффект сильнее всего на мобильных, где соединения медленнее, а штраф за тяжёлые изображения больше.

Зачем обрабатывать медиа локально, а не через веб-сервис?

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