Главная > Секреты верстки сайтов > Растровые графические форматы для веб

Растровые графические форматы для веб

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

1. JPEG: фотографии и красочные рисунки

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

Качество изображения зависит от степени сжатия файла: чем больше ужат файл, тем хуже картинка, но зато меньше размер самого файла. Потому хранение фотографий в JPEG – это компромисс между качеством изображения и его размером. На сильно ужатом файле этого формата появляются размытые области, теряется контрастность. Качество картинки теряется с каждым новым сохранением файла в JPEG, потому хранить промежуточные результаты работы нужно в формате, который не влияет на качество изображения. Например, в PSD.

Изображения в формате JPEG, как и все остальные форматы для интернета, бесполезно архивировать – их размер не уменьшится, поскольку они уже являются архивом.


2. GIF: хранение контрастных рисунков + анимация

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

Формат GIF поддерживает прозрачность, но прозрачность только одной градации: нельзя сделать пиксель прозрачным на 20% или на 77%. Он может быть или прозрачным, или непрозрачным.

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

3. PNG: четкость изображения и частичная прозрачность

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

Изображения в PNG можно сохранять, используя или 8 бит (PNG-8) или 24 бита (PNG-24).

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

PNG-24, как и формат JPEG, позволяет сохранять насыщенную графику, градиенты, изображение не теряет яркости, оттенков и четкости. В нем можно хранить и фотографии, но в JPEG они обычно занимают меньше места. Формат PNG-24, как и форматы GIF и PNG-8, сохраняет четкость деталей в штриховой графике, логотипах и иллюстрациях с текстом. Кроме того, PNG-24 поддерживает альфа-прозрачность, т.е. прозрачность может быть частичной. К сожалению, этим важным свойством формата пока не получится воспользоваться – браузеры Internet Explorer младше 7й версии не поддерживают частичную прозрачность в PNG-24.

4. ICO: формат для иконок

Формат ICO Формат ICO специально разработан для хранения иконок – маленьких изображений с простой графикой. Формат ICO ужимает файл за счет потери цветов. Разводов, характерных для изображений в JPEG, нет. Иконки, сохраненные в формате ICO, Windows отображает сразу, дополнительная программа просмотра не нужна. Это свойство формата ICO активно используется в браузерах, интернет-пейджерах для отображения иконок возле адресной строки, в избранном, закладках и т.п.

Наиболее популярным применением формата ICO является изготовление иконок favicon.ico для сайтов и блогов. Для создания иконок и конвертации иконок в ICO из других форматов разработано множество специальных программ. Кроме того, можно обойтись только программой Adobe Photoshop, если установить специальный плагин для сохранения файлов в формате ICO. Без установки этого плагина Фотошоп не умеет сохранять файлы в ICO.

В раскрутке блога сегодня помогают:
Ультрасовременные 3d телевизоры в любом крупном городе Украины. Закажите понравившуюся модель в интернет-магазине portamix.com.ua и получите приятную доступную цену в подарок.
Читайте также:

2 комментария к “Растровые графические форматы для веб”

  1. Игорь Долбин пишет:


    Информация, конечно, не нова…, но удобно собрана в одном месте.

    P.S.: уберите эту ужасну капчу и поставьте плагин Spam-Free хотя бы.
    Корреспондент не должен мудохаться высматривая красные циферки.

  2. Alexandr пишет:


    Вы думаете, что сообщение от вашего антиспам-плагина лучше?

    «Sorry, there was an error. Please enable JavaScript and Cookies in your browser and try again.
    Status:
    JavaScript is enabled.
    PHP detects that cookies appear to be disabled. (However, JavaScript detects that cookies are enabled.)
    This message was generated by WP-SpamFree.»

    Кстати, это я браузером IE7 с установками по умолчанию смотрел :). Но за совет спасибо, сча займусь

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

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