HtmlGuide.ru

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

Автор admin | Дата: 05.12.2007

Хорошая web-страница, должна иметь читабельный шрифт, удобную навигацию, светлый фон, и сравнительно небольшой объем. Разве текст занимает много объема? Нет, если это не роман на одной странице! Увеличить объем страницы помогут большие, неоптимизированные картинки. Кроме того, если вы не укажете для картинок параметры высоты (height) и ширины (width), пользователь будет дожидаться загрузки картинок, и только после этого, загрузки всей страницы. Также, часто, для размещения картинки необходимых размеров, ее указывают принудительно для файлов больших размеров. Таким образом, картинка не только искажается, но и размер ее остается прежним. Все эти подходы, не правильны! Для того чтобы пользователю понравился сайт, вам необходимо предложить ему качественные и оптимизированные картинки, которые в свою очередь обеспечат более быструю загрузку страницы.

Наиболее популярные в Интернете форматы графических файлов - gif и jpg. GIF - это 256-цветный формат, предназначенный для рисованных изображений. JPG - многоцветный формат, предназначенный для фотоизображений. Для формата JPG - используется сжатие файлов, причем разной степени. Таким образом, при сильном сжатии, качество рисунка заметно ухудшится, а при малом, изменения вы практически не заметите.

Помимо формата, при подготовке графики для web, вы должны обратить внимание на разрешение картинки. Оно должно быть 72 точки на дюйм. По умолчанию именно такое разрешение предлагает графический редактор Adobe Photoshop при создании нового файла.

Создание GIF-файлов

Работать будем в графическом редакторе Adobe Photoshop. Воспользуемся командой “Сохранить как”, в поле “Формат”, выбираем *.GIF. Обратите внимание на строку “Использовать верхний регистр”. Желательно убрать галку с этой опции, для того, чтобы картинка сохранилась как имя.gif, а не имя.GIF. Некоторые серверы могут не отобразить изображение, если для него будет указан неверный регистр.

Далее, программа покажет вам небольшое окно, в котором необходимо указать важные параметры. В списке цветовых наборов Palette (Палитра), вы найдете строку Web, предназначенную специально для наших целей. Для того чтобы изображение стало прозрачным, оставьте галку в строке Transparency (Прозрачность). На втором шаге, у вас спросят, каким образом будет загружаться файл в браузере. При выборе Normal, файл будет грузиться разом, а во втором случае, Interlace, изображение будет грузиться поочередно. Несмотря на то, что файлы второго типа выходят немного больше, в браузере они грузятся поэтапно, сначала появляется грубое изображение картинки, потом немного лучше и так пока не загрузиться полностью. И все это параллельно загрузке текста и других файлов на странице. Поэтому эту опцию выбирают чаще первой.

Оптимизация GIF-файлов

Для оптимизации изображения в Photoshop есть специальная строка в меню Файл -> Сохранить для Web. В появившемся окне довольно много настроек. Сначала перейдем на вкладку 2-Up, для того, чтобы видеть оригинальное изображение и оптимизированную копию. В окне для оптимизированного изображения помимо, нового размера, указано и сколько секунд оно будет грузиться на скорости 28,8 Кбит/сек. Выбираем формат изображения GIF. Далее, подбираем количество цветов в окошке Colors. Поначалу качество оптимизированного изображения не будет сильно отличаться, но как только оно резко ухудшиться - пора остановиться!

Оптимизация JPG-файлов

При сохранении изображения в формате JPG, опций немного меньше, а основной является Quality (Качество). Регулятор задается от 0 до 100. При выборе 0 получаем максимальные потери качества, при выборе 100 минимальные, т.е. получаем файл с высоким качеством. Второй параметр Blur отвечает за четкость изображения, значения меняются от 0 до 2. За счет удаления самый мелких деталей можно еще на порядок уменьшить размер файла, при этом, не слишком ухудшив его внешний вид.
Опция Progressive сохраняет файл в прогрессивном виде, при котором файл грузиться поэтапно, как это было при сохранении изображения в формате GIF.