Графические файлы в электронном курсе: какой формат выбрать (часть 1)

С какой стати, казалось бы, вообще задумываться о том, какие картинки можно использовать, а какие нельзя? Браузер показывает? Значит все хорошо. Да, и правда хорошо, если Вы смотрите курс прямо со своего компьютера (а именно это Вы делаете, когда редактируете курс) - вопрос времени загрузки картинок при этом просто не стоит, картинки грузятся с жесткого диска практически моментально. Однако, когда курс будет закончен и выложен на сервер системы обучения, вопрос обязательно появится - далеко не у всех пользователей системы обучения скорость канала связи сравнима со скоростью работы жесткого диска Вашего компьютера (обычно эти скорости разнятся в сотни или даже тысячи раз!). Допустим, одна картинка грузится 10 секунд (вполне реально для многих каналов связи), пусть на слайде - 10 картинок. 100 секунд будет сидеть пользователь перед монитором в ожидании загрузки полной картины слайда! Усидит ли? Попробуйте себя - нажмите на эту ссылку с имитацией процесса загрузки (только имитация - никаких файлов загружено не будет). Выдержали?


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


Какой формат файла выбрать в каждом конкретном случае?


Шаг 1. Формат должен поддерживаться браузером, на показ в котором рассчитан курс. Ниже приведена небольшая табличка по наиболее распространенным современным браузерам, более полную таблицу можно найти здесь на английском.




Таблица 1




* Некоторые версии IE могут показывать прогрессивную развертку JPEG как обычную. В большинстве случаев - некритично.


** Версии до IE 7 могут некорректно отображать альфа-канал в PNG (частично-прозрачные области отображаются полностью непрозрачными). Существует обходное решение в виде обязательного наложения альфа-фильтра (для IE 5.5+). Полностью проблема устранена в версии IE 7.0


В таблицу включены наиболее распространенные форматы растровой (JPEG, GIF, PNG, BMP, TIFF) и векторной (SVG, VML) графики. Последняя приведена в справочных целях - обсуждение векторной графики не является целью данной статьи. Как видно из таблицы (и сносок к ней), сразу следует отбросить формат TIFF, для которого большинству браузеров нужна установка специального plug-in. Из оставшихся наибольшие проблемы с совместимостью есть у браузера Microsoft Internet Explorer с форматом PNG, однако заметим, что в большинстве случаев он также будет показан абсолютно корректно (нужно только помнить про ограничение на использование PNG с прозрачными областями).


Итак, круг предпочтительных форматов после шага 1 определился так: JPEG, GIF, PNG, BMP.


Примечание: если иначе не оговорено, под форматом PNG в этом тексте понимается его 24-битная разновидность - PNG-24.



Шаг 2. Отсеиваем ненужный формат по размеру файла.


Из перечисленных форматов только BMP не использует абсолютно никаких алгоритмов сжатия и, как правило, имеет размеры файла как минимум в несколько раз (!) больше ближайших конкурентов. Поскольку лишний сетевой трафик и время ожидания очевидно никому не нравятся (помните пример про 100 секунд?) - забудем и про BMP.


Итак, после шага 2 остались JPEG, GIF и PNG.



Шаг 3. Выбираем нужный формат по предназначению и требуемому качеству.


Сведем в одну таблицу чаще всего встречающиеся требования к картинкам и посмотрим, как им удовлетворяют "оставшиеся в игре" форматы.



Таблица 2


Итак, посмотрим на примерах как разные задачи реализуются в разных графических форматах и почему им поставлены именно такие оценки.


1. Прозрачность. Как видно из общей таблицы, JPEG совсем не поддерживает прозрачность. Из оставшихся GIF получил оценку "средне", а PNG - "хорошо". Почему?


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



GIF PNG

Кстати, если Вы смотрите эту страницу с помощью Internet Explorer версии ниже 7.0, то Вы видите выше то самое ограничение, что было упомянуто в сноске к таблице 1 - видите, как "прозрачная" область на картинке PNG стала серенькой? А вот и упомянутое обходное решение ниже - здесь уже все нормально.


GIF
PNG


Казалось бы, до сей поры они выглядят одинаково. Попробуем теперь сменить цвет подложки на темно-серый:



GIF
PNG



На картинке PNG - все по-прежнему хорошо, а вот на картинке GIF появился голубой ореол вокруг букв. Почему это произошло?


Прозрачность в обоих форматах достигается одним и тем же способом - посредством «вырезания» из картинки пикселей одного выбранного цвета (так называемый альфа-канал). Однако, редко в какой картинке граница цвет-прозрачность является резкой. Наоборот, чаще всего в картинках (а равно и в наших примерах с буквами) этот переход происходит плавно. Но способ записи этого перехода в разных форматах разный:



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

  • в формате PNG возможна как бинарная, так и полная прозрачность (full alpha-channel), т.е. каждый пиксел помимо цвета имеет еще и как минимум 256 степеней прозрачности (а стандартом предусмотрено до 65535). В результате приграничные пикселы, у которых теперь описана степень прозрачности, не выглядят чужеродными на любом фоне.


Итак, по качеству прозрачности выигрывает PNG.


А что с размерами файла? В наших примерах GIF "весит" 1.91 кБ, PNG - 3.36 кБ. Неудивительно: ведь PNG хранит в себе больше информации. Здесь PNG, пожалуй, проиграл.


Вывод:


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

Продолжение следует...


Комментарии

Популярные сообщения из этого блога

Кейсы и проекты клиентов WebSoft, представленные в 2017 году

Цикл статей "Тренды современного HR". 7. Переход HR-сферы в формат Digital. Итоги цикла

ТОП 10 публикаций 2017 года в блоге WebSoft