При нахождении на сайте Вы соглашаетесь с политикой обработки персональных данных.
Всё понятно!
GIF: Graphic Interchange Format
GIF (Graphic Interchange Format) — формат графических файлов, которые могут содержать несколько изображений и показываться как анимация; формат поддерживает прозрачность и палитру до 256 цветов.
Кратко
- Палитра GIF ограничена 256 цветами, прозрачность только полная или нулевая, а анимация состоит из кадров с задержкой между ними.
- Анимированный файл может быть очень тяжёлым: в примере web.dev одна анимация весила 3,7 МБ в GIF и 551 КБ в MP4.
- Google Search поддерживает GIF на странице, а главным атрибутом для описания картинки называет alt-текст.
- Для простых статичных картинок MDN советует PNG, а для анимации предлагает рассмотреть WebP, AVIF или APNG.
Кому и зачем это знать
С запросом «GIF» приходят люди с разными задачами. Найдите свою ситуацию.
Владелец сайта или интернет-магазинаСитуация: Страница с анимацией на первом экране загружается долго, а подрядчик говорит: «Это из-за гифки».Зачем: Анимированный файл часто оказывается самым тяжёлым элементом страницы: Google отмечает, что изображения часто дают основной вес страницы.Что сделать: Попросите подрядчика назвать размер файла в мегабайтах и показать, чем его можно заменить. Если анимация короткая и нужна на первом экране, спросите про видео без звука или формат WebP. Решайте по размеру и пользе: красивая анимация, которую ждут несколько секунд, лучше не делает.
Маркетолог, SMM-специалистСитуация: Нужно оживить пост, рассылку или баннер короткой анимацией.Зачем: GIF открывается везде, где поддержан формат, и не требует плеера. Но 256 цветов и тяжёлый вес ограничивают выбор: фотографии в GIF выглядят хуже.Что сделать: Берите GIF для простой графики с небольшим числом цветов: схема действий, анимированная стрелка, короткая демонстрация кнопки. Для роликов с фотографиями и градиентами проверьте видео или WebP. Перед отправкой откройте файл на телефоне и посмотрите его вес.
Контент-менеджер, редакторСитуация: Вы добавляете анимацию в статью и не знаете, как её подписать и назвать.Зачем: Для поиска картинка описывается через alt-текст и имя файла. Без них поисковая система знает о картинке меньше.Что сделать: Дайте файлу короткое осмысленное имя (например, shema-oformleniya-zakaza.gif вместо IMG00023.gif), добавьте alt-текст по смыслу без набора ключевых слов. Если нужно сделать анимацию из видео, есть отдельная статья по этому вопросу (ссылка в конце).
Разработчик, верстальщикСитуация: Нужно заменить тяжёлую анимацию на странице, не потеряв внешний вид.Зачем: web.dev описывает замену GIF на элемент video, а MDN перечисляет форматы изображений с анимацией.Что сделать: Для видео по схеме web.dev используйте атрибуты autoplay, loop, muted и playsinline и два источника, WebM перед MP4: браузер берёт первый поддерживаемый. Для картинки в img проверьте WebP, AVIF или APNG и поддержку в нужных браузерах.
Новичок, студентСитуация: Встретили GIF в задании или обсуждении и не понимаете, чем он отличается от JPEG и PNG.Зачем: GIF отличается палитрой, прозрачностью и анимацией, а не «качеством» вообще.Что сделать: Запомните три свойства: до 256 цветов, прозрачность по принципу «есть или нет», анимация из кадров. Остальное разберите в таблице сравнения ниже.
Как устроен GIF: палитра, прозрачность, анимация
В файле GIF каждый пиксель хранит не цвет, а номер цвета в палитре, поэтому цветов не больше 256, а анимация складывается из кадров, между которыми задана пауза.
| Свойство | Как устроено | Что это значит для сайта |
|---|---|---|
| Палитра | каждый пиксель указывает на запись палитры из 24-битных цветов; записей не больше 256 | фотографии и градиенты выглядят хуже, чем в форматах с полным цветом |
| Прозрачность | один номер цвета объявляется прозрачным, пиксели этого цвета не закрашиваются | полупрозрачности нет, только «закрашено» или «прозрачно» |
| Анимация | в файле может быть любое число изображений; пауза между ними задаётся в сотых долях секунды | число кадров влияет на размер файла |
| Версии | в заголовке стоят 87a (1987) или 89a (1989); анимация и управление кадрами входят в расширения 89a | на практике встречается GIF89a |
| Сжатие | данные пикселей сжимаются алгоритмом LZW | в спецификации описан как вариация алгоритма Лемпеля — Зива |
Спецификация GIF89a сама оговаривает, что формат не предназначен как платформа для анимации, хотя в ограниченном виде её делать можно.
Где используют GIF в маркетинге и на сайтах
MDN называет GIF хорошим выбором для простых изображений и анимаций; в маркетинге он встречается там, где нужна короткая зацикленная картинка без плеера.
- Инструкции и демонстрации. Короткая анимация показывает порядок действий: куда нажать, как оформить заказ. Если шагов много, лучше видео или серия статичных картинок.
- Баннеры и рекламные материалы. В анимированном баннере меняются кадры с оффером и кнопкой. Требования к формату и весу задаёт площадка, где размещается реклама: проверяйте их в её правилах.
- Публикации и переписка. Короткая реакция или иллюстрация к посту. Здесь важен вес файла, особенно при просмотре с телефона.
Эффект GIF на открываемость писем или вовлечённость мы не называем: в проверенных источниках для этой страницы цифр нет.
GIF и скорость загрузки страницы: чем заменить тяжёлую анимацию
Анимированный GIF часто тяжелее видео с тем же содержанием: web.dev показывает на примере анимацию, которая весила 3,7 МБ в GIF, 551 КБ в MP4 и 341 КБ в WebM. Это один пример, а не правило для любого файла.
| Задача | Что выбрать | Основание |
|---|---|---|
| Простая статичная картинка с небольшим числом цветов | PNG | MDN: для статичных индексированных изображений в современном содержимом советует PNG |
| Короткая анимация в теге img | WebP, AVIF или APNG | MDN предлагает рассмотреть их для анимации |
| Анимация вместо GIF, встроенная как видео | элемент video с WebM и MP4 | web.dev: атрибуты autoplay, loop, muted, playsinline; WebM перед MP4, так как браузер берёт первый подходящий источник |
| Фотографии и полноцветные изображения | не GIF | MDN: преобразование полноцветных изображений в GIF даёт неудовлетворительное растрирование |
Проверяйте вес так: откройте страницу в инструментах разработчика браузера, найдите файл анимации и посмотрите его размер. Google также советует проверять скорость сайта в PageSpeed Insights, потому что изображения часто дают большую часть веса страницы.
GIF и SEO: что требует Google для картинок
Google Search поддерживает GIF среди форматов изображений, которые указаны в теге img, а для описания картинки главным называет alt-текст.
- Формат. Google перечисляет BMP, GIF, JPEG, PNG, WebP, SVG и AVIF; расширение файла должно соответствовать его типу.
- Alt-текст. Он нужен, чтобы описать содержимое картинки. Не набивайте его ключевыми словами. Если картинка служит ссылкой, alt-текст работает как текст ссылки.
- Имя файла. Короткое и описательное: my-new-black-kitten.jpg лучше, чем IMG00023.JPG (пример из рекомендаций Google).
- Карта изображений. Image sitemap помогает Google найти картинки, которые он мог не обнаружить.
GIF, PNG, JPEG и WebP: чем отличаются
| Формат | Для чего подходит | Ограничение |
|---|---|---|
| GIF | простые картинки и короткие анимации | до 256 цветов, только полная прозрачность, большой вес анимации |
| PNG | статичные изображения; вариант APNG для анимации без потерь (MDN) | анимация требует отдельного формата APNG |
| JPEG | фотографии и полноцветные изображения | не хранит анимацию |
| WebP, AVIF | анимированные и статичные изображения (MDN предлагает рассмотреть их для анимации) | проверьте поддержку в браузерах вашей аудитории |
По оценке MDN, PNG, JPEG и GIF уступают по сжатию более новым форматам WebP и AVIF.
Что делать с GIF на сайте
| Что видите | Что сделать |
|---|---|
| Файл весит несколько мегабайт | Сравните с видео WebM/MP4 и форматом WebP или AVIF; оставьте тот, что весит меньше при приемлемом виде |
| Анимация стоит на первом экране | Проверьте её вес и скорость загрузки страницы; без необходимости перенесите ниже или замените статичной картинкой |
| У картинки нет описания | Добавьте alt-текст по смыслу и осмысленное имя файла |
| Нужна простая картинка с прозрачностью | Рассмотрите PNG: он рекомендован MDN для статичных индексированных изображений |
| Нужно сделать гифку из видео | Используйте инструкцию из блока «Читайте дальше», затем проверьте вес результата |
Типичные ошибки
- Использовать GIF для фотографий: из-за палитры в 256 цветов получается неудовлетворительное растрирование.
- Ставить тяжёлую анимацию на первый экран, не проверив размер файла.
- Оставлять файлу имя вроде IMG00023.gif и пустой alt-текст.
- Ждать от GIF полупрозрачности: пиксель либо прозрачен, либо нет.
- Считать анимацию в GIF главным способом удержать читателя: сначала проверьте, что она помогает понять материал.
Частые вопросы
Что такое GIF простыми словами?
Формат изображений, в одном файле которого может храниться несколько кадров, поэтому он показывается как короткая зацикленная анимация. Цветов в нём не больше 256.
Сколько цветов поддерживает GIF?
До 256. По описанию MDN, каждый пиксель хранит номер цвета из палитры, а длина палитры не превышает 256 записей.
Поддерживает ли GIF прозрачность?
Да, но только полную: один номер цвета объявляется прозрачным, и такие пиксели не закрашиваются. Плавных полупрозрачных переходов нет.
Почему GIF такой тяжёлый?
Анимация хранит много кадров, а спецификация GIF сама оговаривает, что формат не предназначен как платформа для анимации. В примере web.dev одна анимация весила 3,7 МБ в GIF, 551 КБ в MP4 и 341 КБ в WebM.
Чем заменить GIF на сайте?
Для анимации web.dev предлагает элемент video с форматами WebM и MP4, MDN советует рассмотреть WebP, AVIF или APNG. Для статичных картинок MDN рекомендует PNG.
Индексирует ли Google GIF?
В документации Google Search формат GIF указан среди поддерживаемых для изображений в теге img. Чтобы картинку поняли, добавляйте alt-текст и понятное имя файла.
Как сделать гифку из видео?
Есть два способа для новичков, они описаны в отдельной статье на нашем сайте (ссылка в блоке «Читайте дальше»).
Связанные термины
- JPEG: Joint Photographic Expert Group: формат для фотографий и полноцветных изображений, без анимации в одном файле
- Banners: рекламный носитель, в котором графика может быть статичной или анимированной
- Alt теги: текстовое описание картинки, которое нужно и для GIF
- Вес сайта: общий размер страницы, в который тяжёлая анимация вносит заметный вклад