Главная » Оптимизация изображений для WWW: разные форматы — разные подходы
Подготовка изображений для веб — это вечный торг, стремлениевыиграть в качестве за счет размера, и наоборот. Главное здесь —грамотно подобрать параметры и не продешевить.
Подготовить изображение для размещения в интернете означаетподобрать подходящий формат и свойства файла: качество JPEG-сжатия,режим чересстрочного вывода GIF и т.п. Если при этом используетсяиндексированный цвет, может потребоваться коррекция цветовой палитры —чтобы свести к минимуму нежелательные эффекты смешения. Настройка этихпараметров для получения приемлемого качества файла и времени егозагрузки на веб-странице с учетом средней скорости соединения иназывается оптимизацией изображения. В графических редакторах, такихкак Photoshop и Illustrator, команда для такой оптимизации называетсяSave for Web… (Сохранить для веб...). Основное место в окне занимает панель со вкладками, где отображаетсяоптимизируемое изображение. На вкладке Original (Исходный вид)изображение выводится в том виде, в каком оно было создано; на вкладкеOptimized (Оптимизированный вид) — так, как оно будет выглядеть присохранении с выбранными параметрами. Для оценки степени сжатия исмешения обычно приходится по несколько раз переходить от одной вкладкик другой. Как правило, удобнее использовать вкладку 2-up (Два вида),где рядом отображаются исходная и оптимизированная версии (или двеоптимизированные). Вкладка 4-up (Четыре вида) разделена на четыре части— и оригинал можно сравнивать с тремя оптимизированными версиями. 
$IMAGE1$
 Под оптимизированным изображением приводятся его основныехарактеристики, в том числе формат, основные параметры оптимизации,размер файла и приблизительное время загрузки. Пропускная способностьканала, на основе которой делается эта оценка, выбирается в основномраскрывающемся списке диалогового окна. Для последней проверки оптимизированное изображение лучшепросмотреть непосредственно в браузере. Для этого нужно щелкнуть напиктограмме браузера, расположенной в нижнем правом углу областипросмотра диалогового окна Save for Web (Сохранить для Web). При этомзапускается используемый по умолчанию браузер, и изображениезагружается в том виде, как оно будет выглядеть на веб-странице. (Дляэтой операции создается временная веб-страница, на которой, кромеизображения, приводятся еще и некоторые сведения о параметрахоптимизации и HTML-коде, используемом для размещения изображения.) Еслиже на компьютере установлено несколько браузеров — а именно такпоступает большинство профессиональных веб-разработчиков — спиктограммой будет связан раскрывающийся список, из которого можновыбрать нужный браузер. Считается хорошей практикой возможность просмотра веб-страниц в какможно большем количестве браузеров — поэтому разработчику такжежелательно просмотреть страницу на как можно большем количествеплатформ. Размер оптимизируемого изображения тоже можно изменить — пожалуй,это единственный способ уменьшить геометрические размеры при сжатии. Навкладке Image Size (Размер изображения), расположенной в нижнем правомуглу диалогового окна Save for Web (Сохранить для Web), можно выбратьновый размер изображения, указав его высоту и ширину либо в абсолютныхединицах, либо в процентах. В Photoshop можно выбрать методинтерполяции изображения: Smooth (Плавно) или Jagged (Резко) — в полномдиалоговом окне изменения размера Photoshop они соответствуютбикубической интерполяции и интерполяции по соседним пикселям. ВIllustrator вопрос интерполяции не стоит, так как изменяются размерывекторного оригинала. Слева от панели просмотра изображений, в диалоговом окне Save forWeb (Сохранить для Web), находится своеобразная мини-панельинструментов. В Illustrator таких инструментов всего три: "рука" дляперемещения изображения в окне, если в выбранном масштабе оно непомещается на панели целиком; "лупа" для увеличения (выбрать инструменти щелкнуть на изображении) и уменьшения масштаба (те же действия — нопри нажатой клавише Alt); "пипетка" для подбора цвета. Независимо от выбранного инструмента, в нижней части окна приводятсяпостоянно обновляемые данные о цвете пиксела, на который наведенкурсор. Речь идет о значениях красной, зеленой и синей составляющих, атакже альфа-канала для полупрозрачных изображений. Обозначенное рядомшестнадцатеричное число представляет собой красный, зеленый и синийкомпоненты, объединенные в 24-разрядное значение, которое и записано вшестнадцатеричном формате. Наконец, для файловых форматов с индексированием цвета (GIF и PNG-8)приводится индекс цвета в палитре. Слева от данных о цвете находитсяполе, в котором вводится коэффициент увеличения. В Photoshop на мини-панели инструментов есть еще один инструмент,предназначенный для выделения фрагментов, на которые может быть разбитоизображение, и их независимой оптимизации. Кнопка, расположенная подмини-панелью, предназначена для включения и отключения отображенияграниц фрагментов. Категория: Веб-дизайн | Просмотров: 186