Изображения

Часто говорят, что изображение стоит тысячи слов. В мобильном Вебе все так же. Но мы должны найти и сохранить баланс в количестве изображений на странице. Каждое изображение увеличивает сетевой трафик, количество запросов и время загрузки. Позже мы поговорим об оптимизации изображений.

Сейчас мы поговорим о теге <img>. Этот тег нужно использовать для:

• логотипа компании;
• фотографий в статьях или фотографий продукта;
• карт.

Не используйте тег <img> для:

• кнопок;
• иконок для ссылок или меню;
• фонов;
• визуальных разделителей;
• заголовков.

Это совсем не означает, что мы не будем использовать изображения для кнопок, иконок и т.д. Просто в таких случаях мы не будем использовать это тег. Тег <img> корректен только для изображений, которые пользователь воспринимает именно как изображения, а не как визуальные подсказки и наглядные пособия. Значок стрелки для ссылки не воспринимается пользователем как изображение. Это просто кнопка или ссылка. Мы будем все время придерживаться этого правила.

Применение тега

Обязательными атрибутами для тега <img> являются src, width, height и alt. В мобильном документе очень важно определить ширину и высоту каждого изображения. Это поможет сократить время первичного рендеринга, ведь мобильному браузеру не нужно будет ждать, пока загрузится изображение, чтобы узнать, сколько оно займет места, и затем распределить остальной контент.

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

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

Форматы

Практически каждый мобильный браузер понимает следующие форматы изображений: GIF, JPEG и PNG. Рекомендуется использовать PNG, так как это открытая технология, обязательный формат для Java ME и каждый мобильный браузер понимает PNG. Правда, следует отметить, что в браузерах есть некоторые различия в обработке прозрачностей и индексировании.

Для анимации стандартом в мобильном Интернете является Animated GIF. Flash не поддерживается во многих браузерах, но даже если необходимая поддержка есть, работать он может очень медленно, так что для баннеров и анимации лучше использовать классический формат.

Позже мы рассмотрим также SVG (Standard Vector Graphics) и HTML 5 тег <canvas>, которые являются отличными альтернативами изображениям в современных браузерах с соответствующей поддержкой.

Встроенные изображения

Благодаря отсутствию поддержки в Internet Explorer 7 (и более ранних версиях) многие разработчики и не знают о такой прекрасной функции современных браузеров. А для мобильных веб-сайтов эта функция особенно полезна.

data URI — механизм определения URL со встроенным контентом (например, изображениями). Например, мы можем, не используя внешний файл, определить тег <img> с изображением внутри него. Это может быть реализовано при помощи base64-кодирования файла изображения — сохраняя бинарный файл как набор видимых ASCII символов в строке. Очень удобен такой метод для небольших изображений, иконок, фонов, разделителей и т.п., которые не заслуживают отдельного запроса на сервер. Так в чем же подвох? Не каждый мобильный браузер поддерживает такую функцию.

При преобразовании в base64-строку для data URI размер изображения (или любого другого бинарного файла) увеличится на 30%, но он уменьшится обратно, если мы передадим его при помощи GZIP с сервера. Таким образом, на финише его размер будет точно таким же или даже меньше и при этом нет необходимости в новом запросе (вместе со всеми его издержками).

Большая часть data URI может быть использована в файле CSS с кешированием и поддержкой многостраничности (позже рассмотрим подробнее).

Для преобразования файла изображения в строку base64 мы можем использовать любой онлайн конвертер или утилиту командной строки. Есть бесплатные альтернативные онлайн-варианты на http://www.webutils.pl/index.php?idx=base64 и http://www.motobit.com/util/base64-decoder-encoder.asp .

PHP Base64 преобразования

Многие платформы веб-серверов предлагают возможность base64 преобразования. Например, в PHP есть для этих целей функция base64_encode. Для генерации кода, который основывается на реальном файле на твоем сервере, используй что-то вроде base64_encode(file_get_contents($path)). Нужно будет добавить поддержку ошибки и вставить результат в тег <img>.

Компактный синтаксис — data:[MIME-Type][;base64],data. Для лучшей читаемости в data могут содержаться пробелы и символы новой строки.

Как пример: логотип O’Reilly (исходный PNG файл шириной в 75 пикселей) присоединенный как data URI изображение выглядит так:

<img width="100" height="17" alt="O'Reilly" src="data:image/png;base64;
iVBORw0KGgoAAAANSUhEUgAAAEYAAAARBAMAAACSi8f4AAAAA3NCSVQICAjb4U/gAAAAGFBMVEX/
//////8AAACpqanMzMxmZmaHhoQ/Pz9kt3AEAAAACHRSTlMA/////////9XKVDIAAAAJcEhZcwAA
CxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzQGstOgAAAAFnRF
WHRDcmVhdGlvbiBUaW1lADEyLzExLzA5uegApgAAAQNJREFUKJGVkUFTwyAQhfMXXiH1LA3hDMTe
SVDPidW7WnMvkxn/vo+MsamX6s7wgOy3O29JgetR/I2Rdy8B8HIcAyhj8PLIr0dsuYlDF8i8KWWC
/BRKaVCUTaJmkhcDuNOHLVCaJg6VfJY6JivqGJHEjn00q3tpsGcfd0KuuGdx2+fsmSl3m2r2k2gG
g30i434xSMlmht0YbR+EflAU71dMW89zzWcy2W61eF6YssK5j3vlII81Lj0vzOKHaXCuSz8334yb
gC2bkdlUK6ZeMVvTdMM0M0IL3fmQskbD08LA8YHDzGDw9Nyn7Hziuv1hsH/PltCQi9770MmsXFaG
f/z3q/EFatlL/IFsBmgAAAAASUVORK5CYII=
" />

Я знаю, что ты думаешь: «Это ужасно, почему просто не сделать чистый XHTML»?. Возможно, ты и прав.

Использовать data URI изображения нужно только с теми браузерами, где точно есть поддержка такой возможности.

В CSS это изображение может быть представлено как фоновое изображение (background-image):

#logo {
	width: 70px;
	height: 17px;
	background-image: url('data:image/png;base64,
	iVBORw0KGgoAAAANSUhEUgAAAEYAAAARBAMAAACSi8f4AAAAA3NCSVQICAjb4U/gAAAAGFBMVEX/
	//////8AAACpqanMzMxmZmaHhoQ/Pz9kt3AEAAAACHRSTlMA/////////9XKVDIAAAAJcEhZcwAA
	CxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzQGstOgAAAAFnRF
	WHRDcmVhdGlvbiBUaW1lADEyLzExLzA5uegApgAAAQNJREFUKJGVkUFTwyAQhfMXXiH1LA3hDMTe
	SVDPidW7WnMvkxn/vo+MsamX6s7wgOy3O29JgetR/I2Rdy8B8HIcAyhj8PLIr0dsuYlDF8i8KWWC
	/BRKaVCUTaJmkhcDuNOHLVCaJg6VfJY6JivqGJHEjn00q3tpsGcfd0KuuGdx2+fsmSl3m2r2k2gG
	g30i434xSMlmht0YbR+EflAU71dMW89zzWcy2W61eF6YssK5j3vlII81Lj0vzOKHaXCuSz8334yb
	gC2bkdlUK6ZeMVvTdMM0M0IL3fmQskbD08LA8YHDzGDw9Nyn7Hziuv1hsH/PltCQi9770MmsXFaG
	f/z3q/EFatlL/IFsBmgAAAAASUVORK5CYII=') top left no-repeat;
}

Большую часть используемых data URI изображений в CSS мы можем использовать более чем в одном документе, без необходимости заново загружать графический контент (т.е. за счет кеширования того же самого CSS) и при этом сохраняется чистый XHTML.

С функциями HTML5 ты можешь в базе данных или в объекте JSON сохранить список файлов с base64 изображениями, которые будут для пользователя кешироваться на устройстве для последующего использования в URL (подробнее в главе 9).

В таблице 6.5 перечислены типы изображения и браузеры, в которых есть поддержка этих типов.

Региональные пиктограммы

Японские разработчики фактически создали стандарт применения в HTML небольших значков, не используя при этом изображения или запросы. Изображения (так называемые Emoji — японское слово, означающее соединение картинки и буквы) основываются на перечне множества иконок, которые браузер нарисует сам. Каждый браузер, который поддерживает данную технологию, может отобразить иконку сердца, но при этом ты не будешь точно знать, как оно будет выглядеть в каждом браузере, т.к. в зависимости от движка, изображение может отличаться. Сейчас в сервисы NTT i-mode включают Основные пиктограммы (176 шт.), совместимые со всеми устройствами и Расширенные пиктограммы (76 шт.) добавленные в HTML 4.0.

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

Для отображения этих пиктограмм нужно просто вставить бинарный (двоичный) код в свой HTML (файл должен быть сохранен как Shift-JI, а не UTF-8) или определить их как стандартные символы Unicode, используя &#x9999, где вместо 9999 должен стоять номер пиктограммы. Перечень доступных пиктограмм можно найти на http://www.mobilexweb.com/go/pictograms.

В западном мире это очень невостребованная функция. Хоть iPhone и поддерживает эти иконки (в отличие от браузера Android, как ты можешь увидеть на рисунке 6.4), но я встречал не так много сайтов, которые вообще их используют. Начиная с версии 2.2 iOS стала поддерживать клавиатуру Emoji (правда, только для устройств, разработанных для японского рынка), а браузер дает возможность пользователям по всему миру использовать пиктограммы Emoji. На http://www.mobilexweb.com/go/emoji-iphone есть перечень всех iPhone Emoji. Список длинный — там более 450 Emoji и у всех иконок отличный дизайн. Помните, что это изображения, которые не используют сетевые ресурсы! Например, для iPhone при помощи такого кода можно можно сделать сообщение со смайликом в конце:

<p>Thanks for your message! &#xe415;</p>

Еще есть программа для Windows (она на японском, но там все понятно), которая показывает все пиктограммы, которые ты можешь использовать. Она называется iEmoji и загрузить ее можно по ссылке http://www.mobilexweb.com/go/iemoji.

Рис. 6.4. Safari на iOS показывает пиктограмму Emoji, а Android показывает только прямоугольный значок нечитаемого символа.

iPhone Emoji доступен пользователям по всему миру, а не только на японском рынке. Единственное условие — нужна iOS 2.2.1 или старше.

При помощи тега <object> OMA стандартизировал пиктограммы в XHTML MP:

<object data="pict:///core/arrow/right" />

Стандарты поддерживают альтернативный контент, поэтому если пиктограмма отсутствует, можно просто добавить дочерний элемент (child) к объекту с альтернативным контентом. В качестве альтернативного контента может быть как другая пиктограмма, так и классическое изображение:

<object data="pict:///time/season/summer">
	<object data="pict://weather/sunny">
		<img src="images/sun.png" width="32" height="32" alt="Sunny" />
	</object>
</object>

Наборы пиктограмм не являются стандартом и отличаются во всех браузерах и потому сегодня мало используются на мобильных веб-сайтах. В таблице 6.6 показана совместимость существующих пиктограмм и наиболее популярных мобильных браузеров. Вот хороший ресурс по пиктограммам и Emoji http://sites.google.com/site/unicodesymbols/Home/emoji-symbols.

В браузере Openwave (характерен для low- и mid-end устройств) также есть свой собственный механизм иконок. Иконки могут быть добавлены в HTML при помощи тега <img> с атрибутом localsrc или в CSS — используется background-image или list-style-image. Доступно 562 разных варианта иконок (перечень на http://mobilexweb.com/go/openwaveimages).

Например, чтобы показать стрелку «Назад», мы можем использовать имя или номер иконки:

<img localsrc="back" />
<img localsrc="511" />

Openwave также может обрабатывать стандартные WAP пиктограммы благодаря тегу <object> и такому URL: pict:///<image path>. Например:

<object data="pict:///core/action/stop" height="32" width="32"
standby="Stop loading…" name="stop" />

Эффективное использование изображений

Есть определенные принципы работы со всеми этими сложностями и возможностями:

• В XHTML используй изображения только для логотипов, фотографий и карт.
• Сжимай изображения нормальными веб-методами.
• Для каждого изображения указывай ширину, высоту и альтернативный текст.
• Всегда, если есть возможность используй для небольших изображений data URI
• Оставь иконки, кнопки и фоны для CSS.
• Не стесняйся использовать пиктограммы и Emoji на совместимых устройствах.
• Старайся лишний раз не использовать карты изображений.
• Рассмотри возможность использования <canvas> или SVG для совместимых устройств и для некоторых графических форматов.

Куда дальше

• следующая — Списки
• предыдущая — Тело документа. Основная структура
• содержание

По теме

• img vs background-image
• Встраиваем изображения — data:URL
• Преобразуем картинки в данные data:URL
• Эмуляция data:URL для IE6-7 — используем MHTML-включение