Кодируем
от
лишнего
веса-2
W ob-с п р и к а
Владислав ПУТЯК
г
П р о д ол ж е н и е , н а ч а л о см. в М К , N e 3 0 (305)
И
так, HTML-код почищен и оптими-
зирован. Стронички грузятся быст-
ро и красиво. Все довольны дос-
тигнутым результатом. Н о стоит ли
на этом останавливаться?
Что это мы все про оптим изацию
HTML- кода? Давайте подумаем и про
графику. Без неё тоже никуда.
Прежде всего нужно четко уяснить
вопрос выбора формата сжатия графи-
ческих данных. К сожалению, JPG по-
всеместно применяется для сжатия всех
картинок подряд. Что из этого следует?
Часть картинок значительно теряет в ка-
честве, зато набирает в весе по срав-
нению с их GIF-аналогами.
Не вдаваясь в подробности алгорит-
мов, просто заметим: формат GIF ухуд-
шает цветопередачу, a JPG — качест-
во. Иначе говоря, эффективность GIF'a
тем выше, чем меньше цветов содержит
обрабатываемая картинка. JPG же по
своей натуре более критичен к четко-
сти. Попросту говоря, JPG разбивоет
картинку на много квадратов, пытаясь
найти сходства между ними, по ходу сжи-
мая каждый отдельный квадрат. Вслед-
ствие чего при использовании сильного
сжатия качество картинки резко пада-
ет — сами кводраты теряют часть ин-
формации, а их независимо обработан-
ные грани, будучи собраны в единое це-
лое, визуально не согласуются.
Становится ясно, что GIF стоит при-
менять для сжатия малоцветных карти-
нок — в подавляющем большинстве слу-
чаев это искусственно созданные на
компьютере изображения, в частности
баннеры, элементы интерфейса. А вот
«живые картинки», нопример фотогра-
фии,
сжимать
стоит
исключительно
JPG 'om. Также стоит отметить две осо-
бенности GIF'a: возможности использо-
вания прозрачного фона и анимации.
О братите внимание на то, что при сжа-
тии JPG 'om теряется качество, в част-
ности четкость картинки. Следователь-
но, чем более размыта картинка, тем
хуже она сожмется.
О ш ибка подавляющего большинст-
ва веб-мастеров в том, что для сжатия
они используют простые, неспециали-
зированные утилиты. Например, многие
довольствуются встроенным конверто-
ром графических форматов в програм-
ме для просмотра графики A C D S ee. И
это большая ошибка. Лучше пользовать-
ся специализированной утилитой, кото-
рая будет не просто конвертировать
изображения из одного формата в дру-
гой, но кок минимум способна подби-
рать оптимальные настройки конверта-
ции. Например,
A d o b e Im ageReady.
Эта
программа создана для завершающ е-
го этапа обработки графики — ее оп-
тимизации, работает со многими фор-
матами, в том числе с GIF и JPG, при-
чем с первым она творит настоящие чу-
деса. В принципе, все, что нужно сде-
лать — это открыть файл, который нуж-
но оптимизировать, перейти на вклад-
ку с четырьмя примерами (один исход-
ный и три оптимизированных с разным
качеством) и выбрать оптимальный уро-
вень оптимизации.
К сожалению, с JPG'om таких чудес
ImageReady не творит, но для «профи-
лактики ожирения» годится. Первое, че-
му следует уделить внимание при опти-
мизации JPG под web — это разбиению
больших картинок на более мелкие. Дан-
ный прием даст вом сразу несколько
преимуществ. Во-первых, все современ-
ные браузеры поддерживают многопо-
точную загрузку картинок. Одним сло-
вом, две половинки картинки будут гру-
зиться быстрее, чем картинка целиком.
Во-вторых, суммарный вес всех кусков
картинки будет значительно меньше ее
веса до разрезания. О днако тут следу-
ет отметить, что многие авторы подоб-
ных советов — то ли не зная, то ли ле-
нясь — не говорят о том, что это прави-
ло не действует на GIF-файлы. Это чет-
ко явствует из технологии сжатия. Для
GIF'a практически все равно, что сжи-
мать — одну картинку 100x100 пиксе-
лей или четыре ее куска по 50x50. Вто-
рой вариант в сумме будет даже чуть
более громоздким — ведь в кождом фай-
ле приходится хранить еще и информа-
цию о цветовой гамме. JPG же с радо-
стью оптимизирует свои квадраты при
меньшем их количестве. Следовательно,
при умном разрезании JPG 'a помимо
ускорения благодаря параллельной за-
грузке, м ож но получить выигрыш до
3 0 -4 0 % и более в компактности графи-
ческих данных. Конечно, если GIF-кар-
тинка большая, ее тоже можно смело
разрезать — получим немного лишнего
веса, зато грузиться будет быстрее.
Вот в принципе, и все главные сек-
реты оптимизации графики. Как видите,
все очень просто и одновременно очень
эффективно.
В заключение хочется ознакомить чи-
тателей с одним замечательным мето-
дом, позволяющим без особых усилий
на добрую половину уменьшить вес уже
оптимизированного HTML-документа.
Давайте подойдем к проблеме опти-
мизации HTML-кодо сточки зрения про-
грам м ирования. Возьмите несколько
страниц с вашего сайта и посмотрите
на их код. Что первое приходит на ум?
Конечно же, множество повторов! Ведь
шапка, меню, баннеры и тому подоб-
ные элементы обычно одинаковы на всех
страницах. Что в таком случае делают
программисты? Правильно, выносят час-
то используемые участки кода в отдель-
ный файл, создавая подклю чаем ы е м о -
дули, и вызывают их при необходимо-
сти (можно сравнить с функциями, но в
данном случае аналогия с модулями бо-
лее подходящая).
Все было бы здорово, да вот FHTML —
это не язык программирования, и таких
возможностей в нем нет. Что вы гово-
рите? У нас же есть J a v a S c rip tI Fie сто-
ит повторять уже написанное — в дан-
ном случае, как это уже понятно, ис-
пользуется технология вставки кода на
JavaScript, а как это делается, можете
узнать, подняв архив М К и найдя ста-
тью «Java Script спешит на помощь» в
№ 23 (246).
Выгода от использования вставок на-
лицо. Как правило, получаемый объем
HTML-кода, который необходимо загру-
зить пользователю, в этом случае фак-
тически равен объему текста страницы,
плюс тэги форматирования. А все ос-
тальные повторяющиеся элементы будут
подключаться уже из кэша браузера по-
сетителя. Как показывает практика, за-
частую таким образом можно избавить-
ся от 50-300% веса, загружаемого поль-
зователем. О днако есть небольшая про-
блема: JavaScript доступен и включен у
99.3% пользователей (статистика со счет-
чика M [email protected] ru ), следовательно, 0.7% ва-
ших посетителей не смогут увидеть стра-
ницы в корректном виде. Решать, конеч-
но, вам, но, по-моему, вполне разумно
пожертвовать этим неполным процентом
в пользу остальных девяносто девяти.
Кстати, данный метод часто исполь-
зуют поисковые оптимизаторы и промо-
утеры. Почему? Чтобы не выходить за
рамки статьи, расскажу вкратце. Как из-
вестно, чем раньше на страничке встре-
чаются слова, соответствующие поис-
ковым запросам, тем больше предпоч-
тений отдает ей поисковик при отобра-
жении результатов. Но поисковый ро-
бот видит страницу не так, как мы ее в
браузере, он читает ее код. А теперь
откройте код любой своей странички и
почитайте его. Сколько тысяч символов
кода вам предстоит прочитать, пока вы
дойдете до самого текста? И, как пра-
вило, по меньшей мере 90% его опять
же повторяется на каждой страничке.
Вынеся его в отдельный файл, мы не
только избавимся от лишнего веса стра-
нички, но и максимально приблизим сам
текст странички к началу файла.
Вот такой метод оптимизации — как
говорится, два в одном. Следует отме-
тить, что это еще не все бонусы, кото-
рые сулит оптимизация путем вынесе-
ния кода в подключаемый файл. Напри-
мер, поисковик выше оценивает рейтинг
страницы еще и благодаря тому, что в
этом случае возрастает концентрация
ключевых слов на страничке.
М О И К О М П Ь Ю Т Е ,
предыдущая страница 37 Мой Компьютер 2004 40 читать онлайн следующая страница 39 Мой Компьютер 2004 40 читать онлайн Домой Выключить/включить текст