Параметры оптимизации для изображений и анимированных файлов GIF

Форматы веб-графики могут быть битовыми (растровыми) или векторными. К битовым форматам относятся GIF, JPEG и PNG, которые зависят от разрешения, то есть от размеров растрового изображения. Использование различных разрешений экрана монитора может привести к изменению качества. К векторным форматам относятся SVG и SWF, которые не зависят от разрешения и поддерживают масштабирование без потери качества изображения. Векторные форматы могут также содержать растровые данные. 

Параметры оптимизации JPEG

Формат JPEG является стандартом сжатия нерастрированных изображений, например фотографий. Оптимизация изображения в формате JPEG основана на сжатии с потерями вследствие выборочного удаления данных.

Определяет уровень сжатия. Чем выше значение параметра «Качество», тем более детальным будет алгоритм сжатия. Однако использование параметра «Высокое качество» приводит к увеличению размера файла по сравнению с использованием параметра «Низкое качество». Оптимизированное изображение можно просматривать с различными настройками качества для определения оптимального баланса качества и размера файла.

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

Отображает изображение постепенно в веб-браузере. Изображение отображается в виде ряда наложений, что позволяет зрителям увидеть версию изображения с низким разрешением перед его полной загрузкой. Для параметра «Прогрессивный» необходимо использование формата Оптимизированный JPEG.

 Отображение формата «Прогрессивный JPEG» требует большего объема оперативной памяти, этот формат поддерживается не всеми браузерами.

Задает степень размытия изображения. При выборе этого параметра создается эффект, аналогичный фильтру «Размытие по Гауссу», и обеспечивается дополнительное сжатие, что уменьшает размер файла. Рекомендуется использовать значение от 0,1 до 0,5.

Сохраняет цветовые профили в оптимизированном файле. В некоторых браузерах для цветокоррекции используются цветовые профили.

Задается цвет заливки для пикселей, которые в исходном изображении были прозрачными. Чтобы выбрать цвет в палитре цветов, щелкните «Образец цвета подложки» или укажите параметр в меню «Подложка»: «Цвет пипетки» (для использования цвета в поле образцов пипетки), «Основной цвет», «Цвет фона», «Белый», «Черный» или «Другой» (для использования палитры цветов).

Полностью прозрачные пиксели исходного изображения заполняются выделенным цветом. Частично прозрачные пиксели исходного изображения смешиваются с выбранным цветом.

Параметры оптимизации для форматов GIF и PNG‑8

Формат GIF является стандартным форматом сжатия изображений с одноцветными и четкими деталями, например, штриховыми рисунками, логотипами или иллюстрациями с текстом. Как и формат GIF, формат PNG-8 эффективно сжимает сплошные области цвета, сохраняя четкость деталей.

Файлы PNG-8 и GIF поддерживают 8-битные цвета, поэтому они могут отображать до 256 цветов. Процесс определения используемых цветов называется индексированием, поэтому изображения в форматах GIF и PNG‑8 иногда называют изображениями индексированных цветов. Для преобразования изображения в индексированные цвета используется таблица поиска цветов, в которой хранятся и индексируются цвета, используемые в изображении. Если цвет в исходном изображении не отображается в таблице поиска цвета, приложение либо выбирает ближайший к нему цвет в таблице, либо имитирует цвет, используя сочетание доступных цветов.

Кроме приведенных ниже параметров, можно задать количество цветов в таблице цветов изображения.

Уменьшение размера файла путем выборочного удаления данных. Чем выше значение параметра "С потерями", тем больше данных удаляется. Часто можно применить значение "С потерями", равное 5-10, а иногда и до 50, не ухудшая изображение. Изменение значения параметра «Потери» может привести к уменьшению размеры файла на 5 — 40 %.

 Параметр «Потери» нельзя использовать одновременно с параметром «Чересстрочно», алгоритмами «Шум» или «Регулярный дизеринг».

Определяет метод создания таблицы поиска цвета и количество цветов, которое должно быть в таблице поиска цвета. Можно выбрать один из следующих методов уменьшения цветового искажения:

Перцепционная Создает пользовательскую таблицу цветов, отдавая предпочтение цветам, к которым человеческий глаз наиболее чувствителен.

Селективная Создает таблицу цветов, аналогичную таблице «Перцепционная», но отдавая предпочтение областям большого размера и сохранению веб-цветов. В этой таблице цветов обычно получаются изображения с наибольшей цветопередачей. Выборочно — это параметр по умолчанию.

Адаптивная Создает таблицу путем выборки цветов из преобладающего спектра в изображении. Например, для изображения, в котором присутствуют только зеленый и синий цвета, таблица цветов будет состоять в основном из синего и зеленого оттенков. Большинство изображений концентрируют цвета в определенных областях спектра.

Ограниченная (Web) Используется стандартная таблица из 216 цветов, применяемая в Windows и Mac OS в палитрах с 8-разрядной глубиной цвета (256 цветов). Этот параметр позволяет избежать применения дизеринга в браузере к цветам, когда изображение отображается с использованием 8-битного цвета. (Эта палитра также называется веб-безопасной палитрой.) Использование веб-палитры позволяет создавать файлы большего размера. Эту функцию рекомендуется использовать только в тех случаях, когда настоятельно рекомендуется избегать дизеринга в браузере.

Заказная Применяется палитра цветов, созданная или измененная пользователем. При открытии существующего файла GIF или PNG‑8 в нем будет пользовательская палитра цветов.

 Таблица цветов изображения настраивается с помощью палитры «Таблица цветов» в диалоговом окне «Сохранить для Web и устройств».

«Черно-белый», «Оттенки серого», Mac OS, Windows Используется заданная палитра цветов.

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

Выберите один из указанных ниже способов дизеринга:

Диффузия Применяется случайный узор, менее заметный, чем в режиме «Регулярный дизеринг». Эффекты дизеринга распространяются на смежные пиксели.

Узор Для имитации цветов, отсутствующих в таблице цветов, применяется квадратный узор наподобие полутонового.

Шум Применяется случайный узор, подобный методу дизеринга «Случайный», но без распространения на смежные пиксели. При использовании метода дизеринга «Шум» швы не возникают.

Определяет способ оптимизации прозрачных пикселей в изображении.

• Чтобы сделать полностью прозрачные пиксели прозрачными и смешать частично прозрачные пиксели с цветом, выберите «Прозрачность» и укажите цвет подложки.

• Чтобы заполнить полностью прозрачные пиксели цветом и наложить их на частично прозрачные пиксели того же цвета, выберите цвет подложки и отмените выбор параметра «Прозрачность».

• Для выбора цвета подложки щелкните стрелку рядом с образцом цвета «Подложка» и выберите требуемый цвет в палитре цветов. Второй способ: выберите параметр в меню «Подложка»: Цвет пипетки (для использования цвета в поле образцов пипетки), Основной цвет, Цвет фона, «Белый», «Черный» или «Другой» (для использования палитры цветов).

 Параметры «Основной цвет» и «Цвет фона» доступны только в Photoshop.

A. Исходное изображение B. Прозрачность выбрана с цветом подложки C. Выбрана прозрачность без подложки D. Отключена прозрачность без подложки

При выборе параметра «Прозрачность» можно указать метод дизеринга частично прозрачных пикселей.

• При выборе параметра «Без дизеринга прозрачности» дизеринг к частично прозрачным пикселям в изображении не применяется.

• Применяется случайный узор, менее заметный, чем в режиме «Регулярный дизеринг». Эффекты дизеринга распространяются на смежные пиксели. Если выбран этот алгоритм, задайте процент дизеринга для управления степенью дизеринга, который применяется к изображению.

• В режиме «Регулярный дизеринг прозрачности» применяется квадратный узор наподобие полутонового для частично прозрачных пикселей.

• В режиме «Шумовой дизеринг прозрачности» применяется случайный узор, подобный узору в режиме «Случайный дизеринг», но без распространения на смежные пиксели. При использовании алгоритма «Шум» швы не возникают.

Отображает в браузере версию изображения с низким разрешением, пока загружается полный файл изображения. Чересстрочная развертка может сократить время загрузки и гарантировать пользователям, что загрузка выполняется. Однако чересстрочная развертка также увеличивает размер файла.

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

Оптимизация прозрачности в изображениях GIF и PNG

Прозрачность позволяет создавать непрямоугольные изображения для Интернета. Прозрачность фона сохраняет в изображении прозрачные пиксели.

Это позволяет видеть фон веб-страницы через прозрачные области изображения. Подложка фона имитирует прозрачность путем заполнения или слияния прозрачных пикселов с цветом подложки, который может совпадать с фоновым цветом веб-страницы. Подложка фона выглядит лучше всего при сплошном фоне веб-страницы, если известен его цвет.

Настроить оптимизацию прозрачных пикселей в изображениях GIF и PNG можно с помощью параметров «Прозрачность» и «Подложка» в диалоговом окне «Сохранить для Web и устройств».

• (GIF и PNG‑8) Чтобы сделать полностью прозрачные пиксели прозрачными и наложить частично прозрачные пиксели на цвет, выберите «Прозрачность» и укажите цвет подложки.
• Чтобы заполнить полностью прозрачные пиксели цветом и наложить их на частично прозрачные пиксели того же цвета, выберите цвет подложки и отмените выбор параметра «Прозрачность».
• (GIF и PNG‑8) Чтобы сделать все пиксели с прозрачностью более 50 % полностью прозрачными, а все пиксели с прозрачностью 50 % и менее полностью непрозрачными, установите флажок для параметра «Прозрачность» и укажите «Нет» в меню «Подложка».
• (PNG-24) Чтобы сохранить изображение с многоуровневой прозрачностью (до 256 уровней), выберите параметр "Прозрачность". Параметр "Подложка" отключен, поскольку многоуровневая прозрачность позволяет смешивать изображение с любым фоновым цветом.

 В браузерах, не поддерживающих прозрачность PNG‑24, прозрачные пикселы могут отображаться на фоновом цвете по умолчанию, например на сером.

Для выбора цвета подложки щелкните стрелку рядом с образцом цвета «Подложка» и выберите требуемый цвет в палитре цветов. Второй способ: выберите параметр в меню «Подложка»: Цвет пипетки (для использования цвета в поле образцов пипетки), Основной цвет, Цвет фона, «Белый», «Черный» или «Другой» (для использования палитры цветов).

 Параметры «Основной цвет» и «Цвет фона» доступны только в Photoshop.

Просмотр таблицы цветов для оптимизированного фрагмента

Таблица цветов для фрагмента отображается на панели Таблица цветов диалогового окна «Сохранить для Web и устройств».

Выберите фрагмент, оптимизированный в формате GIF или PNG‑8. Таблица цветов для выбранного фрагмента отобразится на палитре «Таблица цветов» диалогового окна «Сохранить для Web и устройств».

Если изображение содержит несколько фрагментов, цвета в таблице цветов могут различаться в разных фрагментах (чтобы избежать этого, можно сначала связать эти фрагменты). Если выбрано несколько фрагментов, использующих разные таблицы цветов, таблица цветов пуста, и в ее строке состояния отображается сообщение "Смешанная".

Настройка таблицы цветов для изображений GIF и PNG‑8

Цвета в оптимизированных изображениях GIF и PNG-8 настраиваются с помощью таблицы цветов в диалоговом окне «Сохранить для Web и устройств». Уменьшение количества цветов часто сохраняет качество изображения, одновременно уменьшая размер файла изображения.

Можно добавлять и удалять цвета в таблице цветов, сдвигать выбранные цвета в безопасные web-цвета и заблокировать выбранные цвета, чтобы предотвратить их удаление из палитры.

Сортировка таблицы цветов

Выберите порядок сортировки в меню палитры «Таблица цветов».

• При выборе параметра «Без сортировки» восстанавливается исходный порядок.
• Команда "Сортировать по оттенку" сортирует цвета по местоположению на стандартном цветовом круге (в градусах от 0 до 360). Нейтральным цветам присваивается оттенок 0, и они размещаются вместе с красными.
• Команда Сортировать по светимости сортирует цвета по светимости.
• Команда "Сортировать по частоте использования" сортирует цвета по частоте их появления в изображении.

Добавить новый цвет в таблицу цветов

Можно добавить цвета, которые остались при построении таблицы цветов. Добавление цвета в динамическую таблицу приводит к изменению цвета в палитре на наиболее близкий к новому цвету. Добавление цвета к фиксированной или пользовательской таблице добавляет дополнительный цвет к палитре.

Выбор цветов в таблице цветов

В таблице цветов вокруг выделенных цветов появляется белая рамка.

• Чтобы выбрать цвет, щелкните его в таблице цветов.
• Чтобы выбрать несколько цветов в таблице цветов, нажмите клавишу "SHIFT" и щелкните другой цвет. Будут выбраны все цвета в строках между первым и вторым выбранными цветами. Чтобы выбрать несмежную группу цветов, нажмите клавишу «Ctrl» (Windows) или «Command» (Mac OS) и щелкните нужные цвета. Кроме того, в меню палитры «Таблица цветов» доступны команды выбора цветов.
• Чтобы выбрать цвет в изображении предварительного просмотра, щелкните его инструментом «Пипетка» в диалоговом окне «Сохранить для Web и устройств». Чтобы выбрать несколько цветов, удерживайте нажатой клавишу «Shift».
• Чтобы отменить выбор всех цветов, выберите в меню палитры «Таблица цветов» пункт «Отменить выделение всех цветов».

Замена цвета

Выбранный цвет в таблице цветов можно изменить на любое другое значение цвета RGB. При повторном создании оптимизированного изображения выбранный цвет меняется на новый цвет в любом месте изображения.

Замена цветов на ближайшие эквивалентные цвета палитры Web

Чтобы предотвратить дизеринг цветов в браузере, можно заменить цвета на ближайшие эквивалентные цвета в веб-палитре. Это позволяет предотвратить дизеринг цветов, отображаемых в браузерах операционных систем Windows или Macintosh, которые поддерживают отображение только 256 цветов.

Преобразование цветов в прозрачность

Можно добавить прозрачность к оптимизированному изображению, сопоставляя существующие цвета с прозрачностью.

Блокировка или снятие блокировки цвета

В таблице цветов можно заблокировать выделенные цвета, чтобы предотвратить удаление этих цветов из палитры при уменьшении количества цветов, а также исключить дизеринг в приложении.

 Блокировка цветов не отменяет дизеринг в браузере.

Удалить выбранные цвета

Можно удалить выбранные цвета из таблицы цветов, чтобы уменьшить размер файла изображения. При удалении цвета области оптимизированного изображения, ранее включенные в этот цвет, повторно визуализируются с использованием ближайшего оставшегося в палитре цвета.

При удалении цвета таблица цветов автоматически заменяется на палитру "Пользовательская". Это происходит потому, что адаптивные, перцепционные и селективные палитры автоматически добавляют удаленный цвет обратно в палитру при повторной оптимизации изображения. При повторной оптимизации изображения палитра "Пользовательская" не изменяется.

Сохранение таблицы цветов

Можно сохранять цветовые таблицы из оптимизированных изображений для использования с другими изображениями, а также для загрузки цветовых таблиц, созданных в других приложениях. После загрузки новой таблицы цветов в изображение цвета оптимизированного изображения заменяются на цвета новой таблицы цветов.

Загрузка таблицы цветов

Параметры оптимизации PNG-24

Формат PNG-24 подходит для сжатия изображений с непрерывным тоном, однако размер файлов в этом формате намного больше, чем в формате JPEG. Преимущество формата PNG-24 заключается в том, что он позволяет сохранять в изображении до 256 уровней прозрачности.

Определите способ оптимизации прозрачных пикселов в изображении.

Отображает в браузере версию изображения с низким разрешением, пока загружается полный файл изображения. Чересстрочная развертка может сократить время загрузки и гарантировать пользователям, что загрузка выполняется. Однако чересстрочная развертка также увеличивает размер файла.