Оптимизация изображений.

«Оптимизация изображений» – двенадцатый урок учебника JavaScript. В этом уроке мы будем говорить про оптимизацию изображений. Оптимизация изображений актуальна не только для увеличения скорости загрузки сайта или его продвижения, но также и в целях упрощения программирования изображений в JS.

Оптимизация отображения графики

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

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

ошибочный код
ошибки в выполнении скриптов
перенасыщенность страницы графикой

В этом уроке мы будем пытаться повысить производительность наших страниц путем оптимизации изображений.

Оптимизация при загрузке

Оптимизация изображений при загрузке – прописная истина HTML верстальщика. Обязательно задавайте для всех изображений на ваших страницах фиксированные значения ширины width и высоты height.

Если объяснять более подробно, то браузер при загрузке документа первым делом загружает текст и служебную информацию о странице (содержимое HEAD). Далее идет предварительная загрузка информации обо всех обектах, расположенных на странице (таких, как ширина и высота изображений). Паралельно с этими процессами начинается предварительное построение каркаса страницы. И лишь в последнюю очередь подгружаются скрипты и изображения.

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

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

Предварительная загрузка

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

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

window.document.i[0].src='images/img1.gif';

В нашем примере мы загружаем в массив i изображение с соответствующем ему адресом.

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

Нарезка картинок

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

Единственной проблемой этого способа может стать сам браузер. В алгоритме работы HTML парсера любого браузера заложен перенос объекта на новую строку при переполнении горизонтального пространства, отведенного для этого объекта. Представьте, что может произойти с изображением, если одну или несколько его частей будут перенесены на новую строку.

Но тут нам на помощь приходит CSS с его свойством overflow.

***

На последок хочу сказать, что грамотная нарезка изображений позволяет делать впечатляющей красоты меню навигации без какого либо использования Flash технологии. Для этого одно большое изображение режется на несколько горизонтальных или вертикальных частей. Дополнительно подготавливаются изображения с аналогичными размерами и изображения с произвольными размерами. Далее путем использования несложных скриптов (таких как обработчики onMouseOver и onMouseOut) и технологии CSS получается очень красивое JS меню с выпадающими списками.

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

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

В следующем уроке мы с вами поговорим о работе с формами в JS. Работа с формами – конек этого языка програмирования. Урок получился очень большим и потому был разбит на несколько частей.

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

Наверх

Источник: Создание сайтов