Картинка очень много значит
Картинка очень много значит Неудивительно, что графика является основой хорошего web-сайта. Сделав интернет-ресурс без использования графического оформления, не стоит возлагать серьезные надежды на то, что он будет иметь хорошую посещаемость и заинтересует кого-либо всерьез. С другой стороны, не обязательно входить в крайность и заставлять пользователей загружать тонны новых изображений, когда они соединяются с одной из ваших страниц. Эффективное использование графики является самым важным ключом к разработке хорошего сайта. В некоторых случаях хорошая графика завлекает случайных web-серферов и просто заставляет их обратить внимание на основной контент сайта. Может быть, в это будет сложно поверить, но рисовать иногда оказывается гораздо проще, чем правильно использовать нарисованное. Для того чтобы приступить к созданию эффективного сайта, нужно получше узнать, что такое изображение, как его использовать и с чем его едят. Основные понятия
Что же такое изображение? Вопрос, конечно, глупый. Но я думаю, что быстрый обзор будет полезен всем. Изображения делятся на две категории: векторные и растровые. С векторными изображениями вы могли встречаться, если когда-нибудь работали с PostScript или его старшим братом Encapsulated PostScript. Эти изображения представляют из себя закодированные математические описания векторов, что позволяет изменять их размеры без потери качества. На этом я отступлюсь от векторной графики, потому что web — это мир, где на троне восседают растровые изображения.
Растровое изображение можно представить как таблицу, где каждая ячейка является точкой со своим личным цветом. Netscape имеет ограниченую 8 bit палитру (indexed color), которая на самом деле состоит из 216 цветов. Так что 24 bit JPEG файл, просматриваемый под Netscape, далеко не будет похож на 24 bit изображение. Если вы не уверены, что посетители вашего сайта смогут просмотреть графику в True Color или просто нет необходимости в такой глубине цвета, то, наверное, имеет смысл уменьшить количество цветов (что в свою очередь существенно понизит размер файла с изображением). Попробуйте отсканировать картинку, поставив разрешение 72 dpi (разрешение монитора) с глубиной цвета в 24 bit, потом позвольте вашему графическому редактору сократить палитру. Поэкспериментируйте с разными форматами и глубиной цвета, чтобы добиться достойного качества изображения для ваших нужд. Сравните различные форматы, чтобы увидеть, где ваше изображение лучше сжимается, попробуйте уменьшить количество цветов. В заключение воспользуйтесь программами оптимизаторами (Advanced GIF Optimizer, "Save for web" в Photoshop 5 тоже неплохо оптимизирует). Даже если вы сжали изображение всего на один килобайт — это тоже результат! Мало кто станет ждать, пока загрузится страничка размером 150 килобайт или больше, особенно на наших обожаемых линиях:O(.
Технические приемы
Любой web-дизайнер знает, как грамотно создать изображения и расположить их на сайте. У каждого есть свои хитрости, для того чтобы избежать потенциальных проблем. Давайте и мы рассмотрим несколько приемов, которые, возможно, помогут вам наиболее эффективно подойти к применению графики в web.
Прием 1: Anti-Aliasing.
Если вы когда-нибудь конвертировали из PostScript в GIF, то наверняка сталкивались с этими "ободранными" (извините за выражение) краями. Как ни странно, но некоторые "кадры" не знают, как с этим справиться. Решить эту проблему можно при помощи anti-aliasing'а. Anti-Aliasing добавляет дополнительные цвета, делая грани объектов, находящихся на изображении, немного размытыми. Текст в растровом изображении всегда требует anti-aliasing'а. Учтите, что обработка посредством anti-aliasing'а добавляет новые цвета, что уменьшит впоследствии степень сжатия изображения (например, компрессия в GIF достигается за счет нахождения регионов, заполненных одним цветом), поэтому пользоваться этим приемом следует только при необходимости.
Прием 2: Transparent Images.
С выходом графического формата GIF89a появилась возможность использовать бинарную прозрачность. Благодаря этой возможности один цвет палитры изображения можно сделать "цветом прозрачности", при отображении на экране через регионы, заполненые этим цветом, будет просматриваться background. В некоторых случаях без использования таких изображений просто невозможно воплотить в жизнь задуманное оформление сайта.
Прием 3: Interlaced Images.
Иногда возникает ситуация, когда приходится показывать одно или несколько больших изображений (сложный график, карта местности) на одной странице. В таких случаях, с целью уменьшения времени загрузки, имеет смысл использовать interlaced images, так как при этом размер изображения уменьшается почти в два раза. Принцип работы интерлэйсинга очень прост — при сохранении изображения строки пикселей записываются через одну, а при выводе на экран вместо незаписанных подставляются пустые. Интерлэйсинг поддержиается форматами GIF, PNG и JPEG (при использовании progressive decode).
Прием 4: Image Maps.
Большинство начинающих web-дизайнеров не задумываются о том, что одно изображение можно связать сразу с несколькими гиперссылками (очень удобный прием для создания "шапки" сайта с элементами навигации). Как ни странно, этим приемом пользуются очень редко, наверное, людям просто нравится лишний раз пилить изображение на кусочки и потом опять соединять его в таблице. Использовать Image Maps очень просто.
• Создайте изображение и поместите его в ваш HTML документ.
<img src="kg04411a.gif">
• Добавьте параметр usemap в тэг img. Параметр usemap указывает на раздел описания регионов, связанных с изображением.kg04411b.br> <img src="kg04411c.gif" usemap="#mapdef">
• При помощи графического редактора определите координаты областей, которые вы хотите сделать активными.
• Создайте таблицу описания регионов с именем, которое вы указали в параметре USEMAP.
<MAP NAME="mapdef">
<AREA SHAPE="RECT" COORDS="0,0,100,100" HREF=file.html">
.
.
.
</MAP>
• Способ выделения (SHAPE) может быть определен как прямоугольный (RECT) [x-left, y-top, x-right, y-bottom], окружность (CIRCLE) [x-center, y-center, radius] или полигональный (POLYGONS) [x1,y1,x2,y2,x3,y3,...].
Почерпнуть больше информации об Image Maps можно на сайте www.ihip.com (Image Map Help Page).
Прием 5: Background.
Добавить background очень просто. Но, пожалуйста, будьте твердо уверены в том, что ваше фоновое изображение не бросается в глаза и контрастно по отношению к тексту, так как обратное, мягко говоря, не нравится очень многим людям, включая меня самого. Используйте "мягкие" текстуры с небольшим количеством цветов — и все будут счастливы:).
Заключение
Очень хочется верить, что этот материал поможет вам эффективнее использовать графику при создании интернет-ресурса. Ведь наш родной белорусский Интернет — это короткая, тоненькая ниточка в исполинских сплетениях Всемирной Паутины. Мы просто обязаны показать свет новым, интересным проектам и искоренить наконец мусорные сайты, созданные по схеме "накликай себе счастье". Согласитесь, каждый из нас осознает, что "всегда можно сделать лучше", главное — желание, энтузиазм и терпение!
Макс Федоткин
(AKA FrOSt DeVIL)
Frost_Devil@usa.net
(c) компьютерная газета
Что же такое изображение? Вопрос, конечно, глупый. Но я думаю, что быстрый обзор будет полезен всем. Изображения делятся на две категории: векторные и растровые. С векторными изображениями вы могли встречаться, если когда-нибудь работали с PostScript или его старшим братом Encapsulated PostScript. Эти изображения представляют из себя закодированные математические описания векторов, что позволяет изменять их размеры без потери качества. На этом я отступлюсь от векторной графики, потому что web — это мир, где на троне восседают растровые изображения.
Растровое изображение можно представить как таблицу, где каждая ячейка является точкой со своим личным цветом. Netscape имеет ограниченую 8 bit палитру (indexed color), которая на самом деле состоит из 216 цветов. Так что 24 bit JPEG файл, просматриваемый под Netscape, далеко не будет похож на 24 bit изображение. Если вы не уверены, что посетители вашего сайта смогут просмотреть графику в True Color или просто нет необходимости в такой глубине цвета, то, наверное, имеет смысл уменьшить количество цветов (что в свою очередь существенно понизит размер файла с изображением). Попробуйте отсканировать картинку, поставив разрешение 72 dpi (разрешение монитора) с глубиной цвета в 24 bit, потом позвольте вашему графическому редактору сократить палитру. Поэкспериментируйте с разными форматами и глубиной цвета, чтобы добиться достойного качества изображения для ваших нужд. Сравните различные форматы, чтобы увидеть, где ваше изображение лучше сжимается, попробуйте уменьшить количество цветов. В заключение воспользуйтесь программами оптимизаторами (Advanced GIF Optimizer, "Save for web" в Photoshop 5 тоже неплохо оптимизирует). Даже если вы сжали изображение всего на один килобайт — это тоже результат! Мало кто станет ждать, пока загрузится страничка размером 150 килобайт или больше, особенно на наших обожаемых линиях:O(.
Технические приемы
Любой web-дизайнер знает, как грамотно создать изображения и расположить их на сайте. У каждого есть свои хитрости, для того чтобы избежать потенциальных проблем. Давайте и мы рассмотрим несколько приемов, которые, возможно, помогут вам наиболее эффективно подойти к применению графики в web.
Прием 1: Anti-Aliasing.
Если вы когда-нибудь конвертировали из PostScript в GIF, то наверняка сталкивались с этими "ободранными" (извините за выражение) краями. Как ни странно, но некоторые "кадры" не знают, как с этим справиться. Решить эту проблему можно при помощи anti-aliasing'а. Anti-Aliasing добавляет дополнительные цвета, делая грани объектов, находящихся на изображении, немного размытыми. Текст в растровом изображении всегда требует anti-aliasing'а. Учтите, что обработка посредством anti-aliasing'а добавляет новые цвета, что уменьшит впоследствии степень сжатия изображения (например, компрессия в GIF достигается за счет нахождения регионов, заполненных одним цветом), поэтому пользоваться этим приемом следует только при необходимости.
Прием 2: Transparent Images.
С выходом графического формата GIF89a появилась возможность использовать бинарную прозрачность. Благодаря этой возможности один цвет палитры изображения можно сделать "цветом прозрачности", при отображении на экране через регионы, заполненые этим цветом, будет просматриваться background. В некоторых случаях без использования таких изображений просто невозможно воплотить в жизнь задуманное оформление сайта.
Прием 3: Interlaced Images.
Иногда возникает ситуация, когда приходится показывать одно или несколько больших изображений (сложный график, карта местности) на одной странице. В таких случаях, с целью уменьшения времени загрузки, имеет смысл использовать interlaced images, так как при этом размер изображения уменьшается почти в два раза. Принцип работы интерлэйсинга очень прост — при сохранении изображения строки пикселей записываются через одну, а при выводе на экран вместо незаписанных подставляются пустые. Интерлэйсинг поддержиается форматами GIF, PNG и JPEG (при использовании progressive decode).
Прием 4: Image Maps.
Большинство начинающих web-дизайнеров не задумываются о том, что одно изображение можно связать сразу с несколькими гиперссылками (очень удобный прием для создания "шапки" сайта с элементами навигации). Как ни странно, этим приемом пользуются очень редко, наверное, людям просто нравится лишний раз пилить изображение на кусочки и потом опять соединять его в таблице. Использовать Image Maps очень просто.
• Создайте изображение и поместите его в ваш HTML документ.
<img src="kg04411a.gif">
• Добавьте параметр usemap в тэг img. Параметр usemap указывает на раздел описания регионов, связанных с изображением.kg04411b.br> <img src="kg04411c.gif" usemap="#mapdef">
• При помощи графического редактора определите координаты областей, которые вы хотите сделать активными.
• Создайте таблицу описания регионов с именем, которое вы указали в параметре USEMAP.
<MAP NAME="mapdef">
<AREA SHAPE="RECT" COORDS="0,0,100,100" HREF=file.html">
.
.
.
</MAP>
• Способ выделения (SHAPE) может быть определен как прямоугольный (RECT) [x-left, y-top, x-right, y-bottom], окружность (CIRCLE) [x-center, y-center, radius] или полигональный (POLYGONS) [x1,y1,x2,y2,x3,y3,...].
Почерпнуть больше информации об Image Maps можно на сайте www.ihip.com (Image Map Help Page).
Прием 5: Background.
Добавить background очень просто. Но, пожалуйста, будьте твердо уверены в том, что ваше фоновое изображение не бросается в глаза и контрастно по отношению к тексту, так как обратное, мягко говоря, не нравится очень многим людям, включая меня самого. Используйте "мягкие" текстуры с небольшим количеством цветов — и все будут счастливы:).
Заключение
Очень хочется верить, что этот материал поможет вам эффективнее использовать графику при создании интернет-ресурса. Ведь наш родной белорусский Интернет — это короткая, тоненькая ниточка в исполинских сплетениях Всемирной Паутины. Мы просто обязаны показать свет новым, интересным проектам и искоренить наконец мусорные сайты, созданные по схеме "накликай себе счастье". Согласитесь, каждый из нас осознает, что "всегда можно сделать лучше", главное — желание, энтузиазм и терпение!
Макс Федоткин
(AKA FrOSt DeVIL)
Frost_Devil@usa.net
(c) компьютерная газета
Компьютерная газета. Статья была опубликована в номере 44 за 2000 год в рубрике интернет :: вебмастеру
