Разные типы изображений (jpeg, png и gif)

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

В HTML как правило используются 3 вида изображений, jpeg, png и gif.

Каждый из форматов, имеет определенные свойства, которые используются в зависимости от задачи, которую нужно реализовать.

Формат JPEG

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

Качество изображения, в формате JPEG при сохранении файла можно регулировать:

  • 0-4 низкое качество
  • 5-7 среднее качество
  • 8-9 высокое качество
  • 10-12 наилучшее качество

Когда использовать формат JPEG в WEB?

Чаше всего, формат JPEG используется для добавления в верстку статических изображений и фото, которые не имеют прозрачного фона, в отличии от PNG. Также формат  JPEG имеет возможность сжатия изображения, чтобы уменьшить размер файла и снизить нагрузку на страницу. Таким образом, сайт будет грузится быстрей и это очень важно, когда идет разговор об оптимизации и скорости загрузки страницы.

Сжатие изображения в формате JPEG всегда ведет к уменьшению качества картинки, но зачастую такие изменения не заметно глазу.

Таким образом, при помощи формата JPEG можно добиться маленького размера файла и приемлемого качества отображения картинки.

blog-post-brixtons-4-mini-1 Image Title 1
Пример обычного файла JPG с сжатым качеством картинки

Формат PNG

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

PNG был создан для замены формата GIF и стал очень удобен для использования в WEB. Самой главной особенностью, в этом формате, стала возможность поддержки прозрачного фона.

Когда использовать формат PNG?

PNG чаще всего используется для добавления маленьких изображений, в виде иконок или для логотипов. Редко используется PNG для добавления больших изображений в верстку, т.к. его размер очень велик, из-за того, что не идет потеря качества картинки.

Очень часто PNG  формат используется, когда нужно разместить картинку на фоне, которым может изменять свой цвет, чтобы не было видно прямоугольного фона самого файла PNG.

png_bg png_tr
PNG без прозрачности PNG с прозрачностью

Формат GIF

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

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

Когда использовать формат GIF?

Чаше всего, GIF используется на сайте, как замена анимации Flash или сложной анимации на JavaScript, CSS3. Это отличная альтернатива, если нужно разместить небольшой анимационный ролик, а специалиста сделать его на FlashJavaScript или CSS3 нет рядом или дорого стоит.

991337815 гифки-терминатор-Аватар-(фильм)-мортал-комбат-312805
Пример анимационной GIF-ки