Изображения на Web-страницах
Существует большое количество разных форматов файлов с картинками, отличающихся друг от друга способами хранения информации о цвете, а также дополнительными возможностями, такими, как сжатие информации, хранение нескольких отдельных картинок в одном файле, хранение уменьшеной версии исходной картинки для быстрого просмотра и т.д. Наиболее распространенными форматами являются: TIFF (TIF), JPEG (JPG), GIF, BMP, TGA, PCX.
Формат графических файлов, предназначенных для размещения на сайте, может быть выбран из двух:
GIF и JPG (JPEG). Любые другие форматы неприемлимы. При выборе одного из двух форматов необходимо
руководствоваться следующими соображениями:
GIF - формат 256 цветов;
JPG - формат True Color.
Фотографии и другие реалистичные изображения с плавными цветовыми переходами сохраняются в формате
JPG. Графики, диаграммы, схемы, картинки с большими областями одного цвета сохраняются в формате
GIF. Обычно те изображения, которые хорошо сжимаются GIF'ом, гораздо хуже (в 10 раз) сжимаются
JPG'ом, и наоборот.
И GIF и JPG хранят картинки в сжатом виде. Однако сжимают они картинки принципиально разными способами.
GIF в точности сохраняет все изображение в том виде, как она была создана (если при ее создании
было использовано меньше 256 цветов). Сжатие происходит за счет эффективной кодировки повторяющихся
участков изображения. JPG использует другой способ сжатия, при этом часть информации теряется,
однако сжимается картинка гораздо лучше. При сохранении файла в формате JPG обычно есть возможность
выбрать соотношение качество/сжатие. Рекомендуется сохранять изображения в двух форматах, TIF и JPG,
чтобы при желании можно было вернуться к варианту без потерь.
Работа с изображениями
Все программы обработки изображений обеспечивают примерно одинаковый набор базовых операций с изображениями. В основном используют программы Adobe PhotoShop, Corel Photo Paint, Macromedia xRes, Paint Shop (pro), Aldus Photo Styler и некоторые другие. Дальнейшие объяснения здесь будут даваться на примере программы Adobe PhotoShop.
Основное правило, которым надо руководствоваться при редактировании картинок: редактировать в режиме True Color. Для этого весь исходный материал (отсканированные изображения, например) надо перевести в True Color при помощи соответствующей команды "Mode/RGB Color". При этом совсем не обязательно, чтобы монитор мог отображать все цвета картинки, поскольку математические операции внутри программы все равно будут производится в пространстве True Color.
Размер изображения в идеале должен изменяться только один раз, так как при каждом изменении размеров в любую сторону часть информации теряется - изображение становится хуже. Физический размер картинки - число точек по горизонтали и вертикали - не всегда соответсвует видимому на экране, т.к. многие графические программы умеют изменять масштаб видимой части. Чтобы увидеть реальные габариты изображения, надо дать команду "Window/Zoom Factor/1" или дважды щелкнуть по лупе на панели инструментов.
Специфика WWW
Чем меньше объем картинки, тем быстрее она покажется на страничке пользователя. Более того,
если картинки имеют слишком большой размер, то часто люди просто отказываются дожидаться окончания
приема и идут дальше либо возвращаются к предыдущей странице. Практика показывает, что для пользователей
с модемами средней скорости суммарный объем изображений выглядит так:
- полностью допустимый
менее 40 килобайт;
- предельно допустимый 120 килобайт.
Для уменьшения объема рекомендуется:
- В создаваемой графике использовать минимально возможное количество цветов. Обычно при переводе созданного изображения из True Color в Indexed Color есть возможность выбрать число цветов в результирующей картинке. Рекомендуется поэкспериментировать с разными значениями и выбрать приемлемое.
- Поэкспериментировать с различными коэффициентами сжатия для формата JPG. При увеличении сжатия обычно появляются видимые артефакты, однако на некоторых изображениях они хорошо заметны, на других - маскируются самим изображением.
- При переводе изображения из формата True Color в Indexed Color есть возможность составлять цвета, которые нельзя передать точно, смешивая их из близко расположенных точек другого цвета. Процесс этот называется dithering и существенно ухудшает сжатие.
Если несколько картинок расположены рядом, то их можно объединить в одну большую. Такое решение имеет свои плюсы и минусы.
- Доводы за:
- Одна большая картинка принимается быстрее нескольких маленьких того же суммарного объема. Происходит так из-за того, что браузер и вебсервер "договариваются" о передаче только один раз.
- Автор полностью контролирует расположение элементов внутри картинки, тогда как несколько отдельных картинок могут менять свое расположение при изменении размеров окна и шрифтов браузера. Точное расположение мелких картинок на странице контролировать труднее.
- Против:
- Обычно браузер помнит картинки, которые он принял для предыдущих страничек. Поэтому, если одни и те же картинки используются на нескольких страничках, то они не принимаются каждый раз заново и время загрузки страницы существенно уменьшается.
- Мелкие картинки легче менять.
Трюки
GIF файл обычно состоит из двух частей - заголовка и собственно картинки. Однако стандарт GIF89a позволяет одному GIF файлу содержать несколько картинок и блоков информации другого типа:
- Блоки комментариев (comment blocks) содержат текст, описывающий картинку, определяющий ее автора, копирайт и т.п. Блоки комментариев не отображаются как часть картинки.
- Текстовые блоки (plain text blocks) определяют текст, который должен изображаться поверх картинки. Могут быть указаны положение и цвет текста.
- Управляющие блоки (control blocks) определяют прозрачный цвет и дают некоторую возможность подьзовательского ввода.
- Собственные блоки (application blocks). Программы могут включать в GIF файл собственную информацию, имеющую смысл только для них самих.
Не все программы, обрабатывающие GIF файлы, "знают" об их сложной структуре. Например, если с помощью GIF Construction Set придать картинке свойство прозрачности, а затем открыть ее и сохранить в PhotoShop, то она станет обычной.
Возможности формата GIF, часто использующиеся при создании веб-страничек:
- Прозрачность
(transparency)
Часть картинки можно сделать прозрачной. При этом вместо одного выбранного цвета становится виден фон странички. В GIF Construction Set надо предварительно добавить Control Block, а затем отредактировать его, указав прозрачный цвет. - Чередование (interlace)
Многие программы программы умеют сохранять картинку таким образом, что при ее просмотре браузером сначала появляется грубое подобие картинки, затем все лучшее ее приближение к оригиналу. Это позволяет быстро составить о ней представление и скрашивает ожидание для пользователей с медленными линиями связи. - Анимация (animation)
Как уже говорилось, один GIF файл может содержать несколько картинок. Если включить в файл блок Loop, то эти картинки будут показываться по очереди, в замкнутом цикле.
Формат JPG значительно уступает GIF в части количества трюков. Существует возможность сохранить файл JPG типа progressive - некоторого аналога interlaced GIF. Выглядит это как быстро появляющееся размытое изображение, которое затем становится резким.
Перейти на: Home Создание сайта Начало страницы