Главная > Секреты верстки сайтов > Чем отличается GIF от JPG. Разница между популярными графическими форматами

Чем отличается GIF от JPG. Разница между популярными графическими форматами

Для графики в интернете есть 2 основных требования: картинка должна быть максимально возможного качества и в тоже время она должна быстро загружаться. Когда интернет был дорогим и медленным, важнее была скорость загрузки фотографии, сейчас же более важно качество и отсутствие искажений на ней. Но, как и прежде, основными графическими форматами в интернете остаются GIF и JPG (JPEG).

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

Формат JPG (JPEG) лучше всего подходит для того, чтобы хранить фотографии, картины, яркие рисунки с плавным переходом одного цвета в другой (градиенты). Сохраняя информацию в формате JPEG, вы сами определяете, что вам важнее – четкость и достоверность графики или скорость, с которой ваши фотографии смогут отправляться по почте или загружаться с online-фотоальбомов и блогов.

Пример графики, которую нужно сохранять в JPG:

Фото нужно сохранять в jpg

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


Пример графики, которую желательно сохранять в формате GIF:

Рисунки лучше сохранять в gif

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

Рассмотрим на примере, чем отличается gif от jpg. Выберем рисунок и фотографию, сохраним каждый сначала в gif, потом в jpg форматах и посмотрим, как изменится качество изображения и вес картинки в Кб.

Начнем с фотографии. Ее нужно сохранять в JPG, а не в GIF, потому что на фотографиях цветов и оттенков гораздо больше, чем 256, которые способен отображать формат GIF. Увеличим фотографию в 3 раза и посмотрим, как отразится на фотографии сохранение в GIF и JPG:

Сохранить фото в gif

Сохранить фото в jpg

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

Теперь рассмотрим, что случится с рисунком, у которого мало цветов и нет градиентов, когда мы его сохраним в GIF и JPG:

Чем отличается GIF от JPG

Разница между форматами jpg и gif

Рисунок в формате GIF выглядит четко и без малейших разводов, при этом весит в 2,5 раза меньше.

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

Читайте также:

2 комментария к “Чем отличается GIF от JPG. Разница между популярными графическими форматами”

  1. kayzheka пишет:


    Спасибо за статью! 😀

  2. Овощ пишет:


    Любой сможет разобраться!

Прокомментируете вышенаписанное?

* обозначены обязательные для заполнения поля