Графика большого размера
Часто бывает необходимо вставить на Web-страницу рисунок или фотографию большого размера. Очевидно, что файл, содержащий подобный рисунок или фотографию, будет большого объема, и его загрузка потребует значительного времени.
Такой рисунок большого размера BG.JPG вы можете найти на прилагаемом к книге компакт-диске в папке \Web\Chap03\web. Вставим этот рисунок в документ geoton.html, поместив его в начале Web-страницы.
> Установите связь с Интернетом и скопируйте рисунок BG.JPG с компакт-диска в каталог вашего сайта, например, на geoton.narod.ru, как это описано в главе 2 этой книги.
> В файле geoton.html, открытом в окне программы Блокнот (Notepad), вставьте пустую строку после открывающего тега <body> и введите следующий код HTML:
<img src="http://geoton.narod.ru/BG.JPG">
-
Сохраните файл geoton.html на диске.
-
Обновите изображение в окне браузера. Начнется загрузка файла, которая займет некоторое время, в зависимости от качества вашей линии связи.
Обратите внимание, как изображение появляется на экране. Так как данный файл записан в стандартном формате JPEG, то в отличие от рисунка, сохраненного в формате GIF89a, вывод на экран происходит горизонтальными полосами. И до окончания загрузки трудно определить содержание рисунка. Если бы данный рисунок был записан в прогрессивном формате JPEG, то изображение появлялось бы сразу, целиком, в грубой форме и постепенно бы прояснялось. Очевидно, такой характер загрузки был бы удобней, так как позволил бы быстрее оценить изображение. Идеальной была бы возможность быстро знакомиться с содержимым графических файлов, не загружая их полностью. В некоторых форматах для этого используется уменьшенная копия изображения, вставляемая в тот же файл и предназначенная для быстрого ознакомления с его содержимым.
Когда загрузка файла закончится, вы увидите, что изображение, представляющее собой фотографию девушки на сером фоне, занимает почти все окно браузера в начале Web-страницы (Рис. 3.8), а текст документа и рисунок CLOUD.GIF располагаются в нижней части страницы.
Прервите связь с провайдером.
> Щелкните правой кнопкой мыши на рисунке в окне браузера и из появившегося контекстного меню выберите команду Сохранить рисунок как (Save Picture As) (Save Image As). В появившемся диалоге Сохранение рисунка (Save Picture) откройте папку Web, a затем нажмите кнопку Сохранить (Save).
Если рисунок очень большой, и вы не хотите, чтобы он замедлял загрузку основного Web-документа, можно поместить рисунок на отдельную страницу, вставив в основном документе гиперссылку на нее, например, так:
<а href=” Адрес_URL”>Здесь</а>Вы можете увидеть фотографию
В этом случае пользователь сам решает - смотреть или не смотреть данный рисунок.
Мы уже отмечали, что для файлов, подобных загруженному, т.е. сохраненных в формате JPEG, основной способ оптимизации — сжатие. Только таким способом можно уменьшить объем файлов данного формата. Однако следует помнить, что сжатие JPEG ведет к потере качества. При каждом сохранении файла этого формата происходит новое сжатие и качество снова ухудшается. Вместе с тем, технология JPEG замечательна именно тем, что позволяет достичь серьезного выигрыша в сокращении размера при минимально заметных для глаза потерях в качестве.
Еще один способ ускорения загрузки графики большого размера - нарезать изображение на части и поместить отдельные фрагменты в HTML-таблицу, где они будут восприниматься как единое целое. Каждый такой фрагмент можно оптимизировать индивидуально, применив наиболее подходящие для него параметры. При этом размер фрагментированного рисунка станет меньше, чем неразрезанного, что значительно ускорит его появление на экране. Для графики, сохраняемой в формате GIF, можно также оптимизировать палитру каждого фрагмента, что иногда позволяет уменьшить объем файла в 2-3 раза.