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


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

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

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

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

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

Сохранение GIF

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

Пункт Сохранить для Web в меню Файл для сохранения гифки в Фотошопе

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

Блок препросмотра в онке настроек параметров сохранения гифки в фотошопе

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

Блок настроек в окне параметров сохранения гифки в Фотошопе

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

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

Выбор вариантов просмотра в окне настроек параметров сохранения гифки в Фотошопе

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

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

Инструменты Рука и Масштаб в окне настроек параметров сохранения гифки в Фотошопе

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

Управление масштабом изображения в окне настроек параметров сохранения гифки в Фотошопе

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

Кнопка просмотра изображения в браузере в окне настроек параметров сохранения гифки в Фотошопе

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

Предпросмотр изображения в браузере по умолчанию при сохранении гифки в Фотошопе

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

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

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

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

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

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

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

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

    Примеры настройки максимального количества цветов в таблице индексирования при сохранении гифки в Фотошопе
  3. Web-цвета. Данная настройка устанавливает допуск, с которым оттенки преобразуются в эквивалентные из безопасной Web-палитры. Вес файла определяется значением, выставляемым ползунком: значение выше – файл меньше. При настройке Web-цветов не стоит также забывать и о качестве.

    Настройка допуска преобразования цветов изображения в Web-цвета при сохранении гифки в Фотошопе

    Пример:

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

    Настройка дизеринга при сохранении гифки в Фотошопе

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

    Пример:

    Примеры применения настроек дизеринга при сохранении гифки в Фотошопе
  5. Прозрачность. Формат GIF поддерживает только абсолютно прозрачные, либо абсолютно непрозрачные пиксели.

    Настройка прозрачности фона при сохранении гифки в Фотошопе

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

    Примеры применения подстройки Матовый при сохранении гифки в Фотошопе

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

    Настройка смешивания пикселей изображения с фоном страницы ри сохранении гифки в Фотошопе
  6. Чересстрочно. Одна из самых полезных для Web настроек. В том случае, если файл имеет значительный вес, позволяет сразу показывать картинку на странице, по мере загрузки улучшая ее качество.

    Настройка чересстрочности при сохранении гифки в Фотошопе

  7. Преобразование sRGB помогает сохранить максимум оригинальных цветов изображения при сохранении.

    Настройка преобразования цветов в sRGB при сохранении гифки в Фотошопе

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

Настройки дизеринга прозрачности и потерь данных при сохранении гифки в Фотошопе

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

Практика

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

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

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

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

      Настройка параметров эталонного изображения при сохранении гифки в Фотошопе

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

    Сравнение результата оптимизации изображения с оригиналом при сохранении гифки в Фотошопе

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

      Настройка параметров целевого изображения при сохранении гифки в Фотошопе

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

    Снижение размера изображения после оптимизации при сохранении гифки в Фотошопе

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

    Настройка уровня допустимых потерь данных при сжатии GIF для сохранения гифки в Фотошопе

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

    Размер изображения после настройки потерь при сохранении гифки в Фотошопе

    Итого, мы смогли снизить размер картинки примерно на 10 КБ, что составляет более 30%. Весьма неплохой результат.

  6. Дальнейшие действия весьма просты. Нажимаем на кнопку «Сохранить». Кнопка Сохранить в окне настроек сохранения гифки в Фотошопе

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

    Выбор места и имени сохранения гифки в Фотошопе

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

    Сохрание гифки вместе с HTML документом в Фотошопе

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

    Папка с сохраненной гифкой в Фотошопе

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

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

Помогла ли Вам статья?
Да Нет
Задайте вопрос или оставьте мнение
Получить ответ на Email
Уведомить о

11 ответов
По рейтингу
Новые Старые
Межтекстовые Отзывы
Посмотреть все комментарии
TRAYHARDPLAY
20 декабря 2017 22:56

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

Аноним
4 февраля 2021 23:07
Ответить на  TRAYHARDPLAY

Тот же вопрос.

Аноним
8 мая 2018 16:11

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

Татьяна
10 мая 2018 10:11

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

1
Татьяна
10 мая 2018 10:51

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

Татьяна
14 мая 2018 13:30
Ответить на  Сергей Николаев

Спасибо!! Все получилось!!!!

Яков
15 августа 2018 16:41

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

Олег
29 августа 2018 01:22

Здравствуйте. У меня такой вопрос. Почему GIF’ы, созданные в Photoshop, не воспроизводятся в Telegram у людей, которым я отправляю GIF (пробовал отправлять и на iOS-клиенты, и на PC-клиенты). Вместо этого у них отображается статичная картинка в пахабнейшем качестве. Так же я провёл эксперименты на онлайн-сервисах по созданию GIF. И GIF’ы, созданные в одних сервисах, так же не читаются в Telegram. А GIF’ы, созданные в других сервисах – воспроизводятся. Выходит, не все GIF’ы одинаково полезны? Или у Telegram проблемы с GIF’ами?

Инструкции по операционным системам:
AndroidAndroid iOSiOS Windows 11Windows 11 Windows 10Windows 10 Windows 7Windows 7 Windows 8Windows 8 Windows XPWindows XP Общее по компьютерамОбщее по компьютерам LinuxLinux macOSmacOS
Инструкции по мессенджерам и соц.сетям:
ВконтактеВконтакте ОдноклассникиОдноклассники TelegramTelegram ViberViber WhatsAppWhatsApp SkypeSkype ZoomZoom InstagramInstagram
Инструкции по работе в программах:
WordWord ExcelExcel PowerPointPowerPoint OutlookOutlook DirectXDirectX PhotoshopPhotoshop LightroomLightroom Premiere ProPremiere Pro Google ChromeGoogle Chrome Яндекс БраузерЯндекс Браузер Mozilla FirefoxMozilla Firefox OperaOpera Internet ExplorerInternet Explorer Уроки по остальным браузерамПо остальным браузерам Расширения для браузеровРасширения браузеров Уроки по антивирусамПо антивирусам AvastAvast AudacityAudacity Apple IDApple ID AutoCADAutoCAD BandicamBandicam BlueStacksBlueStacks DAEMON ToolsDAEMON Tools DiscordDiscord Epic GamesEpic Games FL StudioFL Studio HamachiHamachi iСloudiСloud iTunesiTunes OBSOBS OriginOrigin Play MarketPlay Market Sony VegasSony Vegas SpotifySpotify SteamSteam TeamViewerTeamViewer The Bat!The Bat! TikTokTikTok TunngleTunngle UltraISOUltraISO uTorrentuTorrent VirtualBoxVirtualBox Торрент клиентыТоррент клиенты Яндекс ДискЯндекс Диск Яндекс.КартыЯндекс.Карты Яндекс.НавигаторЯндекс.Навигатор В остальных программахВ остальных программах Драйвера для устройствДрайвера Подборки программПодобрать программу Остальные программыСкачать программы
Инструкции по онлайн-сервисам:
ЯндексЯндекс GoogleGoogle ДзенДзен YouTubeYouTube FacebookFacebook TwitterTwitter AliExpressAliExpress AvitoAvito ChatGPTChatGPT QiwiQiwi Другие онлайн-сервисыДругие сервисы Все о почтеВсе о почте Яндекс почтаЯндекс почта GmailGmail Почта Mail.ruПочта Mail.ru Рамблер почтаРамблер почта
Инструкции по телефонам:
SamsungSamsung XiaomiXiaomi HuaweiHuawei Прошивки устройствПрошивки телефонов ТелефонОбщие по телефонам
Инструкции по периферийным устройствам:
МышкаМышка КлавиатураКлавиатура ПринтерПринтер РоутерРоутер ФлешкаФлешка Карта памятиКарта памяти HDMIHDMI Игровые консолиИгровые консоли Яндекс СтанцияЯндекс Станция AirPodsAirPods
Инструкции по комплектующим:
Материнская платаМатеринская плата ПроцессорПроцессор ВидеокартаВидеокарта SSD дискиSSD диски Жесткий дискЖесткий диск BIOSBIOS