Пять элементов идеальной обработки изображений в веб-дизайне
Автор：Eve Cole
Время обновления：2009-06-20 16:51:39
1. Формат: формат PNG предпочтителен для изображений простой формы, созданных компьютером (например, логотипов и значков), а фотографии с насыщенными цветами должны быть в формате JPEG. Если цветов мало и градиентов нет, следует использовать формат GIF.
GIF — наиболее часто используемый формат изображений в Интернете. GIF поддерживает до 256 цветов и работает практически со всеми изображениями, кроме фотографий. Он также имеет возможность создавать простые анимации и прозрачные изображения.
Формат PNG является относительно новым и также рекомендован W3C. PNG-8 может содержать до 256 цветов, что сравнимо с GIF; PNG-24 поддерживает режим RGB, который может отображать любой цвет с более высоким качеством; PNG-32 добавляет альфа-канал на основе PNG-24, который можно сделать прозрачным.
JPEG может сохранять около 16,7 миллионов цветов и часто используется для сохранения фотографий. Но в остальном JPEG практически не используется. Если изображение содержит менее 256 цветов или содержит большие области сплошных цветов, JPEG не будет работать должным образом — размер файла можно увеличить вдвое, чтобы получить изображение высокого качества.
При выборе формата изображения следует всесторонне учитывать сферу его использования, например, цвет, прозрачность, анимацию и т. д., как подробно описано ниже. Различные параметры можно сравнить с помощью мастера экспорта Photoshop или Fireworks. Критерием выбора является то, что размер файла должен быть как можно меньшим при сохранении приемлемого качества изображения.
2. Для печати цветных изображений следует использовать режим RGB, а не режим CMYK. Не беспокойтесь о безопасных для браузера цветах, поскольку почти никто больше не использует 8-битные мониторы. Выбор цвета должен основываться на единых стандартах, таких как системы визуальной идентификации (VI). Количество и влияние цветов являются важными факторами при определении формата изображения. Например, цветовые градиенты часто создают большое количество цветов. При сохранении в формате GIF произойдет искажение, и в этом случае размер файла также значительно увеличится. следует рассмотреть возможность использования формата PNG-24, PNG-32 или JPEG.
3. Размер. Изображения, созданные с помощью инструментов создания векторов, часто подходят для сохранения в формате PNG, и их размер следует определять в инструменте векторного рисования. После преобразования в растровое изображение его невозможно легко масштабировать (особенно не следует увеличивать). ). Стоит отметить, что файлы PNG, созданные в Fireworks, содержат редактируемую информацию, такую как слои, а линии, фигуры и текст в них представляют собой векторную графику. При применении такого изображения к веб-странице сначала необходимо выполнить операцию вывода для сжатия размера файла, а выходное изображение PNG также будет преобразовано в растровое изображение, поскольку редактируемая информация будет потеряна. Поэтому настройку размера изображения следует выполнить до операции вывода. Растровое изображение не масштабируется, чтобы контуры и градиенты изображения были достаточно четкими.
Для существующих растровых изображений и фотографий вам следует использовать Photoshop и другое программное обеспечение для настройки размера перед вставкой их на веб-страницу вместо использования атрибутов ширины и высоты в языке HTML для изменения размера изображения. Непосредственное использование языка HTML для управления размером изображения может привести к серьезному искажению изображения.
Как правило, изображения, размещаемые на веб-страницах, должны иметь относительно небольшой размер. При смешивании с текстом ширина должна составлять около 300 пикселей. Даже если он отображается один, ширина должна быть меньше 600 пикселей. Что касается высоты, то целесообразно не превышать одного экрана.
4. Прозрачные GIF и PNG поддерживают прозрачность, но по-разному. GIF просто делает один или несколько цветов полностью прозрачными, не учитывая прозрачность соседних цветов градиента. Это означает, что если цвет фона существенно изменится (или будет содержать несколько контрастных цветов), то переход к прозрачной части не будет плавным и будет очевидная разделительная линия. Если вы хотите создать прозрачный GIF-файл, необходимо установить цвет фона холста таким же (или близким к нему) цвету фона целевого эффекта. PNG не имеет этой проблемы, и его также можно сделать полупрозрачным.
Однако IE6 по умолчанию не может правильно отображать прозрачные PNG, и необходимо принять соответствующие меры.
5. Анимация на анимированных веб-страницах обычно включает Flash и анимированный GIF. Flash обладает мощными функциями, богатыми эффектами, высоким качеством изображения и мощным программным обеспечением для создания. В большинстве случаев это предпочтительная форма веб-анимации. Недостатком анимированного GIF является то, что он может использовать не более 256 цветов и сложно создавать анимацию со сложными эффектами. Однако его преимуществом является то, что файл имеет небольшой размер и может воспроизводиться в любом старом или современном браузере без подключения. - в поддержку.
