Оптимизация изображений для WWW: разные форматы — разные подходы

Подготовить изображение для размещения в интернете означает подобрать подходящий формат и свойства файла: качество JPEG-сжатия, режим чересстрочного вывода GIF и т.п. Если при этом используется индексированный цвет, может потребоваться коррекция цветовой палитры — чтобы свести к минимуму нежелательные эффекты смешения. Настройка этих параметров для получения приемлемого качества файла и времени его загрузки на веб-странице с учетом средней скорости соединения и называется оптимизацией изображения. В графических редакторах, таких как Photoshop и Illustrator, команда для такой оптимизации называется Save for Web… (Сохранить для веб...).

Основное место в окне занимает панель со вкладками, где отображается оптимизируемое изображение. На вкладке Original (Исходный вид) изображение выводится в том виде, в каком оно было создано; на вкладке Optimized (Оптимизированный вид) — так, как оно будет выглядеть при сохранении с выбранными параметрами. Для оценки степени сжатия и смешения обычно приходится по несколько раз переходить от одной вкладки к другой. Как правило, удобнее использовать вкладку 2-up (Два вида), где рядом отображаются исходная и оптимизированная версии (или две оптимизированные). Вкладка 4-up (Четыре вида) разделена на четыре части — и оригинал можно сравнивать с тремя оптимизированными версиями.

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

Для последней проверки оптимизированное изображение лучше просмотреть непосредственно в браузере. Для этого нужно щелкнуть на пиктограмме браузера, расположенной в нижнем правом углу области просмотра диалогового окна Save for Web (Сохранить для Web). При этом запускается используемый по умолчанию браузер, и изображение загружается в том виде, как оно будет выглядеть на веб-странице. (Для этой операции создается временная веб-страница, на которой, кроме изображения, приводятся еще и некоторые сведения о параметрах оптимизации и HTML-коде, используемом для размещения изображения.) Если же на компьютере установлено несколько браузеров — а именно так поступает большинство профессиональных веб-разработчиков — с пиктограммой будет связан раскрывающийся список, из которого можно выбрать нужный браузер.

Считается хорошей практикой возможность просмотра веб-страниц в как можно большем количестве браузеров — поэтому разработчику также желательно просмотреть страницу на как можно большем количестве платформ.

Размер оптимизируемого изображения тоже можно изменить — пожалуй, это единственный способ уменьшить геометрические размеры при сжатии. На вкладке Image Size (Размер изображения), расположенной в нижнем правом углу диалогового окна Save for Web (Сохранить для Web), можно выбрать новый размер изображения, указав его высоту и ширину либо в абсолютных единицах, либо в процентах. В Photoshop можно выбрать метод интерполяции изображения: Smooth (Плавно) или Jagged (Резко) — в полном диалоговом окне изменения размера Photoshop они соответствуют бикубической интерполяции и интерполяции по соседним пикселям. В Illustrator вопрос интерполяции не стоит, так как изменяются размеры векторного оригинала.

Слева от панели просмотра изображений, в диалоговом окне Save for Web (Сохранить для Web), находится своеобразная мини-панель инструментов. В Illustrator таких инструментов всего три: "рука" для перемещения изображения в окне, если в выбранном масштабе оно не помещается на панели целиком; "лупа" для увеличения (выбрать инструмент и щелкнуть на изображении) и уменьшения масштаба (те же действия — но при нажатой клавише Alt); "пипетка" для подбора цвета.

Независимо от выбранного инструмента, в нижней части окна приводятся постоянно обновляемые данные о цвете пиксела, на который наведен курсор. Речь идет о значениях красной, зеленой и синей составляющих, а также альфа-канала для полупрозрачных изображений. Обозначенное рядом шестнадцатеричное число представляет собой красный, зеленый и синий компоненты, объединенные в 24-разрядное значение, которое и записано в шестнадцатеричном формате.

Наконец, для файловых форматов с индексированием цвета (GIF и PNG-8) приводится индекс цвета в палитре. Слева от данных о цвете находится поле, в котором вводится коэффициент увеличения.

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

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

Проще всего выбрать стандартную заготовку из списка Settings (Параметры). Набор элементов управления изменится в зависимости от выбранного формата файла — например, для GIF это число цветов в палитре.

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

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

Оптимизация форматов GIF и PNG

Больше всего параметров у формата GIF. Первый из них (слева направо, в верхней строке) — это значение от 0 до 100, соответствующее объему потерь при сжатии изображения. Конечно, это удивляет — ведь GIF-файлы сжимаются по алгоритму без потерь. Но уже стало общепринятой практикой предоставлять пользователю возможность отбросить некоторую часть информации, прежде чем применять LZW-алгоритм,— таким образом повышается эффективность сжатия. Поскольку отброшенная информация не восстанавливается, получаем комбинированную процедуру сжатия с потерями. Но даже при небольшом уровне потерь (менее 10) размер файла может ощутимо сократиться без заметного изменения качества изображения. А вот при больших потерях получаются неприглядные артефакты.

Объем потерь указывается непосредственно в поле Lossy (Потери) или на шкале, которая появляется, если навести курсор на треугольник рядом с этим полем и некоторое время удерживать кнопку мыши нажатой.

Вторая строка параметров используется для выбора цветовой палитры. Из расположенного слева раскрывающегося списка выбирается способ ее построения. В основной набор входят Perceptual (Перцепционная), Selective (Избирательная), Adaptive (Адаптивная — то есть построенная из цветов исходного изображения) и Web (фиксированный набор веб-безопасных цветов). В Photoshop предусмотрено несколько дополнительных фиксированных палитр: системные палитры MacOS и Windows, а также черно-белая (один бит на цвет) и палитра серых полутонов.

Первые три способа построения палитр различаются цветовыми приоритетами в изображении. В перцепционном методе приоритеты определяются чувствительностью человеческого глаза к различным цветам: чем лучше мы воспринимаем цвет, тем выше его приоритет. В избирательном алгоритме (предлагаемом по умолчанию) предпочтение отдается областям однородного цвета и веб-безопасным цветам. Этот алгоритм создавался с расчетом на GIF-сжатие и возможности браузеров. В адаптивном методе приоритет цвета определяется интенсивностью его использования в данном изображении.

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

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

Чтобы увидеть, насколько браузер исказит изображение, выберите из упомянутого раскрывающегося списка или же на правой панели диалогового окна Save for Web (Сохранить для Web) режим Browser Dither (Смешение браузера), а в ImageReady — команду View — Preview — Browser Dither (Вид — Просмотр — Смешение браузера).

В первом режиме, No Dither (Без смешения), не предпринимается никаких попыток смешения — эта операция целиком возлагается на браузер, что может привести к постеризации. В режиме Pattern (Узор) смешение напоминает традиционное полутоновое растрирование, используемое в печати для получения большого количества цветов из ограниченного набора чернил. В веб-изображениях регулярные узоры обычно получаются слишком явными. В режимах Diffusion (Диффузия) и Noise (Шум) вносится элемент случайности, отчего смешение становится менее заметным. Если изображение разбито на фрагменты для отдельной загрузки, в режиме Diffusion (Диффузия) между такими фрагментами иногда образуются видимые края; в режиме Noise (Шум) этого не наблюдается. Для режима Diffusion (Диффузия) указывается интенсивность диффузии в процентах — это значение либо вводится непосредственно, либо выбирается на шкале, которая появляется по щелчку на расположенной рядом треугольной стрелке.

Следующие два параметра предназначены для прозрачных областей изображения. Если включить режим Transparency (Прозрачность), прозрачным областям будет назначен цвет, который в палитре GIF соответствует прозрачности. Другими словами, те области изображения, которые в Photoshop были прозрачными, такими и останутся — так что сквозь GIF-файл, размещенный на веб-странице, будет проступать фон. Вместо этого в поле Matte (Маска) можно выбрать цвет, которым будут заполняться полностью прозрачные области.

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

В раскрывающемся списке Matte (Маска) предлагаются следующие режимы: None (Нет) — где цвет маски отсутствует; Eyedropper Color (Цвет пипетки), где цвет маски соответствует последнему выделению, сделанному инструментом "пипетка" с мини-панели инструментов; White (Белый); Black (Черный); Other… (Другой...), когда выводится окно цветоподборщика.

Если в созданном вами простом изображении нет прозрачных областей, скопируйте его и создайте такие области в Photoshop с помощью ластика, включив режим сглаживания краев. Вернитесь в диалоговое окно Save for Web (Сохранить для Web), выберите тип файла GIF и просмотрите изображение в браузере. Поэкспериментируйте с различными цветами маски, просматривая результаты.

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

Параметры формата PNG-8 идентичны GIF, за исключением того что там не предусмотрено сжатие с потерями. У формата PNG-24 параметров меньше всего — и они самые простые: переключатели чересстрочного вывода и прозрачности, а также поле для выбора цвета маски.

Оптимизация JPEG

Природа JPEG-изображений коренным образом отличается от изображений GIF и PNG, поэтому и параметры оптимизации у них другие. Здесь тоже есть поле выбора цвета маски, но, поскольку в формате JPEG прозрачность не поддерживается, этим цветом заполняются только прозрачные области — если выбрать режим None (Нет), то происходит заполнение белым цветом. Кроме того, здесь предусмотрен переключатель прогрессивной загрузки, подобной описанному выше чересстрочному выводу. Остальные параметры JPEG определяются характерными свойствами этого формата.

Самый важный из них — качество сжатия с потерями. Это компромисс между качеством изображения — тем, насколько сжатое изображение будет близко к оригиналу, и размером файла. Чем выше качество, тем больше размер. Но в действительности этот показатель — только параметр процедуры сжатия, определяющий количество отбрасываемых данных. Его влияние на восприятие изображения зависит от самого изображения. Некоторые изображения вполне нормально выглядят даже при низких уровнях качества — однако другие при таких же условиях совершенно разрушаются. При настройке этого параметра лучше пользоваться режимами просмотра с двумя и четырьмя видами, чтобы отслеживать изменения сразу, до сохранения файла.

Есть три способа выбора качества. Самый простой — выбрать один из вариантов в предлагаемом списке: Low (Низкое), Medium (Среднее), High (Высокое) или Maximum (Максимальное). Более точная градация зачастую практически не дает видимого эффекта. Но при желании можно ввести числовое значение в поле Quality (Качество) или подобрать его на шкале, щелкнув на расположенной рядом треугольной стрелке.

Над полем Quality (Качество) есть переключатель с интригующей надписью Optimized (Оптимизированный). Этот параметр означает дополнительное сжатие JPEG-файла с использованием еще одного свойства этого стандарта. Однако не все браузеры способны восстановить такое изображение, поэтому иногда от этого режима отказываются из соображений совместимости.

Под полем Quality (Качество) находится еще одно поле ввода со шкалой для настройки размытия по Гауссу, применяемого к изображению перед сжатием. Благодаря размытию уменьшается влияние артефактов, возникающих при высоких уровнях JPEG-сжатия. При размещении изображений в Web размытие применяется постоянно, хотя изображение при этом, как и следовало ожидать, может несколько расплываться.

В JPEG-файлы можно включать цветовые профили ICC (International Color Consortium), используемые программным обеспечением, предназначенным для управления цветом,— например Apple ColorSync. В цветовой профиль записываются свойства устройства, на котором было создано изображение (такие как гамма монитора) — браузер, поддерживающий цветовые профили, учитывает их при отображении на устройстве с другими характеристиками. Для того чтобы встроить цветовой профиль в JPEG-файл, нужно активировать переключатель ICC Profile (ICC-профиль). Однако следует учитывать, что это возможно только если профиль был сохранен в исходном формате изображения.

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

Если вы заметите, что многократно используете одни и те же значения, можете сохранить их в виде заготовки, добавив ее к стандартным вариантам, представленным в раскрывающемся списке Settings (Параметры). Для этого нужно выбрать команду Save Settings… (Сохранить параметры...) из меню палитры Optimize (Оптимизировать) в ImageReady или ее эквивалент в диалоговом окне Save for Web (Сохранить для Web). Поскольку такие заготовки сохраняются в обычных файлах, откроется окно сохранения файла — и вам останется только назначить имя выбранной группе значений. Под этим именем она появится в раскрывающемся списке Settings (Параметры). Если впоследствии вы решите, что эта заготовка больше не нужна, вы сможете удалить ее с помощью команды Delete Settings (Удалить параметры) из меню палитры. По этой команде удаляется заготовка, выделенная в данный момент.

Если у вас нет желания углубляться в тонкости выбора формата и настройки его параметров, эту операцию можно произвести быстрее (и, вероятно, грубее). Для этого нужно выбрать из раскрывающегося списка заготовок Settings (Параметры) в диалоговом окне Save for Web (Сохранить для Web) — в Illustrator это окно проще, так как там не предусматривается разделение изображения на фрагменты. В Save for Web нужно, во-первых, задать размер файла, который должен получиться, и, во-вторых, указать, следует ли использовать в качестве отправной точки текущие параметры или же всё (в том числе формат файла) должно определяться автоматически. Конечно, последний вариант проще — но это означает передачу контроля над многочисленными параметрами программе (другими словами, вам придется согласиться с готовыми решениями программистов).

Статьи по теме

Комментирование кода и генерация документации в PHP

Зачем нужны комментарии к программному коду? В каком виде их писать? Где они нужны, а где нет? Как правильно комментировать код? Как прид�...

2024-04-22

Что такое CSS-модули и зачем они нам?

В последнее время меня интригуют CSS-модули. Если вы о них не слышали — эта статья для вас. Мы рассмотрим, что это за проект, какие задачи о�...

2024-04-22

23 сервиса для эффективного экспресс-аудита любого сайта

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

2024-04-17

Яндекс переходит на новую версию Wordstat

Часть старой функциональности уже недоступна. Обновленный Яндекс Вордстат полностью перейдет на основной домен wordstat.ru 20 марта. С...

2024-04-08

Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть

Она умеет распознавать эмоции человека по голосу. Алгоритм-эмпат определяет характер речи пользователя: говорит он с явным негатив...

2024-04-08

Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI

Скорость обработки сложных научных статей составляет менее трех секунд. Новое поколение моделей ИИ от компании Antropic под названием Cl...

2024-04-08

Как пользоваться GPT 4 и Claude бесплатно и без VPN

Как бесплатно пользоваться GPT 4, его плагинами, а также новой нейросетью Claude 3? Это можно делать в рамках одного сайта, который называет�...

2024-04-08

Как использовать анимацию с помощью JavaScript-библиотеки GSAP

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

2024-03-13

Использование GSAP 3 для веб-анимации

Использование GSAP 3 для веб-анимации От автора: Greensock Animation Platform (GSAP) — это простая в использовании библиотека JavaScript для веб-анимации....

2024-03-13

Мерч и IT: на что обратить внимание в 2024 году

Оглавление Смена поколений Живой контакт Трансляция ценностей Офлайн-мероприятия Пользоввательский контент Биг б�...

2024-02-17

Копируем с RSync: основные примеры синхронизации файлов

RSync это быстрый и чрезвычайно универсальный инструмент для синхронизации (копирования) файлов. Его самое основное преимущество это пер...

2024-02-16

Лучшие noCode AI платформы для создания диалоговых ботов

Про GPT знают уже все, да? Но даже про его возможности не все осведомлены. Например, знаете ли вы, что GPT можно обучать непосредственно н�...

2024-02-15

Факторы ранжирования Google 2024 — исследование Semrush

Рассказываем самое важное об исследовании более 60 предполагаемых факторов ранжирования. Компания Semrush провела исследование...

2024-02-14

Перенос сайта на другой хостинг

Как перенести сайт на хостинг самостоятельно, что подготовить до и проверить после смены хостинг-провайдера. Содержание Бэ...

2024-02-12

В России сформирован реестр хостинг-провайдеров

Роскомнадзор сформировал реестр провайдеров хостинга. С 1 февраля компаниям, не включенным в этот реестр, запрещено оказывать услуги х�...

2024-02-05