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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{banner_reklama}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод.

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

{banner_reklama2}