Большинство популярных веб-браузеров поддерживают такие форматы: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG). Вот основные свойства графических форматов: 


  • Прозрачность — это свойство можно задать одному или нескольким цветам изображения. Реализуется это за счет дополнительного альфа-канала, сохраняемого в файле;
  • Сжатие — это свойство позволяет сделать размер изображения меньше;
  • Анимация – движение осуществляется с помощью серии последовательных снимков. Анимационные картинки не требуют плагина для браузера и могут работать практически на всех устройствах;
  • Прогрессивная загрузка – изображение загружается по частям.

GIF

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

Формат GIF поддерживает 256 цветов (8 бит), а также поддерживает прозрачность. Кроме того, можно создавать анимационную графику в формате GIF. Все браузеры могут отображать файлы GIF.

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

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

JPEG

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

В отличие от файлов GIF, сжатием JPEG файлов можно управлять. Размер JPEG файла напрямую зависит от уровня качества изображения. JPEG отображают все браузеры.

Преимущества JPEG:

  • При хорошем сжатии загрузка будет быстрой;
  • Отличное качество для фотографий и сложных рисунков;
  • Поддерживает 24-битный цвет.

PNG

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

К сожалению, большинство браузеров  или вообще не поддерживают PNG, или не поддерживают некоторые его возможности.

Преимущества PNG:

  • Преодолевает ограничения 8-битного цвета GIF;
  • Позволяет использовать текстовое описание изображения для поисковиков;
  • Поддерживает прозрачность;
  • Хорошее отображение диаграмм.

Немного слов о векторной графике:

Большое количество веб-графики это растровые изображения, которые состоят из сетки цветных пикселей. Рисунки и иллюстрации должны быть созданы в векторной графике, которые состоят из математического описания каждого элемента, который составляет линии формы и цвета изображения. Векторный рисунок создается в таких программах, как Adobe Illustrator и Corel Draw. Векторные рисунки должны быть преобразованы в GIF, JPEG или PNG формат при изотовлении сайта.

Какой формат следует использовать?

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

Так как PNG все больше поддерживается разными браузерами, он, вероятно, заменит GIF. Однако, GIF по-прежнему будет использоваться для создания анимации.