Графические файлы Web отличаются от тех, что используются в классической полиграфии. Они всегда записываются в формате RGB и имеют гораздо меньший размер. Физические размеры таких файлов тоже невелики, потому как скорость передачи данных через Интернет накладывает серьезные ограничения на объем информации. Для пересылки файлов от сервера к клиенту требуется время. Понятно, что чем больше файл и чем меньше скорость подключения к Интернету клиента, тем больше времени требуется для передачи информации. Основной объем информации, как правило, «съедают» изображения (графические файлы). Почти все сталкивались с ситуацией, когда невозможно загрузить изображения на странице. Происходит это потому, что графических файлов очень много, но дизайнер не потрудился уменьшить их в размере, то есть оптимизировать. Основной вопрос, затрагиваемый в этой статье, — пути реализации Web-дизайнерами компромисса между размером файла и качеством его содержимого.
Существует два основных типа построения компьютерных графических данных: векторные файлы и растровые файлы.
Векторные фалы построены из форм, описываемых математическим языком. То есть такими понятиями, как точки размещения, ширина, высота, цвет заполнения. Примерами векторных программ являются Adobe Illustrator, Adobe Macromedia FreeHand, из свободных программ: Xara LX, Inkscape.
Растр — это совокупность объектов (пикселов), выровненных в столбцы и строки, другими словами, мозаичная структура. Растровый файл можно рассматривать как набор маленьких цветных или черно-белых квадратиков, где каждый квадратик выводится одним цветовым тоном. Высокое качество такого изображения обусловлено малым размером пикселей, при котором человеческий глаз не различает отдельные элементы (пиксели), которые сливаются друг с другом, образуя непрерывную смену тона.
Изображение в градациях серого отводит для одного пикселя один информационный байт, а для цветного — 3 информационных байта. Для нашего примера (правый фрагмент), где вся область состоит из 24 горизонтальных строк и каждая строка содержит 24 пикселя, размер изображения будет занимать 1728 байт (24х24х3=1728 байт или 1,69 Кбайт). Кроме цветовых значений пикселов графический файл содержит заголовочную информацию, указывающую тип файла, число строк и количество пикселей в строке, а также в каком графическом редакторе создан файл, в каком корректировался, на какой операционной системе, когда и во сколько.
Самая известная растровая программа Adobe Photoshop, среди бесплатных аналогов самым мощным на сегодняшний день является графический редактор GIMP.
Следует отметить, что исключая некоторые специальные случаи, можно утверждать, что в Web нельзя использовать векторные объекты. Мы рассмотрим три типа файлов, используемых Web-дизайнерами:
- GIF;
- PNG;
- JPEG.
Готовое изображение в GIMP оптимизируется при сохранении. Меню Файл⟶ Сохранить как... или комбинацией клавиш Shift+Ctrl+S. В окне Сохранить изображение необходимо выбрать расширение файла или внести его в ручную в верхней строке. От расширения зависят последующие окна и настройки оптимизации.
Оптимизация в формате GIF (расширение .gif)
Формат GIF (Graphics Interchange Format — формат обмена графическими данными) был разработан для передачи графических файлов между компьютерами с помощью модема. До недавнего времени являлся самым распространенным в сети. Этот формат использует сжатие по методу LZW (запатентованный алгоритм сжатия корпорацией Unisis). GIF ограничен 256 цветами, имеет глубину цвета 8 бит, как несложно догадаться, каждый пиксел использует один байт. Поддерживает прозрачность.
Формат GIF эффективен для сжатия изначально векторных изображений, если в них не присутствуют градиентные заливки или другие тоновые переходы. Это, как правило, изображения со сплошными тонами или повторяющимися цветами.
Рассмотрим окно системы. Оно как нельзя лучше подходит под оптимизацию в формате GIF, так как имеет ограниченно количество цветов.
При сохранении в формате GIF в программе GIMP откроется окно с запросом о параметрах сохранения в цветном режиме или оттенках серого. Если экспортировать изображение в индексированное, то в автоматическом режиме цветность будет урезана до 256 цветов.
Оптимизация файлов в GIMP путем индексации в ручном режиме
Меню Изображение ⟶ Режим ⟶ Индексированное...
Окно Преобразовать изображение в индексированное содержит два раздела:
- Цветовая карта. Пункт Создать оптимальную палитру определяет максимальное количество цветов изображения. В нашем случае порядка 16-ти. Это самый удобный способ уменьшить количество цветов. Пункт Использовать оптимизированную для WWW палитру подразумевает цветность 256. Пункт Использовать черно-белую (1-бит) палитру говорит сам за себя, будет использовано 2 цвета — черный и белый. И, наконец, в пункте Использовать свою палитру можно выбрать уже готовые палитры, отредактированные или создать свои. При выборе последних трех методов активизируется пункт Удалить неиспользованные цвета из цветовой карты, лучше оставить его включенным, так как в этом случае оптимизированное изображение получиться с меньшим размером.
- Размывание цвета. Используются алгоритмы сжатия путем смешивания близко стоящих цветов. Для векторных файлов не подходят. В остальных случаях будут полезны. Пункт Включить размывание прозрачности рекомендуется при наличии в изображении прозрачных областей. Края изображения не будет резким и ребристым.
При сохранении индексированного файла в GIF, программа GIMP не выдаст запроса о преобразовании. Изображение в этом случае получается гораздо меньшего размера.
Оптимизация в формате PNG (расширение .png)
Формат PNG (Portable Network Graphics — Портативная сетевая графика) спроектирован в качестве конкуренции и в конечном счете замены формата GIF. Поддерживает как 24-битные, так и 48-битные изображения. Для представления изображений можно использовать 256 цветов.
Сжатие PNG оказывается не столь захватывающим, размер файла уменьшается, но не очень сильно. Если готовить иллюстрацию для публикации в Интернет, то для файлов действуют те же рекомендации, что и для GIF. В противном случае можно получить неоправданно большое изображение.
Оптимизация в формате JPEG (расширение .jpg)
Формат JPEG (Joint Photographic Expert Group — Объединенная группа экспертов по машинной обработке) основан на методе с потерей качества (lossy). Технология сжатия построена по принципу усреднения пикселов группы. Для представления информации этот формат может использовать миллионы цветов. Наиболее эффективен для фотографий и других тоновых (continuous-tone) изображений, в которых цвета соседних пикселов незначительно отличаются друг от друга.
В окне Сохранить как JPEG движок позволяет выбирать необходимый уровень качества. При включении пункта Просмотр в окне изображения, можно видеть результат сжатия. Наилучшее преобразование характеризуется как без видимой потери качества (without visual loss of quality). Всегда приходится искать компромисс между качеством изображения и размером файла. В разделе Дополнительные параметры достаточно много настроек. Обычно используется только пункт Оптимизировать. Если готовить изображение для WEB, то остальные пункты либо увеличивают физический размер картинки, либо уменьшают его за счет качества (пункт Сглаживание, хотя иногда он необходим).
Изначально изображение «весило» 75,4 Кбайт, после оптимизации 10,6 Кбайт.
Желаем Успехов.
СВами
