Разрезание графического изображения на фрагменты для вставки в ячейки таблицы с целью создания быстрозагружаемой Web-графики
В предыдущем практикуме вы научились создавать навигационные карты путем компоновки отдельных графических элементов внутри таблицы. Таблицы также позволяют составлять графические изображения так, чтобы составная картинка выглядела как одно изображение. Разбиение рисунка на фрагменты и помещение фрагментов в отдельные ячейки таблицы позволяет Web-браузеру извлекать и отображать изображение быстрее, чем если бы изображение было единым большим файлом. Экономия скорости зависит от цветов в нарезанных изображениях. Из фрагментов, содержащих меньшее число цветов, таких как голубое небо, создаются файлы меньшего размера, чем из фрагментов, в которых цветов больше.
ПРАКТИКУМ
Скажем, к примеру, у вас на Web-странице есть большое графическое изображение, и из-за большого размера файла изображения страница загружается чересчур долго. Изображение, о котором идет речь, представляет собой фотографию ландшафта, содержащую большие области сплошного голубого неба, и называется big_sky.jpg.
Если вы разделите большое графическое изображение на фрагменты и сохраните каждый из этих фрагментов на диске в отдельном файле формата JPEG, вы сможете воспользоваться взаимосвязью между размерами файла и цветовой насыщенностью изображения. При сохранении графического изображения в формате JPEG графическая программа выбирает метод сжатия на основании количества цветов, содержащихся в изображении. Однако вне зависимости от примененного метода сжатия, чем больше на картинке цветов, тем больше размер создаваемого программой JPEG-файла.
Если вы разделите большое графическое изображение на фрагменты, графическая программа сможет выбрать различные методы сжатия для разных частей, или порций изображения. Программа сохранит те из порций, которые содержат меньше цветов, в меньших JPEG-файлах, а порции, в которых цветов больше, вJPEG-файлах большего размера (см. рис. 2.26). Однако при данной картинке с переменным количеством цветов в различных частях изображения сумма размеров нарезанных JPEG-файлов будет меньше числа байтов, необходимых для хранения изображения в одном JPEG-файле. Следовательно, Web-браузер сможет загрузить и отобразить все файлы порций быстрее, чем он мог бы загрузить единый файл, поскольку браузеру придется извлекать с сервера меньший объем данных. Помните: когда вы помещаете порции (фрагменты) картинки в ячейки таблицы с границами нулевой ширины (невидимыми), таблица удерживает фрагменты друг возле друга (без интервалов между ними) так, что они выглядят одним большим изображением.
Когда таблица загружает изображение на Web-страницу, оно загружается быстрее, поскольку браузеру приходится загружать с сервера меньший объем информации.
Для разрезания изображения требуется какой-нибудь графический редактор, например, Adobe ImageReady 3.0. Это единственная, имеющаяся в настоящее время на рынке, программа, которая автоматически разрезает фотографическое изображение, оптимизирует каждую порцию в соответствии с цветами в изображении и сохраняет нарезанные изображения в отдельной папке.
Рис. 2.26. Разрезанное изображение на 30 процентов меньше исходного