Оптимизация Web-графики

       

Оптимизация фрагментов


Разнородные графические элементы Web-страницы могут потребовать для своей оптимизации различных параметров или даже форматов. В таких случаях большое изображение лучше разрезать на отдельные фрагменты — слайсы и установить для каждого из них индивидуальные настройки оптимизации, чтобы добиться оптимального соотношения «качество/размер» для изображения в целом.

Чтобы рассмотреть данный вариант на практике, откройте подходящее исходное изображение (рис. 38). Большая часть изображения вполне годится для сжатия в формате GIF с небольшим количеством цветов, но наличие фотографий препятствует использованию данного формата. Нужное качество при оптимизации фотографических изображений может дать только формат JPEG, формирующий более объемные файлы. Разумным компромиссом будет разбить изображение на отдельные фрагменты и для каждого из них установить свой формат сжатия.

Оптимизация фрагментов

Рис. 38. Исходное изображение

Активизируйте инструмент Slice Tool (Нож для нарезки) и с его помощью выделите на изображении нужные фрагменты (рис. 39).

Оптимизация фрагментов

Рис. 39. Результат разбиения изображения на слайсы

Установите для каждого из слайсов нужный формат оптимизации на вкладке Optimize: для фрагментов с фотографией — в соответствии с рис. 40, а для навигационных слайсов — как на рис. 41.

Оптимизация фрагментов

Рис. 40. Настройка оптимизации для фотографий

Оптимизация фрагментов

Рис. 41. Настройка оптимизации для панели навигации

Полученное оптимизированное изображение будет напоминать рис. 42, а размер соответствующего графического файла окажется равным 36,61 Кбайт, что почти на 23 Кбайт меньше, чем соответствующее изображение, оптимизированное без разрезания на фрагменты (рис. 43).

Оптимизация фрагментов

Рис. 42. Предварительно разрезанное на слайсы и оптимизированное изображение

Оптимизация фрагментов

Рис. 43. Результат оптимизации без разрезания на фрагменты

Оптимизация фрагментов
Оптимизация фрагментов


Содержание раздела