Графика в инете 

Изображение стоит тысячи слов. Кто из выдающихся старых гуру сказал это?

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

Хватит гадать, давайте для разнообразия взглянем на некоторые реальные цифры.

Текстовый файл из тысячи слов равняется примерно 25 строкам обычного текста на веб-странице. Размер этого текста в формате txt около 5,767 байт. Очень незамысловатый и простой 16-тицветный GIF, оптимизированный по максимуму, даст нам одно изображением размером 150х150 пикселей. Не много же мы имеем, чтобы изобразить Бруклинский мост, или даже качественную репродукцию почтовой марки в данном случае! Размер этого графического файла будет примерно 5,746 байт.

Это реальные цифры - я проверил.

Таким образом, Вы имеете выбор: либо текст в 25 строк, либо не очень хорошего качества изображение почтовой марки или чего-либо еще, занимающее то же пространство на экране.

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

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

Легко! Графика - на диету! Вот дюжина советов как это делается.

1. Обрезка изображений.

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

2. Снижение цветности.

Если Вы используете формат GIF для изображений, простой путь сократить размер файла - использование графического редактора для сокращения глубины цвета. Параметр "Глубина цвета" определяет количество цветов доступных в цветовой палитре изображения. Максимальная глубина цвета для GIF - это 8 бит, что означает палитру из 256 цветов. Я стараюсь сократить цветность настолько сильно насколько это возможно, часто до 4 бит (16 цветов), если изображение по прежнему выглядит хорошо.

3. Использование формата JPEG для фотографий.

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

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

4. Использование изображений с низкой четкостью в процессе загрузки.

Если Вы не можете уменьшить скорость загрузки вашего сайте, интересным приемом будет создание видимости быстрой загрузки. Это использование параметра lowsrc, предложенного фирмой Netscape во 2-ой версии браузера Netscape Navigator и ныне поддерживаемого также браузерами Internet Explorer версий 3.0 и выше. Использование этого параметра приведет к тому, что браузер будет показывать изображение пониженного качества в процессе загрузки обычного изображения. Эта техника позволяет создать видимость того, что увидит после полной загрузки посетитель. Это крайне важно для image maps, поскольку это позволит пользователю увидеть активные области и перейти по ним на другие страницы еще до того как полное изображение загрузится целиком.

Параметр lowsrc в теге <IMG> выглядит так:

<IMG src="highres.gif" lowsrc="lowres.gif">

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

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

5. Используйте чересстрочный gif-формат (interlaced)

Для быстрой загрузки с целью предварительного просмотра изображений удобно пользоваться их копиями с низким разрешением. Копия с низким разрешением может быть в jpeg-формате, а полное изображение - в gif и наоборот. Но если вы не хотите для каждой своей картинки создавать две копии - с низким и высоким разрешением, - лучше всего применить чересстрочный gif-формат.

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

6. Указание высоты и ширины изображения в теге <IMG>

Не ленитесь, везде где Вы используете тег <IMG> всегда включайте   параметры "height" (высота) и "width" (ширина). Это позволит браузеру  сразу определить сколько места потребуется под изображение, что приведет к тому, что браузер сможет загружать текст вокруг графики, без ожидания полной загрузки изображения. Большинство графических редакторов имеют функцию определения размеров для любого поддерживаемого графического формата.

Например, если Ваше изображение находится в файле image.gif и имеет размер 50 пикселов на 100 пикселов, тег <IMG> должен выглядеть так

<IMG src="image.gif" height="50" width="100">

7. Не используйте масштабирование изображений

Вы можете быть поражены простым способом изменения размеров изображения в виде изменения параметров высоты и ширины изображения в теге <IMG> вместо обрезки изображения или изменения его размеров в графическом редакторе. Это не самая лучшая идея...

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

8. Масштабирование одноцветных изображений для создания полос.

Даже хотя Вы не должны масштабировать изображение, есть один случай когда этот прием будет Вам полезен. Если Вам нужны одноцветные полосы на странице, Вы можете сократить время загрузки, заменив использование полноразмерного GIF  созданием изображения размером 1 на 1 пиксель и установив атрибуты height и width под нужный размер для каждой полосы.

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

9. Обрезка анимированных GIF.

Анимированные GIF'ы представляют из себя серию изображений - одна над другой, - для того, чтобы создать эффект движения. В зависимости от применяемой техники, анимированные GIF могут быть меньшими, чем равнозначные ява-апплеты. Но реальное преимущество состоит в том, что браузеру не нужно запускать консоль языка Ява, чтобы показать апплет.

Проблема состоит в том, что так как анимированные GIF - просто серия обычных GIF, файл может разрастись до неприемлемого размера. Один способ проконтролировать этот рост - начать с GIF c фоновым рисунком, и затем создавать анимацию, помещая изображения меньшего размера на первое изображение. Большинство современных GIF-аниматоров поддерживают эту функцию, которая называется "leave in place", давая Вам возможность нарисовать серию GIF меньшего размера вместо использования полноразмерных GIF для каждой ячейки анимации.

10. Использование предпросмотра.

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

Посетители сайта кто не хочет смотреть полноразмерные изображения избежат загрузки больших и неинтересных для них изображений. Кто хочет - нажмет ссылку на картинке и увидит полное изображение.

Большое количество программ могут создавать такие галереи изображений, как, например, FrontPage 98.

11. Разбивка изображений на части используемые на других страницах

Если Вы используете изображения или его части в других местах Вашего сайта, Вы можете увеличить скорость загрузки разбивая их на меньшие фрагменты. Например, большинство больших изображений на сайтах в действительности набор небольших GIF, а не один большой GIF. Таким образом браузеру нужно будет загрузить только небольшой новый фрагмент при нажатии или наведении мышкой на  меню на Вашем сайте.

Такое изображение может даже быть набором GIF и JPEG файлов -  каждый формат используется если дает лучшее качество при наименьшем размере файла. Это достигается разрезкой и оптимизацией выбранных областей изображения. Если Вы уже задумались над этими словами - Вам нужен хороший графический редактор, например PhotoShop.

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

Природа используемых протоколов используемых в WWW заставляет обратить внимание на один момент. Например браузеры и веб-сервера использующие ранние версии HTTP вынуждены каждый раз получать изображение снова. Это значит, что загрузка большого изображения возможно будет происходить быстрее, чем в случае набора меньших изображений. Вы должны иметь это ввиду, используя вышеописанную
технику.

12. Текстовая версия сайта или альтернативный текст

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

Если Вы не хотите делать текстовую версию сайта, включите параметр ALT в код описывающий изображение. Большинство браузеров показывают его содержание на месте изображение, если показ графики отключен в браузере посетителя Вашего сайта. Использованием этого параметра Вы покажете такому пользователю, что он теряет.

Например, если у Вас есть изображение моста размером 100 на 250 пикселей, тег <IMG> при использовании параметра ALT может выглядеть так:

<IMG src="bridge.gif" height="100" width="250" ALT="Мост">

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

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