Форматы изображений для веба
Хороший верстальщик должен уметь правильно выбирать форматы изображений для своей вёрстки, чтобы изображения отображались без погрешностей и имели оптимальный размер при загрузке. Давайте разберёмся, какие бывают форматы изображений и в каких ситуациях лучше выбрать тот или иной формат.
Растровые форматы
Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP.
Основные характеристики, которые нас будут интересовать при выборе формата — это качество изображения, вес и количество цветов. В вебе тяжёлые изображения непрактичны, поскольку они долго загружаются. Чтобы уменьшить вес файла, используются алгоритмы сжатия. Сжатие может быть с потерями и без потерь. При выборе подходящего формата изображения, нам нужно найти баланс между весом файла и качеством картинки, так как некоторые алгоритмы сжимают изображения с потерей качества. Теперь рассмотрим каждый из форматов подробнее.
GIF (Graphics Interchange Format)
Формат был разработан компанией CompuServe в далёком 1987 для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.
Формат поддерживает прозрачность — каждый пиксель изображения может быть в двух состояниях: прозрачный или непрозрачный, полупрозрачность не поддерживается.
Особенностью GIF является поддержка анимации, то есть этот формат может хранить несколько кадров, которые сменяют друг друга с определённой частотой.
Таким образом, формат GIF подходит если:
- изображение не многоцветное;
- нужна простейшая прозрачность;
- нужна анимация.
JPEG (Joint Photographic Experts Group)
Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.
Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).
Первая картинка весит 20 килобайт. Это круто, очень мало, но для этого мы задали уровень качества 10 и картинка выглядит плохо.
Вторая картинка с уровнем качества 60 весит чуть больше первой — 65 килобайт, но выглядит уже хорошо.
Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.
Таким образом, формат JPEG лучше подходит для:
- полноцветных изображений, фотографий;
- изображений, с плавным переходом яркости и контраста;
- рисунков с большим количеством разноцветных деталей.
PNG (Portable Network Graphics)
PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.
PNG является форматом сжатия без потерь и позволяет сохранять изображения, в которых требуется особенная чёткость. Например, чертежи и печатный текст.
Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.
Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.
Итак, формат PNG подходит для:
- изображений с прозрачностью и полупрозрачностью;
- когда необходима повышенная точность полноцветных изображений;
- изображений с резкими переходами цветов.
WebP
WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.
Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.
Формат использует новый алгоритм сжатия, в котором искажения отличаются от искажений других форматов. Ухудшается детализация и структура, в то время как края остаются чёткими.
- сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
- сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
- поддерживает прозрачность (альфа-канал).
Иногда WebP сжимает изображение даже лучше, чем заявляет Google.
Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.
Векторные форматы
GIF, JPEG, PNG, и WebP — растровые форматы, основанные на дискретном (пиксельном, точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур).
SVG (Scalable Vector Graphics)
SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.
Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.
SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.
Формат SVG отлично подходит для малоцветных схем, логотипов и иконок, например, таких:
Таким образом, формат SVG подходит если:
- нужно анимировать части изображения;
- изменять цвет элементов изображения;
- необходимо масштабировать изображение без потерь.
Форматы в зависимости от цели использования
Под фотографическими изображениями понимаются полноцветные фотографии, чёрно-белые фотографии, полноцветные изображения, рисунки с большим количеством разноцветных деталей. Под графикой, логотипами, иконками — графика со множеством сплошных цветов, с небольшим количеством цветов (до 256 цветов), с текстом или линиями, с прозрачностью.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Использование современных графических форматов в веб-проектах
Эдди Османи, в статье «Цена JavaScript в 2018 году», озвучил одну ценную мысль: время, необходимое на обработку скрипта размером 200 Кб, и на обработку изображения, имеющего такой же размер, серьёзно различается. Дело в том, что при обработке кода браузеру нужно проделать более масштабную работу, чем при подготовке к использованию изображений. Вот что об этом говорится в статье:
JPEG-изображение нужно декодировать, растеризовать и вывести на экран. А JS-бандл надо, если рассматривать это упрощённо, загрузить, распарсить, скомпилировать, выполнить. На самом же деле движку приходится решать и другие задачи в процессе обработки JS-кода. В целом, стоит учитывать, что на обработку JavaScript-кода, размеры которого, в байтах, сопоставимы с размерами других материалов, тратится гораздо больше системных ресурсов.
Эти слова были написаны в 2018 году, но они до сих пор более чем справедливы. Правда, учитывая текущую обстановку, высказанная здесь мысль сегодня воспринимается немного иначе.
Принимая во внимание то, что в мире сейчас разразилась пандемия, я заметил, что моё интернет-соединение стало работать нестабильно. К нашему счастью, благодаря тому, что на страже благополучия интернета стоят прекрасные специалисты, не знающие усталости, большая часть Всемирной сети до сих пор работает нормально. Но в интернете, определённо, что-то происходит. Я пользуюсь соединением на 100 Мбит/с, но у меня возникает такое ощущение, будто я сижу на 3G-модеме.
Это вносит некоторые изменения в вышеприведённые рассуждения. Дело в том, что наши устройства могут парсить и компилировать JavaScript с той же скоростью, с которой они могли это делать пару недель назад. Но данные теперь путешествуют по сетям медленнее. В результате в настоящий момент крайне важно то, какой именно объём данных, представляющих некий ресурс, передаётся по сети при загрузке этого ресурса.
А на сайтах обычно имеется гораздо больше, чем 200 Кб изображений. Страница с несколькими мегабайтами картинок — это обычно дело. Многие разработчики (и я тоже!), как правило, совсем не задумываются о размерах медиа-материалов.
Но, что очень хорошо, оптимизировать изображения, используемые на веб-страницах, не так уж и сложно. В этом материале мы поговорим о том, как пользоваться современными графическими форматами вроде WebP. Изображения, сохранённые в таких форматах, часто оказываются в 2-3 раза меньше, чем те, для хранения которых используются всем известные и всеми любимые старые форматы (вроде JPG и PNG). Применение новых форматов может серьёзно изменить ситуацию в лучшую сторону.
Общий обзор современных графических форматов
Для улучшения работы с веб-графикой мы можем воспользоваться следующими тремя форматами:
- JPEG 2000 — формат, представляющий собой улучшенный вариант обычного JPG. Этот формат был разработан в 1997 году, преимущественно для использования в кинематографе и в медицине. Он позволяет сжимать изображения сильнее, чем JPEG, но с меньшим количеством артефактов.
- JPEG XR — это формат, родственный JPEG 2000. Он разработан компанией Microsoft в 2009 году.
- WebP — формат, созданный Google в 2010 году для веб. Основная цель его разработки заключалась в использовании продвинутых способов оптимизации изображений ради уменьшения размеров файлов. WebP поддерживает прозрачность и даже анимацию.
Много ли можно выиграть, пользуясь альтернативными графическими форматами?
Несколько месяцев назад я использовал в одном материале следующее изображение.
Изображение, использованное в одном материале
Я провёл некоторые эксперименты, рассмотрев использование форматов JPG и PNG для хранения исходного изображения. Я оптимизировал варианты изображения с использованием imagemin для того чтобы узнать о том, что мне может дать применение WebP вместо этих «ретро»-форматов.
Результаты оказались прямо-таки невероятными.
| Особенности изображения | Оригинал | WebP |
|---|---|---|
| Файл в формате .png (из Photoshop) | 742 Кб | 61 Кб! (на 92% меньше) |
| Оптимизированный файл в формате .png (после Imagemin) | 178 Кб | 58 Кб! (на 67% меньше) |
| Файл в формате .jpg (из Photoshop) | 242 Кб | 50 Кб! (на 79% меньше) |
| Оптимизированный файл в формате .jpg (после imagemin) | 151 Кб | 50 Кб! (на 67% меньше) |
Я проводил подобные эксперименты с множеством изображений. Практически всегда оказывалось, что WebP-файлы были на 30-70% меньше чем даже оптимизированные версии графических файлов других форматов.
Тут может возникнуть вопрос о том, как преобразование в WebP может повлиять на SVG-изображения. Я подобных экспериментов с SVG не проводил. SVG — это векторный формат. Это значит, что изображения в нём строятся на основе математических инструкций, а не на основе сведений о цвете отдельных пикселей. Преобразовать SVG-изображение в WebP — значит отказаться от возможностей по масштабированию SVG-изображений, что, полагаю, недопустимо. К тому же, я подозреваю, что подобное преобразование, в большинстве случаев, приведёт к увеличению размеров файлов.
Браузерная совместимость
Для того чтобы узнать о том, как те или иные графические форматы поддерживаются браузерами, заглянем на caniuse.com.
Формат WebP пользуется поддержкой большинства браузеров.
Поддержка формата WebP браузерами
Хоть уровень поддержки этого формата и весьма высок, очень плохо то, что его не поддерживают Safari и Internet Explorer.
А вот — сведения о поддержке JPEG 2000.
Поддержка формата JPEG 2000 браузерами
Так, теперь Safari на нашей стороне, а вот Internet Explorer опять остался не у дел.
А как насчёт JPEG XR?
Поддержка формата JPEG XR браузерами
А тут отличился именно Internet Explorer. В результате, пользуясь этими тремя форматами, мы перекрываем все существующие браузеры (KaiOS Browser не поддерживает ни один из этих форматов, и я приношу ему свои извинения за то, что обхожу его вниманием, но я даже не знаю о том, что это за браузер).
Поговорим теперь о том, как выбирать разные форматы изображений, предназначенные для разных браузеров.
Элемент picture спешит на помощь
В HTML есть два элемента, предназначенных для вывода изображений. Первый можно сравнить с международной поп-звездой вроде Мадонны. Это — img . А второй — это как новая группа, известная лишь в узких кругах любителей музыки. Это — элемент picture .
Элемент picture появился в HTML гораздо позже, чем img . Главная цель этого нового элемента заключается в том, чтобы позволить разработчикам загружать различные графические ресурсы в зависимости от разрешения экрана, или в зависимости от того, поддерживает ли браузер некий графический формат.
Вот как выглядит HTML-код, в котором применяется элемент picture :
Элемент picture может включать в себя множество дочерних элементов source и один элемент img . Браузер последовательно парсит эти элементы, подбирая, на основе атрибута type (и media ), тот из них, которым сможет воспользоваться. Когда такой элемент будет найден, браузер выясняет адрес изображения, пользуясь атрибутом srcset , после чего выводит это изображение с помощью элемента img .
Атрибут srcset обладает гораздо большими возможностями, чем обычный src , но мы, к счастью, можем рассматривать его как аналог src . В целом, элементы source представляют собой нечто вроде настроек, соответствующих различным изображениям. В img попадает то изображение, которое лучше всего соответствует среде, в которой просматривают страницу.
В Chrome, например, после обработки вышеприведённой разметки, браузер придёт к чему-то, более или менее эквивалентному следующему коду:
Использование набора следующих друг за другом элементов source означает, что в каждом браузере подходящим окажется хотя бы один из них. Так, большинство браузеров используют webp-изображение, Safari загрузит jp2-изображение, IE — jxr-изображение.
Тут уместно вспомнить о том, что Internet Explorer не поддерживает элемент picture . Этот элемент — слишком нов для данного браузера. Но, несмотря на это, вышеприведённый фрагмент разметки и в IE сработает так, как ожидается.
Дело в том, что когда браузер натыкается на неизвестный ему элемент, он рассматривает его как элемент div . В результате при разборе нашего кода IE видит множество элементов div , а также — один тег , который содержит путь к jxr-изображению. А это, как оказывается, тот самый формат, который поддерживает Internet Explorer.
Упрощённая альтернатива
Вышеприведённый фрагмент кода чрезвычайно хорош тем, что позволяет пользоваться современными графическими форматами во всех актуальных браузерах. Но применение подобного кода основывается на предположении о существовании тех изображений, на которые в нём есть ссылки.
Если создавать такие изображения самостоятельно — придётся вложить в это много ручного труда. Если же генерировать их автоматически — это может значительно увеличить время сборки проекта. Обработка графики, как известно, становится весьма медленным процессом в том случае, если речь идёт о множестве изображений.
Лишь очень немногие посетители моего блога пользуются Internet Explorer (за последние 7 дней его попытались посмотреть лишь 3 человека с IE, что составило 0.02% трафика). Поэтому я решил воспользоваться упрощённым вариантом вышеописанного решения:
Я отдаю компактное webp-изображение тем браузерам, которые поддерживают этот формат (Chrome, Firefox, Edge), а браузерам, которые этого формат не поддерживают (IE, Safari), предлагаю наследие прошлого — jpeg-картинку.
С моей точки зрения это — пример прогрессивного улучшения. Проект остаётся работоспособным на старых браузерах, хотя загрузка изображений и занимает больше времени. Это — компромисс, который меня устраивает. (Правда, я надеюсь, что поддержка WebP скоро появится и в браузерах от Apple).
Проверка работоспособности решения
Инструменты разработчика всегда будут полагать, что в изображении содержится то, что изначально было записано в атрибут src тега img . Если проверить элемент, воспользовавшись вкладкой Elements , то можно увидеть, что на странице используется jpg-изображение.
Для того, чтобы проверить работоспособность всего этого, лучше всего, как мне кажется, щёлкнуть правой кнопкой мыши по картинке и выбрать в появившемся меню пункт Сохранить изображение как… В Chrome при выполнении этой команды система должна предложить сохранить файл с расширением .webp . А вот в Safari это будет jpeg-файл.
Для того чтобы узнать о том, какой именно графический файл был получен с сервера при загрузке страницы, можно обратиться к вкладке инструментов разработчика Network .
Преобразование графических файлов в формат WebP
Компания Google создала набор инструментов, направленный на работу с webp-файлами. Один из таких инструментов называется cwebp. Он позволяет преобразовывать в WebP графические файлы других форматов.
Если вы пользуетесь MacOS, установить этот набор инструментов можно с помощью Homebrew:
brew install webp На других платформах, полагаю, нужно будет загрузить подходящий libwebp-пакет из репозитория.
После установки инструментов пользоваться ими можно так:
cwebp -q 80 cereal.png -o cereal.webp Рассмотрим эту команду:
- Флаг -q 80 позволяет задать качество изображения. Его значение изменяется от 1 (наихудшее качество) до 100 (наилучшее). Можете поэкспериментировать с различными значениями. Я выяснил, что лучше всего задавать тут что-то в районе 70-80.
- Имя файла cereal.jpg — это исходное изображение, которое нужно преобразовать в webp.
- Конструкция -o cereal.webp задаёт путь к выходному файлу.
Использование современных графических форматов в React-приложениях
Компонент — это прекрасный способ абстрагироваться от некоторых странностей элемента . Я пользуюсь для этого React-компонентами. На мой взгляд, это очень удобно. Вот как это выглядит:
const ImgWithFallback = (< src, fallback, type = 'image/webp', . delegated >) => < return ( type= /> 
/> ); >; Использование компонента ImgWithFallback очень похоже на работу с обычным тегом img :
Применение современных графических форматов со стилизованными компонентами
Если вы пользуетесь библиотеками styled-components или emotion , то вы, возможно, привыкли к особому оформлению изображений:
const FancyImg = styled.img` whatever: stuff; ` Очень хорошо то, что это работает и с нашим компонентом ImgWithFallback . Заключить его в соответствующую обёртку можно так же, как любой другой компонент:
const FancyImg = styled(ImgWithFallback)` whatever: stuff; ` Причина работоспособности этой конструкции заключается в том, как именно работает вспомогательная конструкция styled . Она генерирует класс и внедряет его в таблицу стилей документа. Затем имя сгенерированного класса передаётся компоненту в виде свойства:
Мы делегируем все свойства дочернему тегу , в результате к изображению применяются, как это обычно происходит, правильные стили. Всё работает именно так, как можно ожидать.
Использование пакета gatsby-image
Если вы применяете Gatsby, то знайте, что пакет gatsby-image , при его обычном использовании, уже задействует множество оптимизаций изображений. Сюда входит и преобразование изображений в формат webp (хотя, для этого нужно включить соответствующий параметр).
Пакет gatsby-image не претендует на то, чтобы стать заменой img . Его использование может оказаться не таким уж и простым, его внутренние механизмы могут приводить к появлению неожиданностей, осложняющих разработчику жизнь.
Если этот пакет вам интересен — взгляните на его документацию.
Минусы WebP
Единственным реальным недостатком webp, который мне удалось обнаружить, заключается в том, что с файлами этого формата очень неудобно работать.
Большинство настольных пакетов для работы с изображениями пока его не поддерживают. Например, я не могу открывать webp-файлы в Preview на MacOS. Это значит, скажем, что если я сохраню webp-изображение с веб-страницы, я не смогу просмотреть его на компьютере!
Преобразование webp-файлов в jpeg-файлы — процесс достаточно простой. В интернете можно найти много бесплатных сервисов, выполняющих подобное преобразование. Но, это, опять же, не так удобно, как работа с традиционными графическими форматами. Если ваш сайт предлагает пользователям загружать с него графические файлы — вы, возможно, решите, что переход на webp вам не нужен.
Итоги
Мне очень нравится то, что благодаря использованию webp удалось сократить размер изображений в моём блоге примерно на 50%. Помимо того, что в наше непростое время это улучшает впечатления пользователей от работы с ним, я ещё надеюсь на то, что это позволит мне немного сэкономить на оплате трафика.
Конечно, идея ручного преобразования графических файлов в формат webp выглядит весьма непрактичной. Я уже занимаюсь изучением вопроса о том, как автоматически конвертировать в этот формат jpg- и png-файлы. В идеале этот процесс должен происходить совершенно незаметно для разработчика, во время сборки сайта.
Создатели веб-проектов обычно не особенно интересуются особенностями применения новых графических форматов. Но я полагаю, что разбираться в этом вопросе весьма полезно. Ведь использование WebP — это, вероятно, самый простой способ сократить размеры веб-проекта на сотни килобайт.
Уважаемые читатели! Пользуетесь ли вы форматом WebP?
- изображения
- графические форматы
- разработка
- Блог компании RUVDS.com
- Веб-разработка
- Клиентская оптимизация
- Обработка изображений
- Браузеры
Графические форматы для вставки изображений на сайт
Как правило, для вставки изображений на веб-страницу используется один из трех графических форматов: gif , png и jpg/jpeg .
Все эти форматы относятся к растровой графике . Что это значит?
Растровое изображение – это изображение, состоящее из сетки пикселов (цветных прямоугольных точек). А пиксель в свою очередь – это наименьший двумерный элемент цифрового изображения в растровой графике.
Растровые изображения распространены практически везде, в основном именно они используются в веб-дизайне, так как с ними удобно и быстро работать.
Далее подробнее поговорим о графических форматах gif , png и jpg/jpeg , использующихся для вставки изображений на сайт.
Формат GIF
Формат gif – достаточно пожилой (разработан в 1987 году) и один из самых распространенных и популярных форматов изображений, использующихся на веб-страницах.
Формат gif способен хранить сжатые данные без потери качества в формате не более 256 цветов (8-битный цвет) — это максимальное количество цветов, которые могут быть одновременно отображены на одном пикселе. Это ограничивает область применения формата изображениями, имеющими резкие цветовые переходы.
Однако, одним из основных достоинств формата является его поддержка всеми браузерами, начиная с самых первых версий. Поэтому картинки gif часто применяются вместо анимированных кнопок и баннеров, созданных с помощью технологии Flash, которая предполагает, что на каждом браузере установлен плагин Flash или элемент ActiveX Flash нужной версии.
Формат PNG
Формат png был создан независимыми программистами в 1995 году с целью улучшить формат gif , который перешел в разряд коммерческих продуктов.
Формат png делает почти все, что и формат gif , за исключением анимации.
Размер 8-битной картинки в формате png будет меньше, чем у gif . Но самые мелкие мелочи получатся легче у gif .
Формат png поддерживает цветные фотографические изображения вплоть до 48-битных включительно. Хорошо подходит для публикации высококачественной растровой графики на страницах сайтов.
В зависимости от свойств изображения формат png иногда предпочтительнее, нежели gif или jpg .
Стоит отметить, что прозрачность фона поддерживается в двух форматах — gif и png . Но png в этом плане более предпочтительный вариант, так как gif может предложить только двоичную прозрачность (прозрачный или не прозрачный), в то время как png может иметь 256 вариантов прозрачности. Например, в формате png можно изобразить полупрозрачную тень.
Формат JPG/JPEG
Формат jpg — самый популярный и подходящий формат для хранения в Интернет и размещения на веб-страницах фотографических полно цветных изображений.
Формат jpg является общепризнанным стандартом и может хранить только 24-битовые полно цветные изображения.
Изображения в формате jpg сжаты, но при этом удалена та информация, которая несущественна для восприятия изображений.
Для вставки изображений на страницы сайта рекомендуется исходить из правила : максимальное качество при минимальном размере.
Изображение в формате jpg — Размер 4,038 Mb.
Изображение в формате gif — Размер 3,773 Mb.
Изображение в формате png-24 — Размер 13,674 Mb.
Изображение в формате png-8 — Размер 3,119 Mb.
В данном примере нет ощутимой разницы между изображениями. Все они примерно равны по размеру в Мб, за исключением картинки в формате png-24 . Ее отличие от формата png-8 в том, что последний использует 256 цветов, в то время как png-24 16 миллионов.
Эти изображения редактировались и были сохранены в различных форматах специально для WEB при помощи программы AdobePhotoshop. Естественно, качество и размер изображений могут быть другими — программа AdobePhotoshop позволяет гибко варьировать эти параметры при сохранении графических файлов для веб-страниц.
Итак, здесь мы рассмотрели три основных графических формата, использующихся для вставки изображений на страницы сайтов. Это форматы gif , png и jpg . Удачи Вам в работе с графикой.
Формат графического файла на Web-странице
Требования к красоте и выразительности оформления Web-страниц находятся в постоянном противоречии с техническими возможностями современного Web-хостинга. Поэтому проектировщик сайта должен стать посредником между дизайнером и пользователем и строго выдерживать равновесие между визуальной привлекательностью и разумной скоростью доставки информации в Сети. Чтобы успешно решать эту проблему, необходимо знать все используемые в Интернете графические форматы, понимать различия между ними, области применения и особенности использования.
Чтобы разобраться с большим количеством форматов и протоколов, принятых в Интернете, и построить собственную страницу, необходимо отобрать то, что является самым подходящим для ваших конкретных целей. Некоторые форматы могут быть специфичны только для одного браузера, а другие потребуют специального внешнего модуля. Мы выбрали из всего многообразия форматов только те, которые наиболее часто используются авторами популярных сайтов и принимаются пользователями.
GIF и JPEG — это два наиболее популярных графических формата, которые давно стали фактическими стандартами для использования на WWW. Оба достаточно универсальны, читаются большинством браузеров и не требуют специального программного обеспечения (или дополнительных модулей). GIF и JPEG — растровые форматы изображения, что, соответственно, определяет фиксированный формат (разрешение) при отображении таких картинок на экране. При попытке масштабирования (предусмотренного в некоторых браузерах) растровые (пиксельные) изображения значительно теряют в качестве. Для 8-разрядного (256-цветового) формата GIF, кроме того, серьезной проблемой является выбор цветовой палитры.
Векторные графические форматы значительно более привлекательны для использования в Сети. В отличие от точечных рисунков векторная графика основана на математическом (геометрическом) представлении данных. Такие изображения значительно меньше по объему хранения/передачи, легко масштабируются и практически не теряют в качестве при любых преобразованиях. К сожалению, векторные форматы еще малоупотребимы в Интернете, но стандарты уже сформированы и должны заинтересовать проектировщиков. 1
Несколько векторных стандартов было предложено сравнительно недавно, а форматы PGML и VML в настоящее время рассматриваются консорциумом W3C (World Wide Web Consortium). Однако фирма Macromedia, продвигающая VML, давно открыла свой векторный формат Shockwave Flash другим разработчикам и реализовала дополнительные модули для просмотра графики в этом формате для популярных браузеров.
Однако не для всех применений новые средства — обязательно лучшие. Самыми распространенными изображениями, публикуемыми в Интернете, до сих пор являются цифровые фотографии, рисунки и отсканированные картинки, которые весьма трудоемко, да и вряд ли целесообразно переводить в векторный формат.
Поэтому выбор формата в конечном счете зависит от ваших задач, и то, какие изображения больше соответствуют вашей целевой аудитории, решать только вам.
Далее мы поможем вам определиться с выбором растрового формата — GIF, JPEG или PNG, познакомим с новыми векторными форматами — PGML и VML и дадим некоторые рекомендации по их использованию.
GIF — формат для дизайна
Фирма CompuServe первоначально предназначала свой формат GIF для интерактивных приложений в условиях ограниченных возможностей стандартной графики на персональном компьютере. Это был изначально 4-, а затем и 8-разрядный растровый формат с заданием цветовой палитры, который поддерживал максимум 256 цветов. Одно из существенных преимуществ формата — то, что изображения могут быть индексированы к определенной палитре (набору цветов), в то время как JPEG-изображения не могут «привязываться» к палитре и их «правильное» отображение не всегда возможно. Это свойство особенно важно для тех разработчиков, которые используют индексацию палитры, чтобы оптимизировать передачу изображений для всех без исключения платформ (будь то PC, Mac, Web-TV или другие), независимо от того, с какой глубиной цвета работает та или иная система. Добиться подобной универсальности позволяет ограниченная палитра в 216 цветов, которая включает все общие цвета, используемые как в Windows, так и, например, в MacOS. Проектирование сайта в универсальной палитре гарантирует непротиворечивое, кроссплатформное и не зависящее от используемого оборудования отображение. Кроме того, GIF-формат использует схему сжатия без потерь (с простым алгоритмом кодирования повторов: последовательность байтов одного цвета заменяется на слово из двух байтов, один из которых содержит образец закраски, а второй определяет количество повторений), так что графические данные в этом формате не теряют информации в процессе сжатия и восстановления.
Однако именно из-за таких встроенных цветовых ограничений формат GIF может применяться только для тех изображений, которые имеют ограниченное количество цветов, — типа черно-белых схем или же тех, что содержат большие области одного цвета, — типа мультипликационных кадров или цифровых рисунков с однотонной заливкой. Конечно, вы можете сохранить любое изображение в формате GIF, применив так называемое сглаживание цветовых тонов (dithering) и получить, таким образом, достаточно приличное качество, но в этом случае вы рискуете «нарваться» на значительное увеличение размера файла после применения вышеописанной компрессии с запоминанием повторов (в вырожденном случае, когда в изображении не присутствует ни одного смежного повтора, вы получите увеличение файла ровно в два раза по сравнению с некомпрессированным оригиналом).
Таким образом, основные преимущества GIF-формата — это использование сжатия без потерь и экономное сохранение сплошных областей цвета с четкой границей и строгими цветовыми переходами. Формат JPEG отличается от описываемого тем, что в зависимости от уровня сжатия сплошные области там разрушаются и резкие переходы цветов сглаживаются или размываются. 2
Основной критерий выбора формата GIF: если вы сами нарисовали в графическом пакете типа Photoshop или Painter картинку, которая имеет большие области одного цвета, или обработали существующее изображение и хотите сохранить высокую контрастность (необходимую, например, при отображении текста), то производите сохранение именно в этом формате (прежде всего это касается черно-белых или бедных цветом рисунков).
Для фотографий, видеокадров или других полноцветных изображений с использованием гладких цветовых переходов (градиентов) используйте формат JPEG.
Важно не забывать еще и то, что если вы пытаетесь сохранять изображения с непрерывным тоном в формате GIF, то вам, вероятно, придется отбросить так много информации в процессе подготовки изображения (при преобразовании его к фиксированной палитре), а применяемый в GIF метод компрессии окажется настолько неэффективным, что вы проиграете еще и материально (и по трудозатратам, и по объему файла).
Кроме всего прочего в формате GIF предусмотрено так называемое чересстрочное появление (Interlaced), которое помогает пользователям с медленными каналами в самом начале приема оценить содержание картинки (эффект похож на постепенную прорисовку нерезкой картинки) и время, необходимое на ее полную передачу, и в результате принять решение, стоит ли продолжать прием или лучше от него отказаться. Впрочем, в отличие от прогрессивного JPEG здесь эффект, скорее, психологический, нежели реальный (см. рис.).
Также следует помнить об одном важном преимуществе GIF-формата, без которого в некоторых случаях невозможно обойтись даже при всех его недостатках, — это поддержка прозрачности (расширение GIF89a), которая дает возможность отображать силуэт с непрямоугольными контурами на уже существующем фоне. Прозрачность в формате GIF реализована примитивно — один цвет (обычно фоновый) назначается прозрачным. Это преимущество часто используется при создании кнопок и пиктограмм при оформлении страницы (JPEG не предлагает никакой поддержки прозрачности).
В заключение можно сказать следующее: GIF — наилучший выбор для достижения эффективного компромисса между существующим оборудованием и программным обеспечением, а возможность индексирования 8-разрядного GIF-изображения до 216 универсальных цветов имеет существенное значение, когда ваши изображения предназначаются для показа на разнообразных браузерах и неизвестных платформах.
JPEG — формат для фотографий и видеокадров
Формат JPEG получил свое название от аббревиатуры Joint Photographic Experts Group сommittee (объединенного комитета экспертов по фотографии), который и создал этот стандарт в конце 80-х — начале 90-х годов. Формат JPEG основан на алгоритме сжатия с потерями (дискретном косинусоидальном преобразовании), средствами которого ваше изображение разбивается на области (обычно это квадраты 8Ѕ8 пикселов), внутри которых распределение цветов заменяется на математическую функцию и хранятся только коэффициенты этой функции, позволяющие восстановить ее вид. Естественно, вы столкнетесь с некоторой потерей качества (в зависимости от сложности функции, применяемой для замены изображения) и после восстановления получите уже не реальную картинку, а ее математический «суррогат». Однако в зависимости от качества вашего оригинала и степени сжатия потеря качества может быть совершенно незаметна зрителю. Но главное преимущество JPEG-формата по сравнению с GIF заключается в том, что, в то время как GIF — только 8-разрядный (256-цветный), JPEG — 24-разрядный и может отображать до 16,7 млн. цветовых оттенков. 3
По этой причине полноцветный JPEG, естественно, воспроизводит значительно большее количество видеоинформации, чем GIF. Этот формат лучше всего подходит для изображений реальной жизни — отсканированных картинок или цифровых фотографий, а также оцифрованных видеокадров или отрендеренных сцен трехмерной компьютерной графики.
Другое преимущество JPEG заключается в следующем: в отличие от GIF он позволяет самостоятельно задавать степень сжатия, применяемого к исходному изображению, что дает возможность выдерживать необходимое равновесие между размером и качеством.
Коэффициенты сжатия изменяются для JPEG в широких пределах — в зависимости от используемой программы редактирования изображения, однако на Web-страницах обычно применяются соотношения 10:1 или 20:1 (выраженное в пропорции по объему по отношению к исходному изображению), что обычно обеспечивает приемлемое качество. Тем не менее сжимать изображение можно и до экстремальных значений 100:1 (естественно, со значительной потерей качества).
Итак, работая с фотографией в JPEG-формате, вы имеете возможность сохранить 24-разрядное изображение с 16,7 млн. цветовых оттенков, и, несмотря на потерю качества при сжатии, оно все же значительно больше соответствует оригиналу, нежели 256-цветное GIF-представление. При этом неизбежные потери качества сильно зависят от размера, качества и типа исходного изображения.
Кроме того, JPEG позволяет определять так называемое прогрессивное отображение, то есть такое, когда при загрузке на экране сразу появляется «грубое» представление картинки, которое, по мере получения дополнительной информации, постепенно улучшается (при этом вы можете получить необходимое представление о сути подаваемого материала еще до завершения загрузки и прервать процесс на любом этапе, что значительно экономит время просмотра сетевого контента).
Эти средства вы можете использовать по желанию, и подобное поэтапное проявление может стать хорошим подспорьем в борьбе с загруженностью каналов. Единственная проблема с прогрессивным JPEG (в отличие от чересстрочного GIF) состоит в том, что старые версии браузеров могут его не поддерживать.
PNG — универсальная растровая новинка
Представитель следующего поколения растровых форматов, PNG, взял лучшие свойства и от JPEG, и от GIF и добавил свой, уникальный подход к подаче изображения, который дает возможность встроить в один файл различные версии того же самого изображения для низкого, среднего и высокого разрешений.
Формат PNG (Portable Network Graphics) — относительно новый растровый графический формат, который был одобрен как стандарт консорциумом W3C и должен постепенно заменить оба «устаревших» формата: как GIF, так и JPEG. PNG предлагает и цветовую индексацию (до 256 цветов), и поддержку как 24-, так и 48-разрядного цвета (True-Color), и работу с каналом прозрачности (альфа-каналом), к тому же он значительно более эффективен, чем традиционные форматы хранения растровых изображений. 4
Алгоритм сжатия для полноцветной картинки превосходит JPEG по качеству, а при поддержке ограниченной индексированной палитры (до 256 цветов) новый формат осуществляет компрессию без потерь на 10-30% лучше, чем та, которая реализована в GIF-формате, что делает его оптимальным для использования в любых случаях. К сожалению, новый формат не позволяет жертвовать качеством изображения в обмен на более высокую степень сжатия, как в формате JPEG.
Поддержка прозрачности в формате PNG в отличие от GIF — полноценная, то есть вы можете строить и полупрозрачные изображения или границы, поэтому проблема «чистых» границ, так трудно решаемая при использовании прозрачности в GIF-файле, здесь легко преодолима.
Однако, несмотря на все усовершенствования, предлагаемые в PNG, новый формат «заживет» только после того, как к нему обратятся проектировщики Web-сайтов и производители программного обеспечения как для визуализации изображений в новом формате, так и для подготовки их для публикации. А пока довольно трудно найти PNG-изображения где-нибудь в Интернете, несмотря на недавнее включение поддержки этого формата как в Netscape Navigator, так и в Microsoft Internet Explorer.
И хотя их последние версии и поддерживают PNG, они делают это весьма ограниченным способом. В настоящее время единственным решением для пользователей, которые хотят видеть полноценный PNG-файл, является самостоятельная установка внешнего модуля (подобного PNG Live).
Видимо, разработчики медлят, дожидаясь полного перехода пользователей к новым форматам. Что ж, здоровый консерватизм никогда не помешает, но все же мы настоятельно рекомендуем вам постепенно переходить к PNG, заменяя им, по крайней мере, все существующие применения GIF-формата.
Векторное представление
И JPEG, и GIF, и PNG — растровые форматы, основанные на дискретном (пиксельном, или точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур). Векторная графика обеспечивает значительные преимущества по сравнению с растром, особенно когда речь идет о схемах, тексте и промышленной графике (а экономичность форматов имеет огромное значение для Интернета).
Итак, первое преимущество — это значительно меньший размер векторных изображений по сравнению с точечными рисунками, потому что описывается не каждый отдельный пиксел изображения, а вся фигура целиком (например, для задания окружности необходимо передать 3-4 числа: радиус, координаты центра и, может быть, тип или толщину линии и ее атрибуты). Математические формулы, которые описывают векторное представление, занимают намного меньше места, чем индивидуальные пикселы и их атрибуты.
Другое немаловажное преимущество векторного представления — способность практически неограниченного масштабирования изображения (или детализации его частей) без каких-либо потерь в разрешающей способности или ясности изображения. Для адаптации векторного представления к той или другой палитре, платформе, оборудованию или особенностям дизайна не требуется никаких усилий; а согласование схемы сжатия и качества отображения проходит без каких-либо проблем.
Однако не всякое растровое изображение можно перевести в векторную форму (например, плохо поддаются векторизации фотографии, отсканированные картинки или растровые рисунки). Но специально подготовленные векторные рисунки (типа штриховой графики, пиктограмм, технических иллюстраций, карт, информационной графики и других, являющихся исторически векторными) просто глупо переводить в растровую форму для публикации в Интернете, что повсеместно происходит сегодня.
Проблемы с отображением векторной графики во всемирной Сети возникли оттого, что не было никакого другого способа отображения, кроме растрового, а появившийся было встраиваемый модуль для показа файлов в PDF-формате не обеспечивал должной гибкости работы и требовал хранения всего контента в одной форме — PDF. 5
Для обеспечения возможности органично встраивать векторную графику в традиционный HTML-формат без какого бы то ни было дополнительного программного обеспечения в настоящее время на рассмотрении комитета по стандартам W3C находятся два новых векторных стандарта: PGML (Precision Graphics Mark-up Language) и VML (Vector Mark-up Language). PGML поддерживается фирмами Adobe Systems, IBM, Netscape и Sun Microsystems, а VML — Microsoft, Hewlett-Packard, Autodesk, Macromedia и Visio. Оба стандарта основаны на расширениях языка разметки XML, пропагандируемого для применения в сети как преемника HTML и рекомендованного W3C к использованию в будущем.
Но в настоящее время ни один из браузеров не поддерживает никаких стандартов векторной графики, хотя дополнительные модули (Plug-ins) уже имеются. Среди наиболее популярных способов показа статических векторных изображений на Web сегодня можно выделить принадлежащий фирме Macromedia формат SWF (Shockwave Flash) и недооцененный пока формат Xara Flare.
Flare — хорошее решение, допускающее включение векторных изображений, которые позволяют практически неограниченно увеличивать уровень детализации страницы, при этом их размеры сравнимы с Shockwave Flash. Нельзя сказать, что применение дополнительных модулей для просмотра изображений так уж неудобно, но когда вы будете использовать подобные средства на ваших страницах, не забудьте предупредить об этом пользователя и дать ему возможность загрузить соответствующий модуль, прежде чем он перейдет к той странице, которая будет включать эти элементы. В ближайшей перспективе это, конечно, замедлит процесс просмотра для новых пользователей, но постепенно вы приобретете все больше приверженцев, пока соответствующие средства наконец не будут включены в очередную версию браузера и дополнительный модуль новичкам уже не понадобится. 6
Анимация, интерактивность и взаимодействие
Вообще говоря, и GIF-изображения можно оформить в виде специального стека в одном файле, и полученный «фильм» (flipbook) воспроизвести можно, создав простую растровую анимацию. И Netscape и Microsoft обеспечили поддержку «оживляемого» GIF-формата, начиная еще с третьих версий своих браузеров, так что их присутствия на Web теперь трудно избежать. Многочисленные GIF-аниматоры, позволяющие формировать подобные GIF-стеки, широко распространены (причем как коммерческие, так и общедоступные). Однако «оживление» GIF-формата может привести к неуправляемым размерам файлов, ибо каждый «уровень» такого стека — это индивидуальное GIF-изображение, так что типичные 15 кадров в секунду для компьютерной анимации могут «наплодить» несчетное число килобайтов.
В комбинации с Java или JavaScript можно создавать и интерактивную анимацию, которая будет реагировать на пользователя.
А теперь рассмотрим другие решения для Web-анимации и интерактивного взаимодействия с пользователем, причем основную роль здесь продолжает играть фирма Macromedia, давно вышедшая на рынок со своими программами Shockwave и Flash и непрерывно улучшающая свои изделия, повышая их эффективность в соответствии с запросами пользователей и проектировщиков.
Первоначально созданный как формат для Macromedia Director, Shockwave — это семейство протоколов, нацеленных прежде всего на производство интерактивного и графического содержания, создаваемого специально для использования в сети Интернет. А Shockwave Flash — это вообще уникальный инструмент и один из самых лучших способов для создания анимации и публикации ее на Web-странице. Shockwave Flash образует совсем маленькие файлы (так как использует преимущественно векторный формат представления) и по сравнению с другими форматами наиболее удобен с точки зрения подготовки.
При публикации такой анимации на ваших страницах не забудьте уведомить об этом пользователя, чтобы он заранее запасся дополнительным модулем и приготовился к томительному ожиданию загрузки. Однако последние версии — и Netscape Navigator, и Internet Explorer имеют модули просмотра для Flash-анимаций даже в базовой поставке. Фирма Netscape подтвердила, что последующие версии Navigator будут иметь такую поддержку для Flash даже на уровне кода.
Окончательное решение за вами
Итак, изменяется отношение к представлению Web-контента, появляются новые форматы данных и поддерживающие их средства разработки. Однако старые форматы (для представления графики — это GIF и JPEG) все еще достаточно популярны. Они поддерживаются практически всеми браузерами, и большинство разработчиков имеют большой опыт работы именно с ними. Важно использовать правильный формат для конкретных целей, чтобы гарантировать равновесие между качеством изображения и размерами файлов. Например, одно изображение в формате GIF может занимать больший объем и давать более низкий качественный результат, чем в формате JPEG, а для другого все будет наоборот.
Однако при представлении растровых изображений более предпочтительным становится PNG, а если вы пойдете еще дальше и попытаетесь использовать векторное изображение, то уже сегодня к вашим услугам — формат Shockwave Flash фирмы Macromedia.
Формат SWF (Shockwave Flash) — это не общеупотребительный, а внутренний векторный формат программы Flash фирмы Macromedia (см. «Уроки Macromedia Flash» на CD-ROM), поэтому для того, чтобы получить собственное изображение или анимацию, вам придется приобрести соответствующий мультимедийный пакет от фирмы Macromedia, а пользователю необходимо будет поставить дополнительный модуль для визуализации результата. Таким образом, для того чтобы просто поместить векторный рисунок на вашу Web-страницу, вам придется преодолеть целый ряд неудобств.
Тем не менее на подходе и другие векторные форматы, которые в скором времени станут стандартными.
- ПК и комплектующие
- Настольные ПК и моноблоки
- Портативные ПК
- Серверы
- Материнские платы
- Корпуса
- Блоки питания
- Оперативная память
- Процессоры
- Графические адаптеры
- Жесткие диски и SSD
- Оптические приводы и носители
- Звуковые карты
- ТВ-тюнеры
- Контроллеры
- Системы охлаждения ПК
- Моддинг
- Аксессуары для ноутбуков
- Принтеры, сканеры, МФУ
- Мониторы и проекторы
- Устройства ввода
- Внешние накопители
- Акустические системы, гарнитуры, наушники
- ИБП
- Веб-камеры
- KVM-оборудование
- Сетевые медиаплееры
- HTPC и мини-компьютеры
- ТВ и системы домашнего кинотеатра
- Технология DLNA
- Средства управления домашней техникой
- Планшеты
- Смартфоны
- Портативные накопители
- Электронные ридеры
- Портативные медиаплееры
- GPS-навигаторы и трекеры
- Носимые гаджеты
- Автомобильные информационно-развлекательные системы
- Зарядные устройства
- Аксессуары для мобильных устройств
- Цифровые фотоаппараты и оптика
- Видеокамеры
- Фотоаксессуары
- Обработка фотографий
- Монтаж видео
- Операционные системы
- Средства разработки
- Офисные программы
- Средства тестирования, мониторинга и диагностики
- Полезные утилиты
- Графические редакторы
- Средства 3D-моделирования
- Веб-браузеры
- Поисковые системы
- Социальные сети
- «Облачные» сервисы
- Сервисы для обмена сообщениями и конференц-связи
- Разработка веб-сайтов
- Мобильный интернет
- Полезные инструменты
- Средства защиты от вредоносного ПО
- Средства управления доступом
- Защита данных
- Проводные сети
- Беспроводные сети
- Сетевая инфраструктура
- Сотовая связь
- IP-телефония
- NAS-накопители
- Средства управления сетями
- Средства удаленного доступа
- Системная интеграция
- Проекты в области образования
- Электронный документооборот
- «Облачные» сервисы для бизнеса
- Технологии виртуализации
1999 1 2 3 4 5 6 7 8 9 10 11 12 2000 1 2 3 4 5 6 7 8 9 10 11 12 2001 1 2 3 4 5 6 7 8 9 10 11 12 2002 1 2 3 4 5 6 7 8 9 10 11 12 2003 1 2 3 4 5 6 7 8 9 10 11 12 2004 1 2 3 4 5 6 7 8 9 10 11 12 2005 1 2 3 4 5 6 7 8 9 10 11 12 2006 1 2 3 4 5 6 7 8 9 10 11 12 2007 1 2 3 4 5 6 7 8 9 10 11 12 2008 1 2 3 4 5 6 7 8 9 10 11 12 2009 1 2 3 4 5 6 7 8 9 10 11 12 2010 1 2 3 4 5 6 7 8 9 10 11 12 2011 1 2 3 4 5 6 7 8 9 10 11 12 2012 1 2 3 4 5 6 7 8 9 10 11 12 2013 1 2 3 4 5 6 7 8 9 10 11 12