<< Пред. стр.

стр. 17
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

400рх; margin-bottom: 100px;">



Совет
Для краткости можно задать размеры всех полей в атрибуте margin,
выполнив обход по часовой стрелке (сверху, справа, снизу и слева),
наподобие следующего:
<body style="margin: 200 400 100 ЗООрх;"> '
Строим Web-сайты
160


Fiie Edit View Favorites Tools




This page uses
CSS to control
the space on
all four




Puc. 26.1. Эта страница использует таблицы CSS для управления
размером пространств для всех четырех полей
ЧАСТЬ 3.
Вопросы, касающиеся изображений

Выбор правильного типа файла изображения
Оптимизация Web-изображений
Трансформация изображений с использованием
атрибутов языка HTML
Размещение внутристрочных изображений
при помощи языка HTML
Плавающие внутристрочные изображения
с использованием таблиц CSS
Разработка состояний кнопок
Создание ролловерной графики
Улучшение доступности изображений
Создание карт ссылок
Улучшение доступности карт ссылок
Использование фоновых изображений
в ячейках таблицы
Использование фоновых изображений
в CSS-разделах
Использование фоновых изображений
на Web-страницах
ГЛАВА 27.
Выбор правильного
типа файла изображения
Файлы изображений используют множество различных форматов, однако только не-
которые из этих форматов хорошо работают в Интернете. Браузеры, отображающие
графику, стремятся поддерживать наиболее распространенных типов файлов, одна-
ко, как можно предположить, браузеры не договариваются между собой о том, какие
точно типы графических файлов отображать. Браузер компании Microsoft, например,
поддерживает растровые файлы операционной системы Windows (BMP), которые не
поддерживает браузер Netscape. -
Чтобы решить, какие форматы изображений использовать на своем сайте, ответьте
на два вопроса:
1. Какие типы файлов поддерживаются всеми основными браузерами?
2. Какие из тех типов файлов создают файлы с наименьшими размерами, не
принося в жертву качество изображения?
Ответ на первый вопрос прост. Все основные браузеры отображают изображения в
форматах GIF, JPEG и PNG, поэтому нам нужно ограничить наши Web-изображения
этими тремя форматами.


<
Совет
Типы файлов GIF и PNG очень похожи. Они используются для одних и
тех же видов изображений и дают практически одинаковый размер
файла. Много лет назад основное отличие заключалось в том, что
формат GIF был собственностью компании CompuServe, а формат
PNG никогда не был чьей-либо собственностью. Однако во всем ми-
ре закончилось действие патента на использование формата GIF и
теперь формат принадлежит миру.


Ответом на второй вопрос является пугающее «Это зависит от ...». Вообще говоря,
фотографии и другие изображения, содержащие большое количество информации о.
цвете, наилучшим образом работают с форматом JPEG, а штриховые иллюстрации и
изображения с большими областями сплошного цвета лучше работают с форматами
GIF или PNG. Почему? Файлы в формате JPEG не имеют встроенной палитры или таб-
лицы цветов, которую имеют файлы в формате GIF и PNG. Палитра формата GIF или
PNG определяет, какие цвета используются в изображении, максимум числа которых
составляет 256 различных оттенков. При добавлении в палитру большего количества
цветов общий размер файла увеличивается. Поскольку фотографии обычно имеют
множество едва различимых оттенков и градаций, места для 256 цветов становятся за-
нятыми довольно быстро. В итоге вы получаете файл в формате GIF или PNG, кото-
рый выглядит зернистым, и его размер больше, чем размер соответствующего файла
в формате JPEG, поскольку его палитра полностью заполнена.
ГЛАВА 27. Выбор правильного типа файла изображения 163



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

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


Совет
Непременно перемешивайте и сочетайте типы изображений на
своем сайте. Не попадайте в западню, используя только изображе-
ния в формате JPEG или GIF. Выбирайте формат, который лучше
всего подходит для каждого конкретного изображения. Професси-
ональное программное обеспечение для работы с графикой, нап-
ример, Adobe Photoshop и Macromedia Fireworks, позволяет сравни-
вать рядом различные форматы ваших изображений, поэтому вам
не придется гадать.


Даже при этих условиях рассматривается не только число цветов, поскольку различ-
ные форматы также предоставляют различные возможности. Форматы GIF и PNG поз-
воляют определять прозрачные цвета, а формат GIF позволяет создавать анимацию.
Формат JPEG не позволяет ничего из этого, вы можете это увидеть в таблице 27.1.
И некоторые фотографии отлично выглядят в формате GIF или PNG даже с потерей
информации о цвете. Вам следует попробовать свои изображения во всех трех форма-
тах, чтобы получить наилучший Web-файл из возможных.
Табл. 27.1. Распространенные типы файлов Web-изображений

Тип Произно- Обозначает Палитра Прозрачность Ани-
сится мация
файла

джифф
GIF Graphics Interchange Есть; максимум Есть; один уро- Есть
вень прозрач-
или гифф Format (Формат гра- 256 цветов
ности
фического обмена)

JPEG джэйнег Нет
Joint Photography Нет; нет огра- Нет
Experts Group (Объе- ничения по
диненная группа экс- цвету
пертов в области фо-
тографии)

PNG пинг Portable Network Есть; максимум Есть; несколько Нет
Graphics (Переноси- 256 цветов уровней проз-
мая сетевая графика) рачности
ГЛАВА 28.
Оптимизация Web-изобраЖений
Оптимизация графического файла для Web означает максимально возможное умень-
шение размера файла, при котором качество изображения сохраняется без измене-
ний. Это - важный этап при создании Web-изображений, поскольку всегда следует
помнить о времени загрузки страниц вашего сайта. И хотя все больше и больше людей
используют высокоскоростные DSL- и кабельные линии для подключения к Интерне-
ту, обычные старые модемы для коммутируемого доступа не вышли из употребления,
и графические файлы по-прежнему являются самым узким местом пропускной с по-
собности. Независимо от того, сколько изображений используется на вашем сайте, вы
заметите улучшение производительности, оптимизировав изображения специально
для Интернета.
В то же время, вам не нужно уменьшать размер файла настолько, что ухудшится каче-
ство изображения. Быстро загружающиеся изображения, которые выглядят отврати-
тельно, хуже красивых изображений, которые загружаются слишком долго. Не сде-
лайте ошибку: ваши посетители хотят видеть изображения. Посадите их перед чем-
нибудь, что напоминает телевизор, и они будут ожидать просмотра картинок. Помни-
те, что Интернет не мог превратиться в основное направление до тех пор, пока не пе-
решел от страниц с педантичным HTML-текстом к графическому дизайну с полноц-
ветными изображениями. Если ваши изображения выглядят ступенчатыми, низкого
качества, зернистыми или неразборчивыми, посетители сделают соответствующие
выводы о качестве информации на вашем сайте.



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


В этой главе предложено несколько способов оптимизации файлов изображений
для Web с использованием практически любого самого элементарного приложения,
предназначенного для редактирования графических файлов. Если ваше приложе-
ние для работы с графикой не позволяет выполнять представленные операции, по-
ра подумать о новой версии программного обеспечения. Здесь нет необходимости
брать банк. Программа Adobe Photoshop Elements, упрощенная версия дедушки
Photoshop, является отличным инструментом для работы с Web-изображениями, и
стоит всего $100. Еще одной хорошей программой является программа Jasc Paint
Shop Pro, которая стоит почти столько же. Если разработка Web-сайтов - это ваша
профессия, попытайтесь уговорить вашего работодателя на покупку полной версии
программы Photoshop или Macromedia Fireworks. Цена на эти приложения больше, но
они стоят того.
ГЛАВА 28. Оптимизация Web-изображений 165


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



Оптимизация разрешения
Разрешение файла изображения определяет размер его пикселов: чем выше разреше-
ние, тем меньше размер пикселов и, следовательно, точнее изображение. Однако чем
больше пикселов используется в изображении, тем больше становится его размер и
тем больше времени необходимо для его загрузки.
В мире фотографических изображений более высокое разрешение всегда лучше, чем
более" низкое. Но в случае с Web-изображениями возможности отображения экранов
мониторов накладывают жесткое ограничение на разрешение изображений. Монито-
ры компьютеров, работающих под управлением операционной системы Windows,
отображают информацию с разрешением 96 ppi (пикселов на дюйм), что, на самом де-
ле, является достаточно низким разрешением. Мониторы компьютеров Macintosh
отображают информацию с еще более низким разрешением, 72 ppi. В духе кросс-плат-
форменной совместимости, разрешение72 ppi стала стандартом для Web-изображе-
ний, хотя подавляющее большинство мониторов могут отображать информацию с
немного более высоким значением, 96 ppi.




Определение
Разрешение файла изображения определяет размер его пикселов:
чем больше разрешение, тем меньше пикселы и резче изображение.



Это означает следующее: на экране изображения с высоким разрешением выглядят не
лучше изображений, имеющих низкое разрешение - 72 или 96 ppi. Если ваши
Web-изображения имеют фотографическое качество, скажем, 300 или 600 ppi, вся эта
дополнительная четкость является мертвым грузом. Посетители не заметят никакой
разницы на экране, что и показано на рисунке 28.1. Зачем заставлять посетителей заг-
ружать изображения с высоким разрешением, когда с тем же успехом работают быст-
рее загружающиеся изображения с низким?
Строим Web-сайты
166


Часто задаваемые вопросы
Почему оптимизированные Web-изображения выглядят зернис-
тыми при распечатке?
На экране изображение с разрешением 72 ppi выглядит резким и
четким, однако это происходит потому, что мониторы являются ус г-
ройствами вывода с достаточно низким разрешением. Старая доб-
рая бумага на самом деле работает с устройством вывода с гораздо
более высоким разрешением. На одном и том же пространстве на
печатной странице можно уместить больше точек, поэтому изобра-
жения с низким разрешением более отчетливо показывают свою
зернистость.




Puc. 28.1. Изображение слева имеет разрешение 600 ppi,
а изображение справа - 72 ppi - более, чем в восемь раз, низкую.
Однако оба изображения выглядят на экране совершенно одинаково,
поскольку мониторы имеют относительно низкое разрешение


Совет
Изображения, специально предназначенные для печати посетителя-
ми, должны быть оптимизированы для печати, а не для экрана. Одна-
ко не все, кто посетит ваш сайт, будут распечатывать эти изображе-
ния. Чтобы улучшить производительность сайта, не встраивайте
изображения с высоким разрешением в страницы. Вместо этого ис-
пользуйте изображения с низким разрешением, оптимизированные
для экрана, и включите ссылки на изображения с высоким разреше-
нием, имеющие фотографическое качество, для тех, кому они нужны.
Изображения с высоким разрешением не выглядят по-другому на эк-
ране, однако они гораздо лучше перенесутся при печати, чем их ко-
пии с низким разрешением.
ГЛАВА 28. Оптимизация Web-изображений 167

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



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



Совет
При уменьшении изображения пропустите изображение с изменен-
ными размерами через фильтр, увеличивающий резкость, чтобы по-
казать подробности.


И хотя меньшие изображения лучше, не используйте браузер для изменения размеров
изображения. В языке HTML вполне выполнимо превратить изображение с размерами
300 на 150 пикселов в, скажем, изображение с размерами 60 на 30 пикселов, настроив
значения атрибутов w i d t h и h e i g h t тега img (за более подробной информацией обра-
титесь к главе 29). Но если вы желаете отобразить изображение с размерами 60 на
30 пикселов, запустите свой графический редактор и сделайте копию изображения с та-
кими размерами. Иначе браузеру все равно придется загружать больший файл изобра-
жения с размерами 300 на 150 пикселов, и вы ничуть не уменьшите время загрузки.
Аналогично, не вставляйте в файл изображения чрезвычайно большие объемы пусто-
го пространства. Вместо этого обрежьте изображение до размеров, которые вы жела-
ете отобразить, и включите пустое пространство в дизайн страницы.



Оптимизация палитр файлов
в форматах 6IF и PNG
Как вы уже знаете из главы 27, файлы в форматах GIF и PNG имеют встроенную палит-
ру, в которой может храниться до 256 цветов. Чем больше цветов хранится в палитре,
тем больше размер файла изображения. Если вашему изображению в формате GIF или
PNG необходимы все 256 цветов, так тому и быть. Однако для большинства файлов в
форматах GIF и PNG можно избавиться от некоторых цветов, незначительно повлияв
на качество изображения.
Строим Web-сайты
168

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



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




Оптимизации сЖатия изображении
6 формате JPE6
Изображения в формате JPEG не имеют палитр, которые имеют изображения в фор-
мате GIF и PNG. Вместо этого формат JPEG сжимает информацию в изображении,
делая ее более эффективной и отбрасывая информацию, которую человеческий глаз
скорее всего не заметит. Слишком большое сжатие избавляется от огромного количе-
ства информации, и качество изображения заметно ухудшается.
Хорошие графические приложения позволяют указывать степень сжатия файла в
формате JPEG путем настройки его качества. Не существует твердого правила для
настройки наилучшего качества. Все зависит от количества информации в файле в
формате JPEG.


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


Для оптимизации файла в формате JPEG поиграйте с уровнем сжатия и посмотрите,
какое значение качества подходит лучше всего. Обычно существует точка, за кото-
рой качество изображения существенно ухудшается. Когда вы достигли этой точки,
просто вернитесь назад на один уровень сжатия.
ГЛАВА29.
Трансформация изображений
с использованием атрибутов языка HTML
Браузеры, поддерживающие изображения, могут делать больше, чем просто отобра-
жать графику. Они также могут изменять их физические размеры.
При добавлении изображения на страницу, как правило, указываются точные разме-
ры изображения с использованием атрибутов width и height тега img, как показано
на рисунке 29.1.
Листинг 29.1. Просмотр исходного кода для рисунка 29.1
<img src = "logo. jpg" width="150" height=-"75">




Рис. 29.1. Укажите точные размеры изображения в теге img,
и изображение появится на странице в точности, как вы разработали его
в приложении, предназначенном, для работы с графикой




Рис. 29.2. Изменив значения атрибутов width и height,
вы трансформируете изображение при помощи языка HTML
170 Строим Web-сайты

Но кто сказал, что вы обязаны указывать реальные размеры изображения? Можно
трансформировать изображение, растянув его ширину или высоту, как показано на
рисунке 29.2.
Листинг 29.2. Просмотр исходного кода для рисунка 29.2
<img s r c = " l o g o . j p g " width="300" height="35">

И пропорционально увеличив или уменьшив значения атрибутов width и height,
можно изменить размеры изображения, как показано на рисунке 29.3.
'Листинг 29.3. Просмотр исходного кода для рисунка 29.3
<img s r c = " l o g o . j p g " width="300" height="150">




mylOCO


Рис. 29.3. Пропорционально увеличив или уменьшив значения атрибутов width

<< Пред. стр.

стр. 17
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>