PNG, JPG, SVG, GIF - что лучше?

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


Давайте разбираться и рассмотрим основные используемые форматы!
На самом деле, количество форматов намного больше, чем описаны в статье, однако, именно PNG, JPG, SVG и GIF — в основном используют на веб-ресурсах.

Поэтому наш выбор пал на рассмотрение их преимуществ, а также, для каких целей подойдет лучше всего каждый из них.

Формат «GIF», преимущества, недостатки и описание.

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

Изображение в формате GIF хранится построчно, поддерживает лишь формат индексированной палитры цветов — т.е для 256 цветовой палитры.
Данный формат занимает не малое количество места, но поддерживает сжатие.
Рекомендуем использовать их в случаях с анимацией (загрузочного экрана, элементы на некоторых дополнительных страницах) или баннерах.
На главной странице сайта и в мобильных версиях, использование данного формата — не желательно.

Преимущества формата:

1. Небольшой размер файлов, особенно со сжатием;
2. Поддержка прозрачного фона изображения;
3. Формат, который может передавать анимации.

Недостатки формата:

1. Скорость загрузки. При низком Интернет-соединении, прогрузка анимации будет не такая, как была изначальна задумана, а «Урезана», а при большом количестве — скорость загрузки самой страницы — будет увеличена, что плохо скажется на скорости загрузки сайта , его показателей, поисковой выдачи и обратной связи пользователей, скорее всего — они просто покинут ресурс;
2. Невозможно отредактировать. Создали GIF и нет исходника? Всё. Это конечная станция работы с картинкой, либо делаете его вновь, либо избавляетесь от изображения;
3. Цветовая схема — всего 256 цветов.

Формат «JPEG», преимущества, недостатки и описание.

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

Преимущества формата:

1. Высокая и управляемая степень сжатия. Пользователь сам выбирает соотношение качество/размер файла, а также поддержка всеми устройствами;
2. Поддержка большого спектра цветов;
3. При умеренном сжатии — качество практически не теряется.

Недостатки формата:

1. Сильное сжатие превращает картинку в «мыло», из блоков 8х8. Так как алгоритм сжатия работает таким образом, что берет цвета соседних блоков. Плавные перехода пропадают, появляются «лесенки» и «ступеньки»;
2. Не совсем подходят для работы с текстами или монохромными графическими изображениями, у которых четкие границы.
3. Прозрачность не поддерживается;
4. Каждое сохранение картинки повторно, лишь ухудшает качество после сжатия. Сжатое изображение — нельзя восстановить до оригинала;
5. Анимации не поддерживаются.

---

Формат «PNG», преимущества и недостатки, описание.

 

В основном используется для работы в интернете и в графических редакторах. Отлично подходит для создания иконок «Спрайт».
Создаётся одно PNG изображение с прозрачностью, в него помещают несколько иконок и выводят их с помощью CSS, с помощью выставления параметров высоты положения этих иконок. Это позволяет не загружать сервер большим количеством изображений, а использовать всего одно.

Преимущества формата:

1. Сжатие без потери качества или с низкой потерей качества;
2. Поддержка прозрачного фона, очень даже плюс;
3. Цветовой диапазон формата шире, чем в GIF. Если мы говорили, что GIF работает с 256 цветами, то PNG-24 – работает уже с 16,7 млн. цветов. Ощутимо?
4. Правильная работа с полноцветными реалистичными изображениями, где много цветовых и контрастных переходов, лучше чем в JPEG;
5. Возможность создания и комбинирования слоёв;
6. Компактный размер изображений, хоть и уступающий JPG.

Недостатки формата:

1. Анимации не поддерживаются;
2. Затруднения при работе с полноцветными типами изображений.
3. Браузеры, как и Google PageSpeed «не любят» множество изображений с данным форматом, предпочитая ему JPEG / JPEG 2000.

---

Формат «SVG», преимущества и недостатки, описание.

1. Качество изображений самое лучшее из всех перечисленных форматов;
2. Возможность изменять без графических редакторов, редактировать в любой момент;
3. Не сильно влияет на скорость загрузки сайта, как ресурс (отдельная картинка). Главное не перебарщивать. Расскажем об этом в недостатках;
4. Четкая прорисовка деталей и лучший результат печати.

1. SVG рассчитывается математически — это значит, что формы и цвета всегда будут в порядке. Но растровые артефакты (т.е фотографические элементы) все равно не будут масштабируемыми, при этом будут занимать кучу места.
   Тем самым если Вам настолько важна загрузка сайта (а она важна) — не стоит напихивать его картинками с SVG форматом;
2. Не поддерживается старыми браузерами — Internet Explorer 8 и старше;
3. Работаете с WordPress? Печально, ведь он воспринимает .svg как вредоносный код, поэтому блокирует отображение. Обойти блокировку можно только с помощью плагинов.