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

Графические форматы. Сейчас в броузерах используются два формата: GIF и JPEG. GIF (Graphics Interchange Format) предназначен для хранения рисованной графики, сжимает данные без потери качества, размер его палитры можно задать самому - от 2 до 256 цветов, что напрямую влияет на размер файла. Кроме того файлы GIF сделать с прозрачным фоном (см. "Секрет GIFa" в первых параграфах ру/ководства А.Лебедева). Еще GIF может содержать несколько картинок, при очередом наложении которых можно получить анимацию. Сделать это можно в пакете ImageReady, предназначеном для оптимизации графики для WEB, поставляемом отдельно либо уже встроенном в Photoshop 5.5, кроме того есть много маленьких програм которые могут делать только это, например Animagic GIF. Photoshop 5.5 также дает возможность создать GIF с потерей качества, что делает размер файла еще меньшим.

Другой формат - JPEG (по названию группы разработчиков Joint Picture Experts Group) предназначен для фотографических изображений. Он сжимает данные за счет потери качества и основан на разбитии рисунка на квадраты которые заполняются градиентом или чистым цветом. Это значительно уменьшает количество данных нужных для сохранения изображения, соответственно размер файла резко уменьшается, при этом сохраненяется полноцветная палитра, хотя и немного ухудшается качество.

При этом, чем фотографичнее (размытее) будет изображение, тем лучше его удастся сжать с помощью JPEG. Но для изображений маленьких размеров (порядка 50*50 пикселов) все же гораздо лучше подходит GIF.

Кроме всего прочего данные форматы можно сохранить в черезстрочном режиме - при загрузке изображение будет появляться не посторочно, а одновременно весь рисунок с постепенным улучшением резкости. Рисунок в таком сохраненный в таком режиме будет занимать немного больше места. Для формата GIF такой режим называется interlaced, для JPEG - progressive.

Существует также формат PNG-8 и PNG-24 (по количеству бит на цвета), который как и GIF сжимает изображения без потери качества, может иметь прозрачный цвет, но по размеру файла он все таки сильно проигрывает GIFу.

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

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

Начнем с того, что многие вещи в коде можно просто опускать: например, знак # в цвете, кавычки по стандарту нужны только если значение в них содержит пробелы:

 <img src=picture.gif border=1
      height=35 width=70 
      alt="тут уж кавычки нужны">

в крайнем случае если не хотите убирать кавычки, пишите без пробелов:

 <img src="picture.gif"height="35"width="70">

Также совсем необязательны разделительные точки с запятой или пробелы между специальными символами:

 &laquoВодка&nbspимеет&nbsp40&deg&raquo

Полезно также знать что многие теги можно не писать либо не закрывать в таком случае они действуют до следующего соответствующего тега или до конца документа. Например теги <p>, <td>, <tr>. Такая запись правильно отобразится броузером:

 <table>
  <td>Первая ячейка
  <td>Вторая ячейка
 </table>

Хотя нужно быть очень осторожным. Например показанный выше код в Netscape будет отображен неправильно, потому что там нельзя опускать тег <tr>. Поэтому нужно иметь оба броузера, чтобы проверить в них результат вашей работы, все-таки 35% людей пользуются Netscape. Еще один пример:

 <select name=PicNum>
  <option selected>1</option>
  <option>2</option>
 <input type=button value=Back>  

Догадайтесь, почему Netscape не покажет ни списка ни кнопки? Нет, не потому что не закрыт тег <select>, а потому что весь этот код нужно поместить внутрь тега <form>!

Также поудаляйте все ненужные пробелы из кода. В Macromedia Dreamweaver, например, можно задать количество пробелов для отступов и табуляции для обозначения иерархической вложенности элементов, во FrontPage же, по-моему, этот процесс неуправляем и лишних пробелов там хоть пруд пруди. Конечно можно поприбивать весь код к левому краю, но тогда никто не гарантирует, что потом вы быстро найдете то, что ищите, при редактировании. Не бойтесь также использовать клавишу "Enter", переход стороки это тоже лишь один символ, но разделяет абзацы кода он гораздо эффективнее чем какой-то отступ в 4 пробела.

Применив все эти советы можно уменьшить размер файла HTML на 10-30%, но все-таки все нужно делать в меру.

Таблицы. Все знают, что таблицы - это лучший способ отформатировать положение текста. Например, содержимое этой главы находится внутри таблицы с выравниванием по центру и шириной 80% всего с одной ячейкой. Вообще не рекомендуется делать ширину ячейки с текстом больше 500-600 пикселов, во-первых, потому что очень неудобно читать очень длинную строку, во-вторых, все еще есть люди у которых разрешение экрана всего 640*480, в-третьих, обязательно должны быть пустые поля (whitespace), чтобы глаза могли на них отдыхать.

Основной проблемой таблиц есть то, что пока не скачается закрывающий тег </table>, броузер не будет отображать содержимое таблицы, так как он не знает как его отформатировать не зная где конец. Заметьте как долго вы сидите перед пустым экраном ожидая загрузки главы, а потом она появляется вся сразу. Чтобы хоть как-то скрасить это ожидание, покажите перед таблицей с большим куском текста какую-то надпись или картинку, в крайнем случае хотя бы задайте цвет фона в теге <body>, потому-что кажется, что появившаяся перед вами чисто белая страница, долго не подающая признаков жизни, просто повисла, в итоге читатель так и закроет окно не дождавшись конца.

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

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

Отформатировать текст, оставив и пустое пространство можно и без таблиц. Для этого используются распорки <img> с аттрибутами widht=1 или height=1, в зависимости от того, в каком направлении вам нужен отступ. Этот же способ используется для выставления точного расстояния между несколькими картинками. Посмотрите сами, что получится из этого кода (<nobr> нужен чтоб картинки не перешли на новую строку на узком экране):

 <nobr>
  <img src=pusto.gif width=100 height=1>
  <img src=your1.gif width=30 height=50>
  <img src=pusto.gif width=200 height=1>
  <img src=your2.gif width=70 height=100>
 </nobr>

Фреймы. Фреймы довольно привлекательны, но все-таки использовать их не советуется, поскольку их недостатки перекрывают все достоинства. Самое главное то, что адресс отображаемый в а дрессной строке совсем не соответствует адрессу содержимого, а является адрессу фреймсета. Если вы хотите чтобы пользователь видел в одной части экрана постоянные картинки при переходе со страницы на страницу, можно обойтись и без фреймов, помня о том, что одни и те же картинки на разных страницах не грузятся каждый раз, а отображаются уже загруженные из кэша (Temporary Internet Files). Конечно есть случаи когда без фреймов не обойтись, например когда само описание этих картинок в коде занимает около 3Кб (см. www.dynamo.kiev.ua) или когда в одном из фреймов отображается огоромное содержание с раскрывающимися пунктами (как Help продуктов Macromedia). Если вы все таки используете фреймы постарайтесь чтобы пользователь этого не заметил (www.bannerpoint.ru): спрячьте полосы прокрутки, проверьте не появятся ли они при изменении размера шрифта (моя старая работа univers.i-connect.com).

CSS. Если вы имеете достаточно много материала, чтобы написать несколько страниц, желательно оформлять их одинаково. При этом с помощью CSS можно создать свои стили для различных частовстречающихся на ваших страницах элементов. Описания всех этих стилей можно сохранить в отдельном файле, который потом можно подключить ко всем страницам, при этом экономится много места так как этот файл загружается всего один раз, а потом считывается из кэша временных файлов. Например, представьте что на каждой странице у вас есть несколько абзацев выделенных жирным текстом красного цвета маленького размера шрифтом Arial, для каждого такого абзаца вы пишете тег <font>с кучей аттрибутов. А если много страниц?! Оцените теперь выгоду, если для выделения такого абзаца вы будете использовать один коротенький тег. Аналогичные возможности дает XML. Но об этом в дальнейших главах.

Подробнее об этом всем можно почитать в книге Дмитрия Кирсанова "Веб дизайн", которую очень советую вам приобрести (например в магазине www.books.ru), а отдельные главы можно почитать и с его сайта www.kirsanov.com. Прочтите также параграф "Параноя оптимизатора" у Лебедева.

А теперь пора поискать место для размещения вашего сайта.