Создание и оптимизация изображений для Web-сайта

В прошлый раз мы с Вами рассмотрели вопрос о размещении изображений на Web-страничке. Ни один сайт не может обойтись без иллюстраций. И чем качественней они, тем сайт выглядит более презнтабельно. Однако при создании и размещении изображений на сайте следует помнить следущее:

1. Картинки должны быть четкими, ясными, но иметь размер не более 20-30 kB, иначе пользователь будет нервничать, ожидая загрузки картинки, какая бы хорошая она ни была.
2. Картинки должны быть иллюстрациями к тексту, а не просто бессвязно размещаться на страничке;
3. Не следует использовать слишком яркие, пестрые картинки, от которых могут уставать глаза. Лучше использовать более умеренные цветовые тона;
4. Следует помнить, что наш с Вами взгляд движется слева направо и сверху вниз, поэтому то на что Вы хотели бы обратить внимание, следует размещать в левом верхнем углу.

Какой формат GIF или JPG (JPEG) использовать? Здесь все относительно просто. Если изображение фотографического качества, то формат JPG наиболее подходящий в плане минимальных размеров файла при относительно неплохом качестве. При изображениях типа схем, значков, логотипов наиболее преемлем формат GIF. Кроме того формат GIF позволяет создавать "прозрачные" изображения, т.е. изображения без рамки, а также анимированные изображения. Все эти операции можно проделать с программой Adobe Photoshop. Преимущества этой программы в том, что она во-первых, не предъявляет столь высоких системных требований к компьютеру и при этом позволяет выполнять практически все действия с изображением. Опишу несколько приемов работы с этой программой, позволяющих делать файлы изображения для Web.

Задать размер изображения можно как при создании нового файла, так и при изменении готового. Во втором случае из пункта горизонтального меню Image (изображение), выбрать Image Size (Размер изображения). Изображения для Web как правило имеют разрешение 72 dpi (Dop per Inch - точек на дюйм). В нашем случае там стоит 300 dpi (поле Resolution, для которого выбрано pixels/inch).

Если изображение, которое Вы обрабатываете имеет большее разрешение, то в диалоговом окне, открывшемся после выбора указанного выше пункта меню, следует снять галочку напротив Resample Image, иначе будут потеряны пиксели, и установить разрешение 72 dpi. В случае изменения размеров изображение лучше установить режим соблюдения пропорций (Constrain Proportions) и внести в поле, которое по Вашему наиболее важное (высота или ширина), требуемую величину. Вторая величина будет рассчитана самой программой. Сканируете ли Вы изображение или видоизменяете какое-то готовое, пользуйтесь следующим правилом: правьте изображение с размерами в 2-3 раза превышающими тот, который Вы планируете разместить на страничке. После выполнения всех операций уменьшайте размер до требуемого с установленной галочкой в пункте Resample Image (Bicubic стоит по умолчанию, его менять не стоит).

Для сохранения изображения с учетом оптимального выбора размеров файла и качества, командой Save for Web (Сохранить для Web) из пункта горизонтального меню File (Файл) вызовите диалоговое окно Web-оптимизации. Выберите тип файла GIF или JPG. Программа сама Вам предложит варианты, где Вы сможете видеть как качество изображения, так и его размер.

В случае выбора GIF, можно задавать количество цветов. Изменяя параметры GIF, можно контролировать сглаживание (dither) и выбирать новые цвета, что позволяет получать интересные эффекты с цветовыми переходами. Можно выбрать какой-нибудь из предустановленных вариантов GIF с большим количеством цветов (к примеру 32), установить сглаживание и сократить количество цветов до четырех.