Как выбрать формат изображения

Автор: Кудинов Данила

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

JPG (Joint Photographic Experts Group)

Плюсы:

• Сжимается с потерями, что позволяет значительно уменьшить размер файла.
• Отлично подходит для фотографий и сложных изображений с градиентами.

Минусы:

• При сжатии теряется качество (особенно на высоких уровнях сжатия).
• Не поддерживает прозрачность.

PNG (Portable Network Graphics)

Плюсы:

• Поддержка прозрачности.
• Сжатие без потерь, что сохраняет высокое качество изображения.
• Хорошо подходит для логотипов, иконок, скриншотов и графики с текстом.

Минусы:

• Размер файлов больше, чем у JPEG, особенно для сложных изображений.

GIF (Graphics Interchange Format)

Плюсы:

• Поддержка анимации.
• Поддержка прозрачности.
• Поддерживает до 256 цветов, что подходит для простых изображений.

Минусы:

• Ограниченное количество цветов (256), что делает его неподходящим для сложных изображений и фотографий.
• Неэффективный для современных больших анимаций по сравнению с видео-форматами.

Для анимаций лучше использовать видеоформаты, качество будет выше, размер меньше.

WebP

Плюсы:

• Более эффективное сжатие по сравнению с JPEG и PNG.
• Поддерживает как прозрачность, так и анимацию.
• Уменьшает размер файла на 25-34% по сравнению с JPEG и PNG.

Минусы:

• Не поддерживается всеми старыми браузерами (например, старые версии Safari).
• Время рендеринга может быть немного больше.

Новые форматы

Форматы, за которыми стоит приматривать это JPEG XL, AVIF. Пока поддерживаются небольшим числом браузеров и их можно подключать с помощью тегов picture/source.

SVG (Scalable Vector Graphics)

Плюсы:

• Масштабируемый без потери качества.
• Легкий, так как это текстовый формат на основе XML.
• Поддерживает стилизацию с помощью CSS и анимации.
• Отлично подходит для логотипов, иконок, диаграмм.

Минусы:

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

Зачем нужна оптимизация изображений?

Оптимизация изображений — это секретный ингредиент, который помогает сайтам загружаться быстрее и работать лучше. В мире, где каждая секунда на вес золота, топовые компании соревнуются не только за внимание пользователей, но и за скорость работы своих веб-страниц.

Оптимизация изображений позволяет снизить «вес» картинок без потери качества, что ускоряет загрузку сайта. Скорость загрузки важна не только для удобства пользователя, но и для лучшего рейтинга в поисковых системах. Если хотите обогнать конкурентов, уделите внимание оптимизации!

Полезные ресурсы

• Kraken.io
• TinyJPG
• TinyPNG
• ImageRecycle
• GTmetrix

Как правильно вставлять SVG

SVG — это формат векторной графики. В отличие от растровой графики — PNG, GIF, JPEG — SVG может растягиваться и сжиматься без потери качества, то есть такие картинки будут одинаково четкими и на обычных экранах, и на ретине.

Варианты вставки SVG в HTML

1. Прямо в HTML-код:

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
  <circle cx="50" cy="50" r="40" />
  <circle cx="150" cy="50" r="4" />
  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" />
  </svg>
</svg>

2. Ссылка на внешний файл:

<img src="image.svg" alt="Пример SVG" />

Основные SVG теги

• <circle> — рисует окружность
• <rect> — рисует прямоугольник
• <polygon> — рисует многоугольник
• <use> — используется для повторного использования
• <ellipse> — рисует эллипс
• <line> — рисует линию
• <path> — рисует произвольные контуры

Если нужна более подробная информация, советую посетить следующие ресурсы:

• MDN: SVG Elements
• W3Schools: SVG Guide

Примеры SVG тегов:

• <circle> — базовая SVG фигура, используется для создания кругов c помощью координат центра и размера радиуса.

• <rect> — используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Можно применять для скругленных углов.

• <polyline> — создает прямые линии, соединяющие несколько точек. Используется для создания открытых фигур, так как последняя точка не обязательно должна быть соединена с первой.

• <ellipse> — рисует эллипсы на основе координат центра и их радиусов по x и y.

• <line> — создаёт линию, соединяющую две точки.

• <path> — универсальный элемент для рисования сложных форм.

• <use> — позволяет повторно использовать существующие элементы графики. Это помогает оптимизировать код и повторно использовать один и тот же элемент в разных местах, изменяя его позицию, размер и стили.