Изображения для WWW или Web как и изображения, предназначенные для печати на бумаге, должны быть красивыми, высокого качества и со смыслом. Однако есть 5 основных факторов, на которые надо обращать внимание при подготовке изображения для веб-страницы.

1. Формат файла изображения
Когда готовиться изображение для печати на бумаге, не думают о том, чем будет смотреть читатель это изображение. В этом случае инструмент один – человеческий глаз. Но когда готовиться изображение для Web, надо знать, что веб-страницу возможно будут просматривать миллионы читателей с разных уголков планеты на экранах персональных компьютеров, ноутбуков и прочих устройств под управлением различных операционных систем, используя различные браузеры. На сегодняшний день в Web, в основном, используются 3 типа изображений: GIF, JPEG (JPG) и PNG. Следовательно, при подготовке изображения для Web надо сохранять картинку с расширением gif, jpeg (jpg) и png. Также очень популярны файлы flash-анимации (.swf).

2. Скорость
Этот фактор является отличительной особенностью изображений для Web. Для того чтобы пользователь просмотрел изображение (проще говоря, картинку из Интернета), нужно чтобы она скачалась на его компьютер. Очевидно, что этого свойства нет у напечатанных на бумаге изображений. Мы же не ждем пока картинка появится на бумажной газете, которая у нас в руках.

Что может сделать веб-мастер, чтоб посетитель сайта был в ожидании минимум времени? Один из путей – это уменьшение размера файла. То есть чем меньше байтов весит файл, тем быстрее отобразится изображение. Задача минимизации размера файла картинки требует определенного опыта, навыков и знаний о графических редакторах и свойствах компьютерных изображений.

Скажем лишь, что если создана картинка на компьютере с использованием до 256 цветов, то, обычно, её сохраняют в формате GIF, что дает минимальный размер с сохранением качества картинки. Для фотографий и изображений с большим количеством цветов пользуются форматом JPEG.

3. Цвет
Количество цветов поддерживаемых мониторами различных устройств могут быть разными. Это придется учитывать при подготовке изображений для Web.

Например, на 8-битном мониторе 32-битное изображение будет отображаться с некоторым искажением. Цвета, которых нет на 8-битном мониторе, будут заменены другими, более или менее близкими. Это действие называется dithering, результат которого не всегда красив.

Сравните эти две картинки:

4. Прозрачность
Эффект прозрачности картинки можно использовать для разных целей. Наложенные друг на друга картинки могут дать изумительный эффект. Например, дать ощущение выпуклости объектов страницы. Вот пример наложения прозрачной картинки на разные фоны:

GIF и PNG могут хранить прозрачные картинки. Файлы типа JPEG прозрачными быть не могут.

5. Анимация
Анимации на бумажных газетах и журналах на сегодняшний день пока нет. В Web же она встречается на каждом шагу. Пример:

GIF-файлы могут быть анимированными. Технология Flash обладает богатыми возможностями анимации для веб-страниц.

При работе с компьютерными изображениями часто используется термин «пиксель», от "PICture ELement". Пиксель это отдельная точка, входящая в состав картинки. Компьютерное изображение состоит из множества цветных пикселей, расположенных в строках и столбцах. На экране монитора пискели собраны так плотно, что человеческий глаз их не замечает, а видит цельное изображение. Изображение, как и любой другой вид информации, на компьютере хранится как совокупность битов. Для хранения одного пикселя может потребоваться разное количество битов. Количество используемых битов определяет сколько цветов или оттенков серого будут использованы для отображения картинки. Количество битов, используемых для отображения каждого пикселя, называется «глубиной цвета» (color depth).

Например, в 8-мибитном режиме монитор использует 8 бит для каждого пикселя. Это позволяет использовать 2⁸=256 различных цветов или 256 оттенков серого. Также возможны 16-битные, 24-битные, 32-битные и прочие режимы.

Качество отображаемой картинки зависит и от того, сколько пикселей одновременно в ширину и высоту (так называемое разрешение, resolution) монитора может поддерживать операционная система и сколько бит тратится для отображения каждого пикселя.

Например, мониторы системы VGA, имеющие разрешение 600x480 пикселей, отображают одновременно около 300 тысяч пикселей; мониторы SVGA имеющие разрешение 800x600, отображают одновременно около 480 тысяч пикселей; мониторы системы True Color на каждый пиксель используют 24 бита, что обеспечивает более 16 миллионов различных цветов и оттенков.