Навигация

Партнеры


Комментариев: 0
 (голосов: 2)

CSS - Часть 17

Формат GIF


Дедушка всех графических форматов - GIF - существует в той или иной форме уже почти 20 лет. В нем применяется метод сжатия без потери информации, называемый LZW, лучше всего он подходит для сохранения изображений, в которых есть обширные
области, закрашенные одним цветом.
Хотя в формате GIF информация сохраняется без потерь, но в нем используется так называемый индекс цвета, а это палка о двух концах. В одном изображении может быть не больше 256 цветов, поэтому применение этого метода ограничено лишь
изображениями, содержащими мало цветов. Зато для изображений, содержащих меньше 256 цветов, можно использовать меньший индекс цвета, что уменьшает окончательный размер файла.
Изображения с большим числом цветов можно сохранить в формате GIF, но ценой утраты информации о цвете, в результате чего мы приходим к сжатию с потерей информации.
Формат GIF поддерживает 1-битовую прозрачность. Это означает, что пиксель может быть либо полностью прозрачным, либо полностью непрозрачным. Если вы привыкли к графическому редактору, работающему со слоями и обеспечивающему многоуровневую альфа-прозрачность, то подобное ограничение раздражает. Но даже такой режим полезен, если заранее известно, на каком фоне будет отображаться
GIF-файл. Кроме того, формат GIF поддерживает простую покадровую анимацию и постепенную загрузку (эта техника называется черезстрочной разверткой). Правда, и то и другое приводит к увеличению размера файла.

Формат JPEG


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

Формат PNG


В этом формате, во многих отношениях похожем на GIF, есть два режима хранения цветов. PNG-файлы с 24-битовой глубиной цвета велики по размеру, пожалуй, даже
слишком велики, зато не приводят к потере информации. Сохраняются абсолютно все детали. В файлах же с 8-битовой глубиной, как и в GIF, применяется индекс
цвета, и во многих случаях степень сжатия оказывается даже выше, чем при сохранении того же изображения в формате GIF с эквивалентными параметрами.
Благодаря наличию двух режимов глубины цвета формат PNG теоретически можно использовать для хранения любых изображений; на практике же лучше ограничиться только графикой с небольшим числом цветов, для которой обычно применяется формат GIF, а изображения фотографического качества сохранять в формате JPEG. Хотя в формате PNG с 24-битовой глубиной цвета информация не теряется, но достигается это ценой увеличения размера файла.
Поддерживается также два режима прозрачности: 1 -битовый и 8-битовый. Первый не отличается от того, что есть в GIF, второй же обеспечивает все 256 уровней аль-
фа-канала. 8-битовый режим прозрачности интересен тем, что можно заранее не думать, на каком фоне будет отображаться PNG-файл. К сожалению, полезность
этого режима ограничена в силу слабой поддержкисо стороны браузеров. В частности, Microsoft Internet Explorer для Windows плохо справляется с альфа-прозрачностью в PNG-файлах.

Вопросы прозрачности


Несмотря на наличие огромного числа графических форматов, в Web нашли применение только три вышеперечисленных. JPEG не поддерживает прозрачность вовсе, в GIF реализована лишь 1-битовая прозрачность, а 8-битовая прозрачность, предлагаемая
форматом PNG, не поддерживается большинством современных браузеров. Проблема не нова и не связана непосредственно с CSS. В прошлом десятилетии,
чтобы использовать эффект прозрачности в Web, вообще приходилось прорисовывать изображения заранее и сохранять их в том или ином формате, не поддерживающем прозрачность.
В «Японском саде» Кавачи выводит текст в колонках белого цвета, кажущихся прозрачными, поскольку они перекрывают изображение зеленых листьев.
Формат GIF не допускает такого эффекта, тем не менее применяется именно он. Вместо того чтобы требовать поддержки прозрачности от браузера, Кавачи воспользовался слоями Adobe Photoshop, и сохранил уже готовые изображения в GIF-файлах. Карт - фотоинки, выступающие фоном, никак не задействуют прозрачности, именно в таком виде они и были подготовлены. Эффект перекрытия одного цвета другим достигнут лишь умелыми манипуляциями графикой в Photoshop. При использовании прозрачных GIF-файлов нужно быть особенно внимательными; так как GIF обеспечивает только один уровень прозрачности, то полупрозрачные пиксели должны отображаться на конкретном фоне, именуемом подложкой (matte color). Подложка должна быть точно того же цвета, что и фон, на котором будет выводиться GIF-файл на веб-странице, в противном случае будет отчетливо видна каемка из пикселей не того цвета.
В Web для создания эффекта прозрачности обычно применяется один из двух рассмотренных выше методов, поскольку они надежны и испытаны временем.
Альфа-прозрачность, имеющаяся в PNG, могла бы открыть новые возможности, но отсутствие поддержки со стороны Internet Explorer делает эти мечтания тщетными. Или все-таки нет?
Если просто включить прозрачный PNG-файл в дизайн, то в Internet Explorer он будет выглядеть некрасиво, но есть разные хитрости, позволяющие эту проблему обойти. Правда, они работают только для Internet Explorer, но ведь работают же.

Приемы оптимизации


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

Формат GIF


Для оптимизации GIF вы начинаете с небольшого числа цветов и увеличиваете его до достижения пристойного результата. Начните с 8 цветов, потом попробуйте 16, 32, 64 и так далее, пока не будете удовлетворены. Для некоторых изображений требуется
256 цветов (или даже больше, тогда придется обратиться за помощью к JPEG), другие же не отличить от оригинала даже при использовании всего 8 или 16 цветов.
На размер GIF-файла влияют и другие факторы. Например, с помощью псевдосмешения цветов (dithering) можно заполнить область одного цвета узором из точек близких цветов - в результате достигается иллюзия наличия большего числа цветов, чем есть в действительности. Но применение этой методики снижает эффективность сжатия. Если вместо псевдосмешения просто увеличить число цветов в палитре, то размер файла
может получиться даже меньше. В Photoshop сравнительно недавно появилась возмож-
ность сохранять изображения в GIF-файлах с потерей информации. Как бы сильно вы ни сжали файл предварительно, включение этого режима обычно позволяет еще больше сократить размер - конечно, за счет качества. При очень небольшом коэффициенте потери качества - скажем, 5-6 процентов - размер файла
часто удается уменьшить на 20-30 процентов.

Формат JPEG


Оптимизация JPEG - гораздо более простая процедура. В графическом редакторе обычно имеется ползунок, с помощью которого задается уровень качества.
Чем выше качество, тем больше файл; чем качество ниже, тем файл меньше. Для начала задайте невысокое качество и постепенно увеличивайте его, пока
изображение не будет выглядеть прилично.
Современные браузеры поддерживают и другие возможности формата JPEG. Оптимизированное изображение дает чуть более высокий коэффициент сжатия, чем по
умолчанию. JPEG с прогрессивной разверткой лучше применять для больших фотографий, при этом размер файла несколько увеличивается. Размывание (blur)
изображения также позволяет еще уменьшить файл.

Формат PNG


Оптимизация 8-битового PNG-изображения мало чем отличается от аналогичной процедуры для GIF: вы можете выбрать число цветов и включить режим псев-
досмешения. Оптимизировать 24-битовое PNG-изображение вообще нельзя, приходится ограничиваться тем сжатием, которое заложено в самом формате.

Трудный выбор


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

Революция!
Включение изображений в таблицу стилей

Графика играет важную роль для передачи настроения, задания тональности и привле-
чения взгляда зрителя. Не менее важны правильные способы включения графики в со-
став страницы.
Как первая автоматная очередь на тихом до той поры поле боя, доминантный образ сразу же привлекает внимание. Осознавая выразительную силу начальной иллюстрации, Дэвид Хелльсинг обратился к старым пропагандистским плакатам и таким приземленным источникам изображений, как намокшая бумага, чтобы задать нужную ему тональность. Кровь и краска, грязь и звезды - составные части «Революции» - гарантируют пронизывающий, берущий за душу визуальный эффект.
Ключом к дизайну было соблюдение баланса: в противовес военным и политическим ассоциациям, вызываемым заголовком, Хелльсинг выбрал спокойное и легкое оформление области контента. Для создания объектов и типографских эффектов он воспользовался программой Adobe Illustrator, а затем объединил все вместе в Adobe Photoshop.
Практическое применение
Разрабатывая дизайн страницы с помощью CSS, нужно придумать какой-то способ включения таких хорошо проработанных изображений, как заголовок в работе Хелльсинга. Дизайнера, привыкшего к тегу img, знакомство с исходным текстом сайта Zen Garden приведет в замешательство, поскольку механизм вставки
графики неочевиден. Понятно, что вся работа возложена на CSS-файл, но как именно это делается?
Есть несколько способов связать карт - фотоинку с элементом с помощью таблицы стилей, но лишь один из них достаточно хорошо поддерживается на практике фоновые изображения. Чтобы присоединить карт - фотоинку, скажем, к тегу h i в Zen Garden, применяется довольно простой синтаксис: нужно задать путь к файлу картинки, его позицию и способ повтора (если его вообще нужно повторять):

hi {
background: url(path/to/image.gif) left top
no-repeat;



Если задан атрибут n o - r e p e a t , то, скорее всего, для изображения необходим объемлющий элемент с точно заданными размерами, за который оно не должно
выступать. Если не заданы ширина w i d t h или высота h e i g h t , то (если, конечно, изображение не совсем крохотное) высоты текста окажется недостаточно, что-
бы вместить всю карт - фотоинку, в результате чего она обрежется. В большинстве случаев следует указывать размеры исходного элемента, достаточные для всего фонового изображения:
hi С
background: url(path/to/image.gif) left top
no-repeat;
width: 400px;
height: 20px;



Подстановка изображения


He всегда желательно оставлять текст поверх фонового изображения. Во многих вариантах дизайна Zen Garden изображения подставляются вместо различных
заголовков и скрывают текст.
В март - фотое 2003 года Дуглас Боумен опубликовал на своем сайте Stopdesign статью, в которой описывалась техника замещения текста фоновым изображением ради
улучшения типографских черт страницы. Позже этот метод получил название «подстановка изображения Фарнера» (Fahrner Image Replacement - FIR) в честь
Тода Фарнера (Todd Fahrner), который первым предложил его. Основная идея проста: поместите текст внутрь элемента span, скройте содержимое этого span и свяжите изображение с самим элементом. Вот пример подобной разметки:

<hl id="pageHeader"xspan>css Zen Garden</span></
Теперь для подстановки изображения достаточно при-
менить такую таблицу стилей:
#pageHeader {
background: url(lemonfresh.gif) top left norepeat
;
width: 400px;
height: 20px;
}
tpageHeader span {
display: none;
}


Любой span внутри элемента #pageHeader будет полностью скрыт от браузера, если применить к нему свойство d i s p l a y : none или v i s i b i l i t y : hidden.
Хелльсинг попробовал и то и другое - с одинаковым результатом. Этот прием очень популярен, не будь его, сам сайт Zen Garden вряд ли состоялся бы. Подстановка изображений играет фундаментальную роль в обеспечении максимальной гибкости дизайна на основе CSS.

Чем грозит подстановка изображений


В оригинальном варианте техники подстановки изображений, в котором использовалось свойство d i s p l a y : none, ставилась задача не просто заменить текст, но сделать это разумно. Компьютер не может прочитать текст, нарисованный на карт - фотоинке, если ему немного не помочь. Если бы карт - фотоинка не сопровождалась альтернативным описанием с помощью атрибута a l t , то элемент img был бы вообще бесполезен для поисковых систем типа Google и для альтернативных программ представления страницы, не способных прорисовывать изображения
(например, программ чтения с экрана, которые воспроизводят содержимое экрана голосом). Но, поскольку FIR помещает изображение поверх текста, уже имеющегося
в HTML-документе, то все должно бы работать.
Однако выявилась проблема. Google может прочитать скрытый текст, а вот некоторые программы чтения с экрана не могут. Схема FIR задумывалась для того, чтобы предоставить доступ к описанию изображения незрячим пользователям, но в некоторых случаях она просто не работает. Кроме того, если пользователь
отключает показ графики, но оставляет CSS включенным, то браузер вообще ничего не покажет. Ну и, наконец, дополнительные span тоже что-то «весят», это,
конечно, небольшая проблема, но все-таки...

Улучшенная методика


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

Схема Леа-Лэнгбриджа


Симус Леа (Seamus Leahy) и Стюарт - фото Лэнгбридж (Stuart Langbridge) независимо открыли метод, позволяющий избавиться от лишних span и визуально скрыть текст,
оставив его в то же время доступным программам чтения с экрана. К сожалению, из-за ошибок в реализации модели прямоугольных областей в версиях Internet
Explorer для Windows младше 6.0 пришлось придумывать специальные обходные пути для этих браузеров.

Разметка
<h3 id="header">I like cola.</h3>
Таблица стилей
#header {
padding: 25px 0 0 0;
overflow: hidden;
background-image: url(cola.gif)
background-repeat: no-repeat;
height: Opx !important;
height: /**/:25px;






css



png


png

png

Добавить статью в:
0



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



Поиск

***

Онлайн
Всего на сайте: 38
Гостей: 20
Пользователи: vokolokosa, zrEquigue
Роботы: robot Bot, Google Bot, robot Bot, robot Bot, Google Bot, crawl Bot, robot Bot, Google Bot, robot Bot, robot Bot, robot Bot, robot Bot, robot Bot, Yandex Bot, robot Bot, robot Bot

20-ка посетителей: vokolokosa, tirepohadel92, zrEquigue, korenok.19.j1Bep, bvthoumb, ZeleclulseFaf, Briaxx56nAvant, BulgarianGib, androsov.20.5Bep, ievekikemaxie, YourTut, ScottSkivy, Stephenniz, AgnesAccony, zjExifide, wurezorafer47, 1994.platoneizBep, Michaelgutle, urlekxTet, Koaress


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги