Загрузка

PNG, JPG, SVG, GIF - что лучше?
Статьи / Растр и вектор графика 17.02.2021 2 483

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

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




Давайте разбираться и рассмотрим основные используемые форматы!

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


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



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


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


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

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

Рекомендуем использовать их в случаях с анимацией (загрузочного экрана, элементы на некоторых дополнительных страницах) или баннерах.


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


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

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


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

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


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


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



Основное преимущество в том, что формат максимально передает качество фотографии даже при сжатии и занимает мало место на сервере.


Лучше всего — для цифровых фотографий с плавным переходом цветов.


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


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

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


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

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


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


 

Формат PNG — один из популярнейших растровых форматов в сфере веб-дизайна.
Используется на множестве сайтов и в немалом количестве.



В основном используется для работы в интернете и в графических редакторах. Отлично подходит для создания иконок «Спрайт».

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

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

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


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

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


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

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


И нет, Вам не показалось SVG будет прекрасно выглядеть, как на телефоне в 4 дюйма 2012 года, так и на мониторах 1920x1080 и более, его качество не портится, ведь по факту SVG это не картинка, а XML код.

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


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

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


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

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


Вывод.


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

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

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

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

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

TWEB
Никнейм: TWEB
Всего постов: 12
Всего комментариев: 9

Статья была отредактирована TWEB.
Причина: Обновил заголовки
Привет! Тебе понравилась моя статья?
Надеюсь на твою оценку!
Нравится Не нравится Рейтинг: +3
Ой, чуть не забыл, ещё можно поделиться!

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


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

    1. {title}
      +1
      Помог комментарий? Поставь лайк!
      Никнейм: zizzao | 09.09.2021 в 00:00

      Ответить Цитата Спам

      довольно полезная статья , все расписано очень информативно, автор Большой молодец =)

      1. {title}
        +
        0
        Помог комментарий? Поставь лайк!
        Иван Цыганков
        Администрация
        Автор
        Никнейм: TWEB | 09.09.2021 в 01:11

        Ответить Цитата Спам

        Благодарю  blush

    2. {title}
      +3
      Помог комментарий? Поставь лайк!
      Артём
      Гость
      19.08.2021 в 16:24

      Ответить Цитата Спам

      Спасибо за классный материал!

      SVG топ, но его не везде можно всунуть, что на счёт WebP?

      1. {title}
        +
        +2
        Помог комментарий? Поставь лайк!
        Иван Цыганков
        Администрация
        Автор
        Никнейм: TWEB | 19.08.2021 в 16:36

        Ответить Цитата Спам

        Приветствую, Артём!  blush

        WebP на данный момент не поддерживается, например в Safari.

        Это означает, что пользователи Mac, iPhone - картинки не увидят.

        Точно также не поддерживает IE и ранние версии Edge / Firefox (до 18 года).


        По факту IE уже перестали обновлять, а полная поддержка в 2022 прекратится, а Edge / FireFox юзеры почти все используют актуальные версии. На счёт Safari в iOs 14.7 и Выше, а также на версиях MacOS её обновили, релиз в сентябре, так что примерно за год все перейдут на новые форматы, но останутся и старые пользователи.


        Вердикт: Можно использовать WebP, но чтобы сделать это максимально безболезненно, то полный переход на WeBP лучше осуществлять с 2022 года.


        TYPEWEB будет переходить на WebP после релиза новой Safari - в сентябре.

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

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