Создаем, программируем, шлифуем и раскручиваем web-caйт. Серия Быстро и легко - Алексеев Ю.М.
Скачать (прямая ссылка):
'' ..' У' '''.;::,*.;г;;*л! v. .;; "Z1 ,,Ii л
ГЛАВА 9. Шлифуем и раскручиваем свой сайт
411
Стилизация изображения. Уменьшить количество используемых цветов в изображениях, содержащих фотографические сюжеты, возможно, применив стилизацию фотографии. Для этого используются такие приемы, как тонирование изображения и применение художественных фильтров, имитирующих рисунки. Фотографии, обработанные таким
способом, будут сжиматься лучше и требовать палитру, содержащую менее 256 цветов.
Изменение размеров изображения. Этот метод оптимизации основан на изменении'
размеров рисунка средствами браузера. Его нельзя применять к обычным рисункам, но он очень хорошо подходит для рисунков, состоящих из элементов типа линий и однородных областей. Допустим, нам понадобился рисунок, представляющий собой черный
квадрат размером 100x100 пикселов. Для уменьшения размера файла достаточно сделать так называемый однопикселный, т.е. размером 1x1 пиксел, рисунок GIF черного цвета и, как обычно, вставить его в HTML-документ, но размеры картинки указать те, что нужны нам - 100x100. Браузер сам растянет наш рисунок до нужных размеров, и таким образом будет достигнута значительная экономия в объеме файла. Подобным. же образом можно использовать рисунки других цветов, но наибольшую пользу может
принести прозрачное однопикселное изображение GIF. С его помощью удобно задавать «пустышки» на страницах, абзацные отступы, фиксировать минимальную ширину или высоту таблицы и делать другие полезные вещи.
Методом изменения размеров очень удобно создавать графические разделительные линии. Достаточно нарисовать ее сечение в виде квадрата со стороной в один пиксел, а в HTML-документе указать нужную ширину линии или высоту, если линия вертикальная.
Фрагментарная оптимизация. Фрагментарная оптимизация применяется в случае, если
у вас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты, которые можно поместить в таблицу. Тогда в браузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка оптимизируется отдельно. Для
фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов
или сохранить в формате JPEG. Этот способ позволяет уменьшить объем, занимаемый
исходным файлом, примерно в 2-3 раза, в зависимости от конкретного изображения. Кроме того, изображение будет появляться на экране более равномерно, так как все фрагменты будут загружаться параллельно. если количество фрагментов превы-
сит 10, то возможного выигрыша и не получится, так как каждый фрагмент должен будет хранить свою копию палитры и служебной информации.
Оптимизация' «прозрачных» изображений. Формат GIF позволяе? сохранять так называемые «прозрачные» изображения. На самом деле, GIF не поддерживает альфа-канал, в котором обычно хранится информация о прозрачности. Он лишь позволяет назначить одному любому цвету в палитре атрибут прозрачности. Когда браузер рисует на экране
такое изображение, то, встречая «прозрачный» пиксел, он просто игнорирует его и не показывает на экране. Само по себе это хорошо, но в случае использования метода сглаживания краев изображения (anti-aliasing) и последующего сохранения в формате GIF
возникает проблема появления ореола вокруг прозрачного изображения, если GIF показывается на фоне, отличном от того, на котором происходило сглаживание и который стал прозрачным. Единственным способом уменьшения этого эффекта является назначение прозрачности цвету, близкому к цвету фона, на котором будет использоваться GIF, и проведение сглаживания на этом же фоне.
412_Быстро и легко создаем, программируем и раскручиваем Web-сайТ ¦
Использование чересстрочной развертки. Версия GIF89a позволяет сохранять файлы с чересстрочной разверткой. При использовании этого способа строчки, составляющие изображение, перемежаются, и при загрузке браузер вначале показывает каждую 8-ю ¦строчку, потом каждую ¦ 4-ю, каждую 2-ю, и, наконец, загружается полное изображение. ' ¦Посетитель вашей Web-страницы сможет понять, что же нарисовано на данной картинке, не дожидаясь ее полной загрузки. Это очень удобно.
Раскручиваем
Можно создать самый лучший и самый интересный Web-сайт, но если никто о нем не узнает, то все усилия окажутся бесполезными. Создать сайт и не «раскрутить» его - это все равно, что снять кинофильм и не показать его зрителям.
Под «раскруткой» или, как еще говорят, «продвижением» сайта понимается целый комплекс разнообразных мер по увеличению популярности сайта, его посещаемости и известности. Задача «раскрутки» сайта состоит не только и не столько в создании имиджа компании, сколько в привлечении на сайт посетителей. Для этого используется несколько способов.
Первый способ называется «пассивной» рекламой. Это та ситуация, когда заинтересованный потребитель сам ищет нужный ему товар. «Пассивная» реклама сводится к
