JPG, GIF, PNG и SVG — какой формат для интернета лучше?

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

JPG
JPG, он же JPEG (Joint Photographic Experts Group) — это самый распространенный формат для хранения изображений и фотографий. Появился еще в начале 90-х годов и несмотря на происки конкурентов, до сих пор на коне. В JPG автоматически сохраняются фотографии, которые вы делаете с помощью камер телефонов (не говоря уже о классических фотоаппаратах).

Главный минус — формат использует сжатие с потерями. Чем чаще файл JPG сохраняется, тем хуже его качество — даже если вы используете максимальное качество для сохранения.
С другой стороны, чем выше сжатие, тем меньше места будет занимать файл, что очень было важно для интернета 2000-х годов. Сегодня интернет быстрый и безлимитный, но JPG по-прежнему востребован.

К настоящему времени разработано несколько стандартов, которые могли бы заменить собой JPG. JPEG2000, к примеру, обладает большей степенью сжатия (при одинаковом качестве вы получите файл меньшего размера). JPEG-LS позволяет сжимать без потерь. Google с 2010 года продвигает формат WebP (сжатие изображений с потерями и без).

GIF
GIF (Graphics Interchange Format — «формат для обмена изображениями») на несколько лет старше, чем JPG. Формат может отображать только 256 цветов, поэтому плохо подходит для фотографий, но идеален для логотипов, схем, рисунков с однотонными цветами. Используется алгоритм LZW — формат сжатия без потерь. Можно тысячу раз пересохранить GIF: качество не изменится.

Есть у формата два преимущества. Во-первых, фон можно делать прозрачным (JPG это не умеет), во-вторых, GIF поддерживает анимацию (смену статичных кадров). Наверняка вы слышали про термин «гифка». Да, это GIF. В этом у формата по-прежнему нет конкурентов.

PNG
PNG (Portable Network Graphics) — формат, который должен был заменить GIF. Первые версии формата появились еще в середине 90-х годов, но GIF удержался на плаву. Отличий несколько. Во-первых, в формате PNG можно хранить полноцветные изображения (фотографии). Во-вторых, степень сжатия выше, но по сравнению с GIF разница не очень большая (5-20%). Есть поддержка прозрачности, но нет поддержки анимации, так что GIF будет жить, пока живы анимированные картинки.

В PNG используется сжатие без потерь, поэтому такие изображения, как фотографии выгоднее хранить в JPG (если вам важен размер файла). Зато PNG можно использовать в качестве формата для хранения промежуточных версий, если вы планируете многократно редактировать исходный JPG-файл.

SVG
SVG (Scalable Vector Graphics — «масштабируемая векторная графика») — а это уже формат векторной графики. Все предыдущие форматы созданы для хранения растровой графики. SVG был специально создан для того, чтобы можно было в интернете публиковать двумерную векторную и векторно-растровую графику. Поддерживает анимацию, прозрачность, градиентную заливку. Легко масштабируется без потери качества (попробуйте для примера в несколько раз увеличить JPG).

В SVG не хранятся пиксели, из которых создается изображение, там хранятся команды, с помощью которых каждый раз создается векторное изображение. Например, в браузере. Текст идет отдельным слоем и его можно выделять. В SVG можно вставлять растровую графику (JPG, GIF, PNG) и ряд других объектов.
Впрочем, векторная графика в интернете сегодня не популярна, так что вряд ли вы будете часто встречаться с форматом SVG.

Так какой формат лучше для интернета?
Если вам нужно опубликовать фотографию, лучший вариант — JPG.
Если изображение состоит из большого числа однотонных участков — PNG.
Анимированная картинка — только GIF.
Векторное изображение — вас выручит SVG.