0

Формат графических файлов. Пять популярных форматов для сайта

format-graficheskix-fajlov-pyat-populyarnyx-formatov-dlya-sajta-minФорматы графических файлов отличаются друг от друга из-за способа предоставления графических данных, а также методах сжатия и поддерживаемых цветовых моделей. Данные изображения могут быть представлены с помощью карты пикселей в растровой графике или математических кривых в векторной графике. Познакомьтесь с наиболее популярными форматами графических файлов, обычно используемых на веб-сайтах, с их свойствами и сферой применения.

Растровый формат графических файлов

Формат GIF

Краткая информация:

Формат GIF (Graphics Interchange Format) был создан в 1987 году компанией CompuServe. Это формат предназначен для записи индексированных цветов графики. Каждый пиксель представлен одним из 256 цветов цветовой палитры. Запись данных в GIF предшествует сжатие без потерь по алгоритму LZW, позволяющий минимизировать размер файла. Этот формат сохраняет прозрачность изображений, но только в двух качествах (прозрачность или его отсутствие). Это позволяет создавать покадровую GIF анимацию.

Область применения GIF:

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

Формат PNG

Краткая информация:

Формат PNG (Portable Network Graphics), разработанный в 1995 году в качестве альтернативы формату GIF (из-за возникших патентных претензий, касающихся сжатия LZW). При сохранении использует сжатие без потерь, и это метод сжатия не обременен патентом. Формат файла PNG поддерживает 24-битные изображения и дифференцированную прозрачность, благодаря чему позволяет получить прозрачность и красивые края.

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

Формат PNG рекомендуется консорциумом W3C для сохранения графических изображений, размещаемых в Интернете. Не поддерживается старыми версиями некоторых браузеров, например, IЕ 6.

Область применения PNG:

Высококачественные иконки, логотипы и состояния кнопок с прозрачным фоном и прозрачных элементов изображения.

Формат JPEG

Краткая информация:

Формат JPEG (Joint Photographic Experts Group) используется сжатие с потерями, и предназначен в основном для записи статических, натуральных изображений — фотографий. Широкий диапазон цветов и плавные переходы полутонов характеризуют большинство файлов, полученных с помощью устройств, регистрирующих изображение. Такой тип изображения, если дополнительно не содержит слишком много мелких деталей и контрастность краев, может быть довольно сильно сжат с потерями, но без заметного ухудшения качества.

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

Область применения JPEG:

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

Векторный формат графических файлов

Формат SWF

Краткая информация:

Формат SWF — это закрытый векторной формат Shockwave Flash Object. Создан Macromedia (ныне Adobe) предназначенный для сохранения легкой векторной графики публикуемой в Интернете. Позволяет осуществлять запись любых геометрических фигур произвольных форм и типов заливки.

Популярность формата SWF вытекает из возможности создавать анимацию и интерактивные объекты. Для отображения в браузере, необходимо установить плагины (например Adobe Flash Player). Не поддерживается некоторыми мобильными устройствами. Примеры программ для создания и редактирования файлов с расширением SWF: Adobe Flash, SwishMAX.

Область применения SWF:

Сложные анимации и презентации, которые содержат интерактивные элементы.

Формат SVG

Краткая информация:

Формат SVG ( Scalable Vector Graphics) является открытым стандартом W3C для хранения статической и анимированной двумерной векторной графики. В формате SVG, так же, как в SWF, помимо стандартных и пользовательских геометрических объектов можно использовать маски прозрачности, градиентные заливки и т. д. Формат SVG не обременен лицензиями и создан для использования на веб-страницах, а также как независимый формат от системы векторной графики.

Не поддерживается некоторыми мобильными устройствами. Примеры программ для создания и редактирования (бесплатно): Inkscape, Sodipodi.

Область применение SVG:

Векторные статические и анимированные презентации.

Вывод:

При подготовке графики для размещения на веб-сайте необходимо:

  1. Использовать правильный формат для каждого конкретного типа изображения, благодаря чему будет применен соответствующий метод сжатия, а полученные файлы получат нужный компромисс между небольшим размером и хорошим качеством, ускоряя просмотр страницы;
  2. Использовать формат GIF вместо PNG для записи простых графических элементов, тем самым уменьшая вес файла при сохранении его качества;
  3. Лучше использовать формат JPEG вместо PNG для записи изображений с широким диапазоном тональности и цвета, таким образом файлы фотографий получат меньший вес;
  4. Использовать формат PNG для достижения специальных эффектов в хорошем качестве, как, например, наложение прозрачного логотипа на любой фон;
  5. Использовать формат GIF для размещения небольших и простых анимаций;
  6. Использовать векторные анимации форматов SWF и SVG только для элементов сайта, таких как интерактивные презентации, схемы и т. д., а в версии сайта для мобильных устройств, заменить их альтернативной графикой растровых форматов.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *