Параллельно с текстом проектов методического пособия размещался иллюстративный материал к ним при помощи тегов:
<img src="project_1/1_1.jpg" width="800" height="390" alt="" border="0"> - вставка изображения;
<div align="center"></div> - выравнивание изображения по центру экрана (рис. 3).
Подготавливался иллюстративный материал в программе Adobe Photoshop 7. А поскольку задача дипломного проекта состоит в создании сайта проводилась Web- оптимизация иллюстраций в программе Adobe ImageReady.
Adobe Photoshop 7 обладает непровзойденными возможностями, высокой скоростью работы, надежностью, удобством пользователя. Развитие Интернета стимулировало рост числа документов, предназначенных исключительно для электронного распространения. Большинство профессиональных разработчиков и множество любителей приняло Photoshop как основное средство подготовки графики для таких публикаций [5].
ImageReady имеет мощные встроенные инструменты оптимизации изображений – программа не только обеспечивает сам процесс оптимизации, но и позволяет осуществить его быстро и эффективно, благодаря различным методам предварительного просмотра. Предварительный просмотр дает достаточно точное представление о том, как будет выглядеть оптимизированное изображение в режиме реального времени, что помогает оценить результат оптимизации и удачно подобрать нужные настройки [5].
Оптимизация достигается за счет уменьшения количества цветов в графических изображениях, использования сжатых и специальных форматов файлов и оптимизации параметров сжатия для отдельных фрагментов изображений.
Основная задача оптимизации - найти удачный компромисс между скоростью загрузки страницы и качеством представленных на ней изображений.
Для оптимизации используется много графических форматов. Однако для создания дипломного проекта было выбрано два распространенных в Интернете формата - GIF и JPEG.
Gif позволяет значительно сократить объем итогового графического файла по сравнению с исходным изображением. Достигается это методом смешения сходных оттенков в один. Число цветов в этой палитре не превышает 256.
Jpeg – графический стандарт, созданный на основе одноименного алгоритма сжатия изображений с потерей качества, корректирующий не идентичные элементы, а межпиксельные интервалы. Jpeg оптимален для передачи фотографических изображений, а также картинок с большим количеством полутонов и цветных переходов. Максимальное число цветов, которое может содержать изображение в формате Jpeg, достигает 16 миллионов.
Графическая информация передается намного медленнее текстовой, а время загрузки изображений пропорционально размеру их графических файлов. Поэтому для быстрой загрузки Web-страниц требуется небольшой размер внедренных в них графических изображений [2].
Программа имеет два режима, обеспечивающие существенную экономию времени при поиске лучшего варианта оптимизации, так как не требуют ни сохранения изображений с разными настройками оптимизации, ни их последующего визуального сравнения. Кроме того, возможно оценить не только качество оптимизированного изображения, но и его размер и время загрузки при разных вариантах соединения.
Для сравнения наиболее удобен режим 4-Up, позволяющий визуально оценить влия-ние сжатия или уменьшения палитры на качество изображения, его размер и в конечном итоге определить параметры оптимизации.
Для выбора формата иллюстрация была открыта в режиме 4-Up и произведено сравнение в трех форматах – JPEG, GIF и PNG. Затем методом практического подбора был установлен желательный размер конечного файла, равный 11,55 Кбайт в формате – JPEG с качеством 80 (рис. 4).
|
