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

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

Если Вас интересуют другие варианты сохранения анимации, то рекомендуем прочитать вот эту статью:

Урок: Как сохранить видео в Фотошопе

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

Урок: Создаем простую анимацию в Фотошопе

Содержание

Сохранение GIF
Блок предпросмотра
Блок настроек
Практика
Вопросы и ответы

Сохранение GIF

Для начала повторим материал и ознакомимся с окном настроек сохранения. Открывается оно нажатием на пункт «Сохранить для Web» в меню «Файл».
Оптимизация и сохранение изображений в формате GIF - 865177254775
Окно состоит из двух частей: блока предпросмотра
Оптимизация и сохранение изображений в формате GIF - 865177275767
и блока настроек.
Оптимизация и сохранение изображений в формате GIF - 865177292407
Блок предпросмотра

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

В левой верхней части блока находится небольшой набор инструментов. Мы будем пользоваться только «Рукой» и «Масштабом».
Оптимизация и сохранение изображений в формате GIF - 865177321847
При помощи «Руки» можно перемещать изображение внутри выбранного окна. Выбор также производится данным инструментом. «Масштаб» выполняет одноименное действие. Приближать и удалять картинку можно и кнопками в нижней части блока.
Оптимизация и сохранение изображений в формате GIF - 865177334647
Чуть ниже находится кнопка с надписью «Просмотр». Она открывает выбранный вариант в браузере по умолчанию.
Оптимизация и сохранение изображений в формате GIF - 865177344631
В окне обозревателя, кроме набора параметров, мы можем также получить HTML код гифки.
Оптимизация и сохранение изображений в формате GIF - 865177369463
Блок настроек

В данном блоке происходит настройка параметров изображения, рассмотрим его подробнее.

Цветовая схема. Данная настройка определяет, какая таблица индексированных цветов будет применена к изображению при оптимизации.
Оптимизация и сохранение изображений в формате GIF - 865177392759
Перцепционная, а попросту «схема восприятия». При ее применении Фотошоп создает таблицу цветов, руководствуясь текущими оттенками изображения. По мнению разработчиков, эта таблица максимально приближена к тому, как человеческий глаз видит цвета. Плюс – наиболее приближенное к оригиналу изображение, цвета максимально сохранены.
Селективная схема похожа на предыдущую, но в ней преимущественно используются цвета, относящиеся к безопасным для web. Здесь также сделан упор на отображение оттенков, приближенных к исходным.
Адаптивная. В данном случае таблица создается из цветов, которые чаще встречаются в изображении.
Ограниченная. Состоит из 77 цветов, часть образцов которых заменены белым цветом в виде точки (зерна).
Заказная. При выборе этой схемы появляется возможность создать собственную палитру.
Черно-белое. В этой таблице используются только два цвета (черный и белый), также с использованием зернистости.
В градациях серого. Здесь применяются различные 84 уровня оттенков серого цвета.
MacOS и Windows. Данные таблицы составляются на основании особенностей отображения картинок в браузерах под управлением этих операционных систем.

Вот несколько примеров применения схем.
Оптимизация и сохранение изображений в формате GIF - 865177405559
Как видим, первые три образца имеют вполне приемлемое качество. Несмотря на то, что визуально они почти не отличаются друг от друга, на разных изображениях эти схемы будут работать по-разному.
Максимальное количество цветов в цветовой таблице.
Оптимизация и сохранение изображений в формате GIF - 865177429367
Количество оттенков в изображении напрямую влияет на его вес, а соответственно и на скорость загрузки в браузере. Чаще всего применяется значение 128, поскольку такая настройка почти не влияет на качество, при этом уменьшая вес гифки.
Оптимизация и сохранение изображений в формате GIF - 865177446519
Web-цвета. Данная настройка устанавливает допуск, с которым оттенки преобразуются в эквивалентные из безопасной Web-палитры. Вес файла определяется значением, выставляемым ползунком: значение выше – файл меньше. При настройке Web-цветов не стоит также забывать и о качестве.
Оптимизация и сохранение изображений в формате GIF - 865177455735
Пример:
Оптимизация и сохранение изображений в формате GIF - 865177463927
Дизеринг позволяет сгладить переходы между цветами с помощью смешивания оттенков, которые содержатся в выбранной таблице индексирования.
Оптимизация и сохранение изображений в формате GIF - 865177472887
Также настройка поможет, насколько возможно, сохранить градиенты и целостность однотонных участков. При применении дизеринга увеличивается вес файла.

Пример:
Оптимизация и сохранение изображений в формате GIF - 865177486967
Прозрачность. Формат GIF поддерживает только абсолютно прозрачные, либо абсолютно непрозрачные пиксели.
Оптимизация и сохранение изображений в формате GIF - 865177498999
Этот параметр, без дополнительной подстройки, плохо отображает кривые линии, оставляя пиксельные лесенки.
Оптимизация и сохранение изображений в формате GIF - 865177508727
Подстройка называется «Матовый» (в некоторых редакциях «Кайма»). С ее помощью настраивается смешивание пикселей картинки с фоном страницы, на которой она будет расположена. Для наилучшего отображения выбирают цвет, соответствующий цвету фона сайта.
Оптимизация и сохранение изображений в формате GIF - 865177575031
Чересстрочно. Одна из самых полезных для Web настроек. В том случае, если файл имеет значительный вес, позволяет сразу показывать картинку на странице, по мере загрузки улучшая ее качество.
Оптимизация и сохранение изображений в формате GIF - 865177622391
Преобразование sRGB помогает сохранить максимум оригинальных цветов изображения при сохранении.
Оптимизация и сохранение изображений в формате GIF - 865177661559
Настройка «Дизеринг прозрачности» значительно ухудшает качество изображения, а о параметре «Потери» мы поговорим в практической части урока.
Оптимизация и сохранение изображений в формате GIF - 865177713271
Для наилучшего понимания процесса настройки сохранения гифки в Фотошопе, необходимо попрактиковаться.
Практика

Цель оптимизации изображений для интернета – максимальное снижение веса файла при сохранении качества.

После обработки картинки переходим в меню «Файл – Сохранить для Web».
Выставляем режим просмотра «4 варианта».
Оптимизация и сохранение изображений в формате GIF - 865177768055
Далее нужно один из вариантов сделать максимально похожим на оригинал. Пусть это будет картинка справа от исходника. Делается это для того, чтобы оценить размер файла при максимальном качестве.

Настройки параметров следующие:

Цветовая схема «Селективная».
«Цвета» – 265.
«Дизеринг» – «Случайное», 100 %.
Убираем галку напротив параметра «Чересстрочное», поскольку конечный объем изображения будет довольно маленьким.
«Web-цвета» и «Потери» – ноль.
Оптимизация и сохранение изображений в формате GIF - 865177818231
Сравним полученный результат с оригиналом. В нижней части окна с образцом мы можем видеть текущий размер гифки и скорость ее загрузки при указанной скорости интернета.
Оптимизация и сохранение изображений в формате GIF - 865177929591
Переходим на картинку ниже только что настроенной. Попробуем ее оптимизировать.

Схему оставляем без изменений.
Количество цветов уменьшаем до 128.
Значение «Дизеринга» снижаем до 90%.
Web-цвета не трогаем, так как в данном случае это нам не поможет сохранить качество.
Оптимизация и сохранение изображений в формате GIF - 865177977975
Размер гифки снизился с 36,59 КБ до 26,85 КБ.
Оптимизация и сохранение изображений в формате GIF - 865178041463
Поскольку на картинке уже присутствует некоторая зернистость и небольшие дефекты, попробуем увеличить «Потери». Данный параметр определяет допустимый уровень потери данных при сжатии GIF. Меняем значение на 8.
Оптимизация и сохранение изображений в формате GIF - 865178083959
Нам удалось еще уменьшить объем файла, при этом немного потеряв в качестве. Гифка теперь весит 25,9 килобайт.
Оптимизация и сохранение изображений в формате GIF - 865178143863
Итого, мы смогли снизить размер картинки примерно на 10 КБ, что составляет более 30%. Весьма неплохой результат.
Дальнейшие действия весьма просты. Нажимаем на кнопку «Сохранить».
Оптимизация и сохранение изображений в формате GIF - 865178184055
Выбираем место для сохранения, даем название гифке, и снова жмем «Сохранить».
Оптимизация и сохранение изображений в формате GIF - 865178241399
Обратите внимание, что существует возможность вместе с GIF создать и HTML документ, в который будет встроена наша картинка. Для этого лучше выбрать пустую папку.
Оптимизация и сохранение изображений в формате GIF - 865178253431
В результате получим страницу и папку с изображением.
Оптимизация и сохранение изображений в формате GIF - 865178272631
Совет: при присвоении имени файлу старайтесь не использовать кириллические символы, поскольку не все браузеры в состоянии их прочитать.

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

#ФотоУроки

Комментарии

Комментариев нет.