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

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

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



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

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


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


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

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

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

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

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


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

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

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

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


 
Формат 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», преимущества и недостатки, описание.


SVG — это разметка масштабируемой векторной графикой, который является расширением XML языка. SVG обладает самым главным преимущество — в нём нет пикселей. Не в прямом смысле, разумеется, но его качество не портится, как бы Вы его не растягивали или какое разрешение у экрана бы не было.

И нет, Вам не показалось SVG будет прекрасно выглядеть, как на телефоне в 4 дюйма 2012 года, так и на мониторах 1920x1080 и более, его качество не портится, ведь по факту SVG это не картинка, а XML код.
Ещё, его можно редактировав в обычном редакторе. К примеру — Notepad++. Это позволяет не только редактировать его без графического редактора, но и возможность в любое время сменить стилистику (цвет) сайта вместе с логотипом, ведь SVG это по факту код и CSS стиль.

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

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

Вывод.

Если Вы действительно хотите следовать тренду и иметь красивый сайт — используйте SVG формат, как минимум для логотипа, это сделает его более приятным, красивым и подчеркнет серьезность проекта. Не пихайте его везде — это увеличит время загрузки Вашего сайта, а анимации SVG формата — могут не поддерживаться на старых ОС Android и старых браузерах на подобии IE, что сделает логотип «не рабочим».

JPEG формат используйте для основных изображений, в том числе для «пикч», пользователей. PNG подойдут для CSS Sprint-ов, а также для отображения цифровых изображений, например — вывода пейзажа в статье.

GIF — для вывода анимации на некоторых страницах сайта или веб-баннеров (рекламы, инструкций и так далее).

Удачи во всех начинаниях!  blush

Автор публикации: Иван Цыганков

+
Никнейм: TWEB
Всего постов: 10
Всего комментариев: 6

Материал был отредактирован: 9-04-2021.
TWEB указал причину: Дополнил информацию! Спасибо нашим пользователям за обратную связь.

Поделитесь страницей в соц.сетях или Вы можете оценить её.

+2

Похожие публикации


Предыдущая публикация

Комментарии (0)

Добавить комментарий