Новости HRTech, интересные идеи о Digital HR в нашем канале в Telegram: https://t.me/WebsoftHR

Графические файлы в электронном курсе: какой формат выбрать (часть 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 хорошо передаст прозрачность, независимо от того, совпадает ли текущий фон с цветом альфа-канала.

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


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

Кто владеет информацией тот владеет миром, или как создать быстро работающую базу знаний с «умным» поиском

Сказка о непотерянном времени, или Как учесть трудозатраты сотрудников на обучение

Как подсчитать стоимость подбора персонала, опираясь на показатели воронки подбора?

Как выбрать систему автоматизации рекрутмента (ATS)?

Мобильные инструменты WebTutor для современной HR-автоматизации