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

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

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

Сохранение GIF

Для начала повторим материал и ознакомимся с окном настроек сохранения. Открывается оно нажатием на пункт «Сохранить для Web» в меню «Файл».

Окно состоит из двух частей: блока предпросмотра

и блока настроек.

Блок предпросмотра

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

Изображение в каждом окне, кроме оригинала, настраивается отдельно. Это сделано для того, чтобы можно было выбрать оптимальный вариант.

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

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

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

В окне обозревателя, кроме набора параметров, мы можем также получить HTML код гифки.

Блок настроек

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

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

Вот несколько примеров применения схем.

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

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

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

Подстройка называется «Матовый» (в некоторых редакциях «Кайма»). С ее помощью настраивается смешивание пикселей картинки с фоном страницы, на которой она будет расположена. Для наилучшего отображения выбирают цвет, соответствующий цвету фона сайта.

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

Для наилучшего понимания процесса настройки сохранения гифки в Фотошопе, необходимо попрактиковаться.

Практика

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

После обработки картинки переходим в меню «Файл – Сохранить для Web».
Выставляем режим просмотра «4 варианта».

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

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

Сравним полученный результат с оригиналом. В нижней части окна с образцом мы можем видеть текущий размер гифки и скорость ее загрузки при указанной скорости интернета.

Схему оставляем без изменений.
Количество цветов уменьшаем до 128.
Значение «Дизеринга» снижаем до 90%.
Web-цвета не трогаем, так как в данном случае это нам не поможет сохранить качество.

Размер гифки снизился с 36,59 КБ до 26,85 КБ.

Нам удалось еще уменьшить объем файла, при этом немного потеряв в качестве. Гифка теперь весит 25,9 килобайт.

Выбираем место для сохранения, даем название гифке, и снова жмем «Сохранить».

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

В результате получим страницу и папку с изображением.

Совет: при присвоении имени файлу старайтесь не использовать кириллические символы, поскольку не все браузеры в состоянии их прочитать.

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

Помимо этой статьи, на сайте еще 12714 инструкций. Добавьте сайт Lumpics.ru в закладки (CTRL+D) и мы точно еще пригодимся вам.

Отблагодарите автора, поделитесь статьей в социальных сетях.

Помогла ли вам эта статья? Поделиться статьей в социальных сетях: Еще статьи по данной теме:

Warning: Invalid argument supplied for foreach() in /var/www/lumpics/data/www/lumpics.ru/wp-content/plugins/comment-images-reloaded/front/front-functions.php on line 266

КАК СОХРАНИТЬ БЕЗ ОПТИМИЗАЦИИ .

У меня теперь сохраняется гифка с одинаковым изображением по всему экрану. Лучше бы не открывала данный сайт:(((((((((

Здравствуйте, что Вы имеете в виду? Если вариант с HTML-страницей, то просто откройте папку рядом с HTML-файлом и заберите гифку оттуда.

Добрый день! Спасибо, что ответили. Когда я ставлю на просмотр и гифка открывается в браузере, там весь экран занят баннером (приложила). Попыталась перекинуть в созданную папку, у меня сохраняется как чтмл файл, без изображения и он когда открываю гифку, то в браузере нет ничего

Здравствуйте еще раз , Татьяна) Если вам непременно нужен HTML, то при сохранении выберите «Настройки по умолчанию» в списке «Настройки». Скорее всего, у Вас там выставлено «Фоновое изображение», что и заполняет страницу полностью (repeat). Если необходимо сохранить только изображение, то в списке «Формат» выберите соответствующий пункт.

Спасибо огромное! Все верно, теперь открывается в единственном экземпляре:))))) А Вы можете подсказать, почему при сохранении в списке «Формат» картинкой, он сохраняется не гифку, а только первую картинку а в HTML, изображения этот файл я не могу, к примеру, отправить по почте или перекинуть в другую папку. Он у меня автоматически переходит в формат только чтмл

Не совсем понял про «первую картинку», дайте больше информации, плс. А по поводу HTML — в коде страницы прописан путь до картинки, которая лежит рядом с файлом HTML. Если его перенести в другую папку, то путь уже будет неверным и браузер не найдет изображение. Я уж писал Вам, что можно взять гифку из папки, так она как раз и лежит в «images». То есть при сохранении в «HTML с изображениями» можно передать другому пользователю только и файл (страницу) и папку вместе.

📎📎📎📎📎📎📎📎📎📎