Содержание
Макет готов, адаптивы продуманы, и вы переходите к сборке. Но прежде чем вставлять изображения в HTML, их нужно подготовить. Необработанные картинки — одна из самых частых причин, почему страница загружается медленно, а анимации подтормаживают. В этой статье разберём, как оптимизировать растровую графику, чем заменить тяжёлые GIF-анимации и что стоит знать про SVG.
Форматы изображений
Начнём с того, в каком формате сохранять картинки. Выбор формата напрямую влияет на размер файла и, соответственно, на скорость загрузки.
JPEG — классический формат для фотографий и сложных изображений с плавными градиентами. Поддерживает сжатие с потерями, что позволяет уменьшить вес файла за счёт незначительной потери качества. Не поддерживает прозрачность.
PNG — формат для графики с чёткими краями, текстом и прозрачностью. Сжатие без потерь, поэтому файлы тяжелее, чем JPEG. Используйте PNG, когда нужен прозрачный фон или когда изображение содержит мелкий текст и чёткие линии, которые JPEG размоет.
WebP — современный формат от Google, который совмещает достоинства обоих предыдущих. Поддерживает сжатие с потерями и без, прозрачность и даже анимацию. При сопоставимом визуальном качестве файлы WebP весят на 25–35% меньше, чем JPEG или PNG. Поддерживается более чем 95% браузеров, так что в 2025 году его можно использовать без оглядки.
AVIF — самый новый формат, построенный на видеокодеке AV1. Сжимает ещё эффективнее, чем WebP, особенно фотографии. Поддержка чуть ниже (около 93% браузеров), но быстро растёт. Если вы хотите минимальный размер файлов, AVIF — лучший выбор для фотографического контента.
Правила оптимизации
Несколько конкретных рекомендаций, которые стоит применять к каждому изображению перед вставкой в плакат.
Сначала ресайз, потом сжатие. Если ваш плакат отображается на экране шириной 1440 пикселей, нет смысла вставлять фотографию шириной 4000 пикселей. Уменьшите изображение до нужного размера перед сжатием. Для Retina-экранов (2x) достаточно удвоенного размера: если картинка на макете занимает 600 пикселей, экспортируйте её шириной 1200 пикселей.
Качество сжатия JPEG/WebP: 75–85%. Это диапазон, в котором визуальная потеря качества почти незаметна, а размер файла уменьшается в два-три раза по сравнению со стопроцентным качеством. Ниже 70% начинают появляться артефакты, особенно на градиентах и мелких деталях.
Храните исходники отдельно. Всегда сохраняйте мастер-файл в максимальном качестве (TIFF или PNG без сжатия). Оптимизированные версии генерируйте из него. Повторное сжатие уже сжатого JPEG — верный способ получить кашу из артефактов.
Используйте <picture> для подстраховки. HTML-элемент <picture> позволяет указать несколько версий изображения, и браузер выберет ту, которую он поддерживает. Это способ использовать AVIF для современных браузеров и JPEG как запасной вариант.
Быстрая проверка: откройте DevTools в браузере (F12 → вкладка Network → фильтр Img) и посмотрите, сколько весят ваши изображения. Если одна картинка весит больше 500 КБ — это сигнал, что она не оптимизирована. Общий вес всех изображений на странице в идеале не должен превышать 2–3 МБ.
Правило, которое сэкономит вам часы отладки: если элемент несёт информацию (текст, заголовок, описание), он должен стоять в потоке документа (Flexbox или Grid). Если элемент декоративный (фоновая фигура, летающий объект, анимированная текстура), его можно позиционировать абсолютно. Смешивать эти роли — верный путь к тому, что на мобильном макет развалится.
Почему лучше без GIF
GIF — формат из 1987 года, и он до сих пор используется для анимированных картинок. Проблема в том, что он крайне неэффективен. GIF поддерживает только 256 цветов, не умеет сжимать видеопоследовательности и генерирует огромные файлы. Трёхсекундная GIF-анимация размером 400×400 пикселей может весить 2–5 МБ, что для одного элемента на странице совершенно избыточно.
Если вам нужна зацикленная анимация с фотографическим качеством, используйте видео. HTML-элемент <video> с атрибутами autoplay, loop, muted и playsinline ведёт себя визуально точно так же, как GIF, но весит в десять-двадцать раз меньше. Формат MP4 поддерживается всеми браузерами. Но для веб-плаката есть ещё более элегантное решение.
Но есть ещё более элегантное решение.
Спрайтовая CSS анимация
Если вам нужна покадровая анимация из нескольких рисованных кадров (например, персонаж моргает, объект трансформируется, иконка переключается между состояниями), вместо GIF можно использовать спрайтовый лист в связке с CSS-анимацией через steps().
Спрайтовый лист — это одно изображение, в котором все кадры анимации расположены в ряд. Разберём принцип на примере проекта Flying Toasters фронтенд-разработчика Брайана Брауна, который воссоздал классическую заставку After Dark из 90-х целиком на CSS.
Браун взял изображение тостера в четырёх фазах взмаха крыльев и склеил их в одну горизонтальную полоску размером 256×64 пикселя. Каждый кадр — 64×64.
Дальше в HTML создаётся простой div, а в CSS — контейнер размером одного кадра, который работает как окошко. Через это окошко виден только один фрагмент спрайтового листа:
.toaster {
position: absolute;
background: url('toaster-sprite.png');
width: 64px;
height: 64px;
}
@keyframes flap {
from { background-position: 0px; }
to { background-position: -256px; }
}
.animated {
animation: flap 0.4s steps(4) infinite alternate;
}
Разберём, что здесь происходит. Контейнер .toaster имеет размер одного кадра (64×64 пикселя) и показывает только один фрагмент спрайта. Анимация flap сдвигает background-position от нуля до минус 256 пикселей, то есть прокручивает всю полоску слева направо. А steps(4) — это то, что делает магию. Вместо плавного скольжения анимация разбивается ровно на 4 дискретных шага, по одному на каждый кадр. Браузер не интерполирует промежуточные состояния, а переключает позицию рывком, создавая эффект покадровой анимации. Значение alternate заставляет анимацию проигрываться в обратном порядке после каждого цикла, так что крылья тостера машут туда-сюда.
Результат визуально идентичен GIF, но файл весит в разы меньше, потому что это один статичный PNG с эффективным сжатием. К тому же вы полностью контролируете скорость воспроизведения через animation-duration, можете поставить анимацию на паузу через animation-play-state: paused и комбинировать покадровую анимацию с любыми другими CSS-трансформациями.
Спрайтовые анимации особенно хороши для иллюстративных элементов в веб-плакате. Мигающий глаз персонажа, вращающаяся шестерёнка, переключающиеся надписи — всё это можно реализовать через один PNG-файл и несколько строк CSS. А если спрайт сохранить в WebP, размер файла уменьшится ещё на треть. Принцип, который Браун использовал для летающих тостеров, применим к любому покадровому движению в вашем плакате.
SVG для вектора
SVG (Scalable Vector Graphics) — это формат векторной графики, который описывает изображение не пикселями, а математическими формулами. Линии, кривые, фигуры, текст — всё хранится как код, а не как растровая сетка. Это даёт два преимущества: файл обычно весит очень мало, и изображение не теряет качества при любом масштабе.
Для веб-плаката SVG полезен в нескольких случаях. Иконки и логотипы отлично ложатся в SVG, потому что остаются чёткими на любом экране. Простые иллюстрации из геометрических форм можно описать в SVG и анимировать прямо через CSS. Декоративные элементы вроде линий, кругов и многоугольников проще и легче создавать в SVG, чем экспортировать из Figma как PNG.
SVG — тема достаточно обширная, и мы подробно разберём её в отдельной статье. Как эскортировать из Figma, как встраивать в HTML, как анимировать отдельные элементы и какие есть ограничения. Пока достаточно запомнить простое правило: если изображение можно нарисовать кривыми (в Illustrator или Figma) — скорее всего, оно лучше подойдёт как SVG, а не как PNG.
Чеклист для подготовки
Перед тем как добавлять картинку в HTML, пройдитесь по нескольким пунктам.
- Нужный ли размер? Изображение не должно быть больше, чем его отображаемый размер на экране (с учётом 2x для Retina). — до 480 пикселей
- Нужный ли формат? Фотографии — WebP или AVIF. Графика с прозрачностью — WebP или PNG. Векторные элементы — SVG. Покадровая анимация — спрайт + CSS.
- Оптимизировано ли? Качество JPEG/WebP выставлено на 75–85%. Файл прогнан через оптимизатор (Squoosh, TinyPNG, ImageOptim).
- Не слишком ли тяжёлый? Одно изображение — не больше 200–500 КБ. Если больше — пересмотрите размер или качество сжатия.
