Какие форматы изображений поддерживает тег <img>?

Форматы изображений, поддерживаемые тегом <img>

Тег <img> поддерживает множество форматов изображений, каждый из которых имеет свои преимущества, недостатки и области применения. Выбор правильного формата критичен для оптимизации производительности веб-приложения.

Основные форматы

JPEG (Joint Photographic Experts Group)

<img src="photo.jpg" alt="Описание фото">
<img src="photo.jpeg" alt="Описание фото">

JPEG - один из самых распространенных форматов для фотографий и изображений с большим количеством цветов. Он использует сжатие с потерями (lossy compression), что позволяет значительно уменьшить размер файла при приемлемом качестве.

Плюсы:

• Хорошее сжатие для фото
• Широкая поддержка во всех браузерах
• Меньший размер файла

Минусы:

• Сжатие с потерями
• Не поддерживает прозрачность
• Артефакты при чрезмерном сжатии

PNG (Portable Network Graphics)

<img src="image.png" alt="Изображение">

PNG использует сжатие без потерь (lossless compression) и поддерживает прозрачность (альфа-канал). Идеален для графики, логотипов, иконок и изображений, где важна точность пикселей.

Плюсы:

• Сжатие без потерь
• Поддержка прозрачности (альфа-канал)
• Полная передача информации об изображении
• Поддержка анимации (APNG)

Минусы:

• Больший размер файла чем JPEG
• Медленнее чем другие форматы для простых изображений

GIF (Graphics Interchange Format)

<img src="animation.gif" alt="Анимированное изображение">

GIF - старый формат с поддержкой анимации. Использует сжатие без потерь, но ограничен 256 цветами палитры.

Плюсы:

• Поддержка анимации
• Хорошее сжатие для простых изображений
• Универсальная поддержка браузерами

Минусы:

• Ограничение на 256 цветов
• Большой размер для сложных изображений
• Низкое качество для фотографий

WebP

<img src="image.webp" alt="WebP изображение">
<!-- С fallback на JPEG -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Изображение">
</picture>

WebP - современный формат от Google с превосходным сжатием. Поддерживает как сжатие с потерями, так и без потерь, а также прозрачность и анимацию.

Плюсы:

• Лучшее сжатие чем JPEG и PNG
• Поддержка прозрачности и анимации
• Меньший размер файла на 25-35% чем JPEG

Минусы:

• Поддержка в старых браузерах (IE не поддерживает)
• Требует fallback для совместимости

SVG (Scalable Vector Graphics)

<img src="icon.svg" alt="Вектор">
<!-- Или встроенный SVG -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"/>
</svg>

SVG - векторный формат на основе XML. Масштабируется без потери качества и идеален для логотипов, иконок и простой графики.

Плюсы:

• Масштабируется без потери качества
• Можно редактировать через CSS и JavaScript
• Поддержка анимации
• Малый размер для простых графиков

Минусы:

• Не подходит для фотографий
• Сложнее для сложных изображений
• Требует парсинга XML

AVIF (AV1 Image File Format)

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Изображение">
</picture>

AVIF - новейший формат с еще лучшим сжатием чем WebP. Поддерживается современными браузерами.

Плюсы:

• Лучшее сжатие чем WebP на 20-30%
• Поддержка прозрачности
• HDR поддержка

Минусы:

• Новый формат, поддержка только в современных браузерах
• Требует fallback

Лучшая практика для современного веба

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img 
    src="image.jpg" 
    alt="Описание изображения"
    width="800"
    height="600"
  >
</picture>

Используй элемент <picture> для прогрессивного улучшения: сначала предлагай новые форматы (AVIF, WebP), затем fallback на проверенные JPEG/PNG.

Для разных типов контента:

• Фото и реалистичные изображения: JPEG или WebP
• Графика и иконки: PNG, SVG или WebP
• Анимированная графика: WebP вместо GIF, или MP4
• Масштабируемые иконки: SVG

Правильный выбор формата может сэкономить 50-70% от объема данных изображения, значительно улучшив производительность веб-приложения.