Статья
Оптимизация медиа сайта для скорости и Core Web Vitals
Изображения обычно составляют около 40 процентов общего веса веб-страницы, больше, чем любой другой тип ресурса, а видео добавляет значительно больше на страницах с большим количеством медиаконтента. Привести их в порядок это самое результативное, что вы можете сделать для скорости загрузки, оценок 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 это бесплатная (без лицензионных отчислений) альтернатива, которую поддерживает любой современный браузер. Видеоконвертер этого сайта кодирует WebM в VP8, который находится в том же классе сжатия, что и H.264: сама по себе смена контейнера не уменьшает файл, реальный выигрыш это полностью бесплатная цепочка кодеков и нативная поддержка альфа-канала. Практичный подход это сконвертировать один раз в WebM, отдавать его как предпочтительный источник в элементе video и держать MP4 запасным вариантом для старых браузеров. Преобразование идёт прямо в вашем браузере через FFmpeg, скомпилированный в WebAssembly: ничего не загружается, и файлы размером до 500 МБ конвертируются без очереди. Для встраиваемого фонового видео также присмотритесь к обрезчику видео, чтобы убрать пустые секунды перед кодированием: длительность это главный фактор размера файла.
Встроенные ресурсы: base64 и SVG
Очень маленькие изображения, иконки и фавиконки, встроенные прямо в HTML или CSS строками base64, убирают один сетевой запрос на каждый ресурс. Это имеет смысл для ресурсов примерно до 2 КБ, которые встречаются на каждой странице, например спрайт логотипа или индикатор загрузки. Более крупные ресурсы стоит оставить отдельными файлами, потому что base64 кодирует на 33 процента тяжелее двоичного формата, а браузеры кэшируют ссылки на файлы, но не встроенные данные по отдельности. Оптимизатор SVG убирает редакторский мусор из экспортированных SVG, не затрагивая визуальный результат. Конвертер изображения в base64 генерирует готовый к вставке data URI прямо в вашем браузере.
Правильный размер файла и приоритет загрузки
Два аспекта доставки файлов имеют не меньшее значение, чем сами файлы. Первый: адаптивный размер. При наличии атрибута srcset с дескрипторами ширины (image-400.webp 400w, image-800.webp 800w и так далее) браузер выбирает наименьший файл, который покрывает экран, умножая ширину в CSS на соотношение пикселей устройства (device pixel ratio) перед запросом. Телефон с макетом шириной 390px и экраном 3x нуждается примерно в 1170 пикселях, поэтому он загружает версию 1200w и пропускает оригинал для настольного компьютера. Второй аспект: приоритет. Браузеры используют предварительный сканер (preload scanner), который просматривает разметку наперёд и начинает загружать изображения до того, как основной парсер до них доберётся. Добавление fetchpriority="high" к наибольшему изображению в видимой части страницы (above-the-fold) указывает браузеру загрузить его первым, что обычно и определяет показатель Largest Contentful Paint.
Инструменты из этой статьи
- Сжать изображенияУменьшите размер файла изображения без загрузки. Ползунок качества или целевой размер в KB. Поддержка пакетной обработки.
- Изменить размер изображенийМеняйте размер и конвертируйте изображения (JPEG, PNG, WebP) без их загрузки.
- Оптимизатор SVGОптимизируйте и минифицируйте файлы SVG с помощью SVGO прямо в браузере. Без загрузки.
- Конвертер видеоКонвертируйте видео между MP4, WebM, MKV и MOV (H.264/VP8) прямо в браузере. Без загрузки на сервер.
- Изображение в Base64Конвертируйте изображения в data URI Base64 (и обратно) прямо в браузере. Копирование, CSS-фрагмент, без загрузки.
- Слайдер сравнения изображенийСравнивайте два изображения рядом или со слайдером (до/после). Без загрузки.
Частые вопросы
Влияет ли сжатие изображений на мои позиции в поиске?
Google использует Core Web Vitals как сигнал ранжирования, а Largest Contentful Paint почти всегда это изображение или постер видео. Страница, чьё главное изображение грузится менее чем за секунду, ранжируется лучше той, где это занимает три секунды. Сжатие и правильный формат напрямую влияют на эту метрику, так что да, оптимизация изображений даёт измеримый эффект для SEO. Эффект сильнее всего на мобильных, где соединения медленнее, а штраф за тяжёлые изображения больше.
Зачем обрабатывать медиа локально, а не через веб-сервис?
Большинство онлайн-инструментов для медиа требуют загрузить ваши файлы на удалённый сервер, что отнимает время, расходует трафик и означает, что копия вашего файла лежит на инфраструктуре, которую вы не контролируете. Инструменты на этом сайте работают целиком в вашем браузере: ваши изображения и видео обрабатываются на устройстве, а результат скачивается напрямую. Нет аккаунта, нет ожидания загрузки, и ничего из ваших файлов никогда не отправляется на сервер.