1. JPEG (или JPG)

JPEG – это один из двух наиболее популярных графических форматов, используемых в Интернет. Он предназначен для работы с фотографиями и другими изображениями, которые содержат в себе большое количество цветов и оттенков. Однако для работы с высококонтрастными картинками он не подходит. Данный формат обеспечивает переменное сжатие. При таком сжатии происходит незначительная потеря информации, например, потеря какого-нибудь цвета. Потери в цвете менее заметны, чем изменение яркости. Формат JPEG не поддерживает ни прозрачности, ни слоев.

2. GIF

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

GIF87a – ранняя версия формата GIF. Она не поддерживает ни анимацию, ни прозрачность
GIF89a – новая версия этого типа изображений. По сути это GIF87a с поддержкой анимации и прозрачности

3. PNG

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

4. Итог

Теперь выделим по пунктам случаи, когда надо использовать тот или иной формат:

1. JPEG:

Используйте его тогда, когда вам нужно использовать в изображении 24-битное качество (поддержка 16,7 миллионов цветов)
Когда вы публикуете фотографии

2. GIF:

Используйте GIF, когда вы можете ограничиться небольшим набором цветов и обыкновенной прозрачностью;
Когда вы используете анимацию
Когда в изображении используются большие поля с одинаковыми цветами или высококонтрастные изображения

3. PNG:

Если изображение содержит одновременно и большое количество цветов и прозрачность
Когда вам нужна наименьшая потеря цветовой гаммы

P.S. Честно говоря, на практике мне еще ни разу не приходилось использовать формат PNG.