Оптимизация и сохранение изображений в формате GIF - TurboComputer.ru
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд (пока оценок нет)
Загрузка...

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

10 способов оптимизации GIF

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

Кстати, если вам часто приходится работать с анимированными GIF файлами, то возможно вам будет интересно просмотреть автоматизированное решение – Photoshop экшен « Gift Export », доступный на Envato, который берёт несколько изображений, автоматически загружает их в Photoshop и экспортирует в формат GIF.

1. Обрезка анимации

Для начала откройте видео-файл в Photoshop. Большая часть видео для всей последовательности GIF анимации нам не нужна, поэтому можете обрезать её, прибегнув к помощи панели Timeline (Временная шкала). Просмотрите видео и найдите подходящий фрагмент, а остальное удалите.

2. Уменьшение размера изображения

Вы можете уменьшить размер изображения с помощью меню Image (Изображение), либо сделать это чуть позже в диалоговом окне Save for Web (Сохранить для Web). Лично я предпочитаю уменьшать изображение в начале работы в диалоговом окне Image Size (Размер изображение), потому как вы сэкономите время, нежели будете делать это в конце при сохранении. При изменении размера изображения, видео-слой необходимо преобразовать в смарт-объект, но не стоит беспокоиться, это никак не повлияет на рабочий процесс.

3. Save for Web (Сохранить для Web)

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

4. Уменьшение количества кадров

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

5. Количество цветов

Наиболее важной опцией для оптимизации размера файла формата GIF является количество цветов, которые используются в таблице цветов. Максимальное их число 256 и ограничены они 8-битной глубиной. Вообще говоря, количество цветов вы можете уменьшить до 64 или менее. Здесь всё зависит от исходного видео, возможно, вам придётся увеличить их количество для получения лучшего результата.

6. Алгоритм сокращения цветов

  • Perceptual (Перцепционный) предназначен для создания пользовательской таблицы цветов, отдавая предпочтение тем тонам, которые чётко распознаёт глаз человека.
  • Selective (Селективный) создаёт таблицу цветов, аналогичную Перцепционной таблице, но созданную на ключевых оттенках изображения. В этом алгоритме предпочтение отдаётся web-цветам. В Photoshop он установлен по умолчанию.
  • Adaptive (Адаптивный) предназначен для создания пользовательской таблицы цветов спектра, преобладающих в изображении. К примеру, для изображения, в котором больше всего преобладает синих и зелёных цветов, будет создана таблица из синих и зелёных оттенков. Большинство оттенков изображения собирается в определённой области спектра.
  • Restrictive (Ограниченный) применяет стандартную палитру, состоящую из 216 безопасных web-цветов. Этот параметр гарантирует, что ни один браузер не применит дизеринг к цветам изображения с 8 битовой глубиной цвета. Если изображение имеет менее чем 216 цветов, то неиспользуемые цвета удалятся из таблицы.
  • Custom (Заказная) палитра цветов выбранных пользователем.

7. Dithering (Дизеринг)

Так как GIF-файлы содержат ограниченное количество цветов, вы можете имитировать недостающие цвета доступными при помощи сглаживания. Для этого в меню Dithering (Дизеринг) необходимо выбрать один из алгоритмов. Метод Diffusion (Случайный) предназначен для регулирования количества смешения. Методы Pattern (Регулярный) и Noise (Шум) не предназначены для этого. Чем больше сглаживание на изображении, тем больше будет размер файла. Смешение добавляет разноцветные пиксели вблизи друг от друга для имитации вторичных цветов или гладких градаций в цвете. Чтобы получился хороший результат, некоторые изображения должны содержать сглаживание. Но если вы хотите сохранить маленький размер файла, то сглаживание нужно использовать как можно меньше.

8. Другие опции

  • Web Snap (Web-оснастка) помогает предотвратить размытие в браузере. Делается это путём привязки некоторых цветов к безопасным web-цветам. Чем больше web-цветов, находящихся в GIF, тем меньше браузером будет использоваться сглаживание. При значении 0% цвета будут не затронуты, а при значении 100% все цвета в изображении изменятся для Web-безопасности.
  • Lossy (Потери) – данная опция контролирует степень потерь визуальной информации, которая способна уменьшать размер файла.
  • Если в изображении содержится прозрачность, то поставьте галочку возле опции Transparency (Непрозрачность) для сохранения прозрачных пикселей. Убрав галочку, тем самым частично или в полной мере прозрачные пиксели заполнятся матовым цветом.
  • При активной опции Interlaced (Чересстрочно) файлы формата GIF в браузере будут загружаться в несколько проходов.

9. Сравнение оригинала и оптимизированных версий

В результате добавления множества пользовательских изменений можно сравнить разницу в качестве и размере файла при помощи режима 2-Up (Два варианта).

10. Просмотр, сохранение настроек и оптимизация размера файла

Если в результате оптимизации GIF файла вы довольны окончательными настройками с возможностью предварительного просмотра в браузере, то не забудьте сохранить их в как пресет. Кроме того, вы можете указать ограничение на размер GIF файла при помощи дополнительной настройки Optimize to File Size (Оптимизация по размеру файла). После того, как вы её примените, программа Photoshop автоматически попытается подогнать размер с наилучшим качеством изображения.

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

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

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

Сохранение GIF

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Увеличение скорости интернета на модеме Yota


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


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

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


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

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

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


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


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

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

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

Практика

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

    Оптимизация анимации файлов GIF

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

    Формат GIF (Graphics Interchange Format) – формат сохранения изображений, поддерживающий до 256 цветов и в настоящее время применяется, в основном, для показа изображений на страничках сайтов интернета.

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

    Если линейный размер картинки большой, а кадров в анимации много, то значительно разрастается объём файла (1Мб и выше), что недопустимо для показа на страницах сайтов, т.к. большой объём файла замедляет, а при плохом соединении и делает невозможным, загрузку страницы сайта.

    Соответственно, при сохранении GIF-анимации, пользователь Photoshop должен оптимизировать анимацию так, чтобы объём готового файла минимальным при максимальном качестве.

    В этом материале я дам несколько советов по уменьшению веса выходного GIF-файла с минимальными потерями качества.

    1. Обрезка исходного видеоролика

    Если Вы создаёте анимацию из видеоролика, то для начала его необходимо открыть в Photoshop и посмотреть его длину на панели Окно –> Шкала времени (Window –> TimeLine). Как правило, большая часть кадров ролика для анимации не нужна, поэтому нужно выбрать необходимый участок, обрезав ролик сначала и с конца:

    2. Уменьшение линейного размера изображения

    Уменьшение ширины и высоты кадра анимации существенно уменьшает объём выходного файла. Это можно сделать в последнюю очередь, в окне “Сохранить для Web” (Save for Web), но я рекомендую уменьшать размер кадра с помощью команды Изображение –> Размер изображения (Image –> Image Size), особенно, если Вы работfте с версией выше CS6, у обновлённого инструмента появилось несколько дополнительных опций, в т.ч. окно предварительного просмотра. Подробнее о новшествах команды “Размер изображения” здесь.

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

    3. Уменьшение количества кадров при сохранении продолжительности и скорости воспроизведения

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

    Внимание! Перед преобразованием запомните время продолжительности показа!

    Затем вручную выделяем и удаляем, к примеру, каждый третий кадр (выделяем с зажатой Ctrl, затем нажимаем Delete).

    Затем выделяем все кадры на шкале (клик по первому кадру, зажать Shift, клик по последнему), клик по треугольничку в правом нижнем углу любого кадра, выбираем “Другое”, откроется окно, где вводим старую продолжительность клипа делённую на новое количество кадров:

    4. Уменьшение количества цветов

    Одним из наиболее действенных способов для уменьшения объёма файла анимации, поле уменьшения линейных размеров, является уменьшение количества цветов, используемых во всех кадрах. Максимальное количество цветов в 8-ми битном GIF`е – 256.
    Для начала можно уменьшить количество цветов до 64, а затем, в зависимости от результата, добавить цвета, если полученное изображение стало заметно хуже, либо уменьшить ещё, если качество визуально не ухудшилось.
    Предлагаемые Photoshop`ом количества цветов – 2, 4, 8, 16, 32, 64, 128, 256. Это не обязательные значения, Вы можете самостоятельно ввести произвольное количество цветов от 2 до 256:

    5. Отключение опции “Чересстрочно” (Interlaced)

    Включенная опция “Чересстрочно” даёт указание браузеру загружать изображение за несколько проходов. И при этом увеличивает объём файла примерно на 10 процентов!
    Что это значит? При медленном соединении и/или большом объёме файла полная загрузка изображения происходит медленно, т.е. пользователь после открытия веб-странички вначале лицезреет пустое место там, где должно быть изображение. Если же изображение загружается за несколько проходов, сначала подгружается “облегчённая” низкокачественная версия картинки, где рисунок состоит из крупных квадратов (низкое разрешение), и по мере подгрузки картинка приобретает свой обычный вид.

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

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

    7+ превосходных инструментов для оптимизации изображений

    Перевод статьи 8 Excellent Tools for Optimizing Your Images
    К сожалению на момент перевода один из сервисов перестал работать. Но хабровчане предложили еще много хороших решений!

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

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

    1. Smush.it!

    Smush.it использует методы оптимизации для конкретного формата изображения, чтобы удалить ненужные байты из файлов изображений. Она представляет собой инструмент оптимизации «без потерь», что означает, что оптимизирует изображение, не меняет внешний вид или визуальное качество. Smush.it работает на веб-странице. В приложении сообщается, сколько байт будет сэкономлено за счет оптимизации изображения страниц и предоставляется загружаемый файл Zip с обработанными файлами.

    2.RIOT

    RIOT — аббревиатура от Инструмент Радикальной Оптимизации Изображений. Оптимизатор картинок для пользователей Windows, который доступна как отдельное приложение или как расширение IrfanView. Приложение поддерживает JPG, PNG и GIF файлы и способно вырезать изображение метаданных для дальнейшего сокращения файла. Также имеет утилиты, позволяющие осуществлять основные виды редактирования изображений, такие как масштабирование и поворот и отражение.

    3.PNGOUT

    PNGOUT является общедоступным, бесплатным, без излишеств, инструментом для оптимизации ваших изображений. PNGOUT можно запустить в командной строке Windows или диалоговом окне Выполнить. Она имеет широкий выбор настроек способов сжатия файлаов. Большинство из популярных графических форматов файлов (таких как JPG, GIF и PNG) поддерживаются.

    К pngout можно добавить ключик /zl121 для совместимости со старыми парсерами png.
    Чтобы перепаковать jar можно использовать kzip с тем же ключом /zl121.

    И pngout, и kzip написал Ken Silverman.

    4.Online Image Optimizer

    Online Image Optimizer от Dynamic Drive представляет собой веб-инструмент для сжатия изображений. Вы можете указать ссылку на изображение, которое вы хотите оптимизировать, или загрузить его из локальной папки. Кроме оптимизации, вы можете выбрать тип итогового файла (по умолчанию получается тот же тип файла). Есть ограничение по размеру файла — 300 КБ.

    5.SuperGIF

    SuperGIF это бесплатная утилита для Windows и Mac OS, которая помогает оптимизировать GIF. Имеет интуитивно понятный и простой пользовательский интерфейс, может сжимать GIF на 50% и больше. В бесплатной версии можно оптимизировать одновременно только одно изображение, но в остальном имеет те же функции, что и коммерческая версия ($ 29,95), за исключением пакетной обработки.

    6.PNGGauntlet

    PNGGauntlet — это .NET приложение для PNGOUT. Оно может быть использовано для преобразования JPG, GIF, TGA, PCX, BMP и оптимизации содержимого PNG файлов. PNGGauntlet идеально подходит для тех, кто не привык работать через командную строку, но все же хотел бы воспользоваться улучшенный алгоритм оптимизации PNGOUT.

    7.SuperPNG

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

    P.S. А теперь — то, что посоветовали хабровчане.

    Картинки нет, так как данный плагин работает из командной строки. Работает в UNIX, LINUX а также в MS-DOS.
    Оптимизирует PNG. Использует различные методы сжатия, может удалять нежелательные вспомогательные блоки.
    Pngcrush имеет открытый исходный код.

    9.OptiPNG (спасибо Razunter)

    OptiPNG — как и следует из названия, оптимизатор PNG. Эта программа также преобразует другие форматы (BMP, GIF, PNM и TIFF) в оптимизированный PNG, и выполняет проверку целостности и исправлений.
    Имеет открытый исходный код, распространяется по zlib/libpng лицензии.

    10.punypng (спасибо Razunter)

    Веб- сервис по сжатию PNG, JPEG и GIF.
    Из последних обновлений:
    Предпросмотр качества итогового изображения.
    Удаление вашего изображения с сервера после 15 мин. после конвертации.
    Поддержка прозрачности.

    11.ImageOptim (спасибо Conquearse)

    Приложение для Mac-OC. Обрабатывает PNG, JPEG и GIF анимацию.
    ImageOptim сочетает в себе различные инструменты оптимизации: AdvPNG от AdvanceCOMP, OptiPNG, Pngcrush, JpegOptim, jpegtran от Libjpeg, Gifsicle и опционально PNGOUT.
    Открытый исходный код на условиях GPLv2.
    Поддерживает удобный drag’n’drop изображений в свое окно.

    Оптимизатор графики в формате PNG. Также конвертирует GIF и BMP в PNG.
    Позволяет тонко вручную или автоматически настроить размер PNG файла.

    Работает из командной строки. Умеет только одно, конвертирует 32-х битные PNG с альфа-прозрачностью в 8-и битные палитровые PNG с альфапрозрачностью. Но делает это очень хорошо, много лучше Fireworks, хотя тоже не без проблем.

    14. PictureBeaver (спасибо Carl_Linnaeus)
    Пример оптимизации:

    Автор — Артем Сапегин
    PictureBeaver автоматически оптимизирует веб-графику (в форматах PNG, GIF и JPEG), удаляя из файлов вспомогательные данные, которые не влияют на отображение. Обычно удаётся добиться сокращения объёма файлов на 10—30%.
    GIF без анимации переводится в PNG, если такие файлы выходят меньше. Для оптимизации используются бесплатные утилиты OptiPNG, jpegtran и Gifsicle.

    15. Color quantizer (спасибо Subdivision)

    Color quantizer — это небольшая программа позволяющая легко оптимизировать изображения для web.
    Основные возможности:

    конвертирование в произвольное количество цветов
    поддержка записи png8 с прозрачностью
    возможность задавать маску качества для важных участков
    удобное редактирование палитры
    автоматический подбор оптимальных параметров для PNGOUT

    Это — инструмент для GIF-ок. В основном — для разных UNIX. Портирована и под Win, но эта версия не поддерживается.
    Gара примеров:
    Обрезаем прозрачные рамки:
    gifsicle –crop-transparency src.gif > dest.gif

    Сжимаем анимированный (простой тоже можно… на несколько байт 🙂 GIF:
    gifsicle -O2 src.gif > dest.gif

    А это — для JPEG. Официальная программа от Independent JPEG Group.

    18. Webify (Спасибо zeka)

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

    19. PngOptimizer (Спасибо Enot_23)

    Очень удобный оптимайзер для Windows.
    Ужимает PNG, конвертит в PNG из BMP, GIF, TGA. Позволяет делать PNG-скриншоты.

    20. TweakPNG (Cпасибо stalkers)

    TweakPNG это низкоуровневая утилита для изучения и изменения PNG файлов й. Для Windows 2000 или выше. Для того, чтобы использовать его, вам нужно хоть немного разбираться в формате PNG.
    По словамstalkers здорово помогает с PNG, сохраненным в Photoshop CS2. Дело в том, что версии фотошопа ниже CS3 добавляют всякую фигню в файл, в т.ч. и данные о затемнении. В результате — в ИЕ картинка выглядит темнее, чем в других браузерах, т.к. все другие читали только непосредственно картинку.

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

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

    Итак, нам осталось рассмотреть, как выполняется оптимизация изображений в двух форматах: GIF и PNG. Но, если открыть меню выбора формата, можно заметить, что формат PNG имеет два варианта – PNG-8 и PNG-24. Так вот, особой разницы между параметрами сохранения в форматах GIF и PNG-8 нет, и диалоговые окна сохранения при выборе этих форматов в программе Adobe Photoshop выглядят одинаково.

    Поэтому разберем параметры сохранения в форматах GIF и PNG-24.

    Форматы GIF и PNG-8.

    Начнем с формата GIF. При выборе этого формата в окне Сохранить для Web и устройств можно увидеть следующую картинку:

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

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

    Доступны следующие варианты:

    • Перцепционная. Создается таблица цветов с предпочтением к тем, к которым наиболее чувствителен глаз человека.
    • Селективная. Здесь в таблице цветов будут присутствовать цвета, определяемые по размерам областей и с использованием Web-цветов. Этот вариант позволяет получить изображения с наибольшей достоверностью, поэтому он используется по умолчанию как наиболее часто применяемый.
    • Адаптивная. В этой таблице присутствуют цвета, преобладающие в спектре изображения.
    • Ограниченная. В этом случае используется таблица из 216 стандартных Web-цветов. Применение этого варианта может увеличить размер файла. Он рекомендован, если необходимо отменить дизеринг (о нем ниже).
    • Заказная (пользовательская). При выборе этого варианта пользователь может сам сформировать палитру цветов, используемых в изображении. При открытии ранее созданного файла в формате GIF и PNG-8 используется именно эта таблица. Как создается пользовательская таблица цветов, рассмотрим чуть ниже.
    • Черно-белое, В градациях серого, Mac-OS, Windows. В этих вариантах используются готовые таблицы цветов.

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

    • Без дизеринга. Здесь объяснять ничего не нужно.
    • Случайное. Для размытия используется случайный узор, который распространяется на соседние пиксели. Степень дизеринга можно изменять движком, увеличивая или уменьшая область размытия.
    • Регулярный. Используется регулярный квадратный узор.
    • Шум. Используется также случайный узор, но он не затрагивает соседние пиксели. В последних двух вариантах степень дизеринга не регулируется.

    Важнейшим качеством форматов GIF и PNG является возможность создания изображения с прозрачными областями. Это позволяет использовать картинки произвольной формы.

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

    В Photoshope можно также залить частично прозрачные участки каким-либо цветом. Для этого используется меню Матовый (тоже неудачный перевод, используется и другой — Кайма). Дело в том, что форматы GIF и PNG-8 не поддерживают полупрозрачность. Пиксели могут быть либо прозрачные, либо закрашенные. Поэтому при сохранении таких рисунков на краях могут появляться зазубрины, белые участки или другие артефакты. В меню есть следующие варианты:

    • Не показывать
    • Цвет пипетки
    • Основной цвет
    • Цвет фона
    • Белый
    • Черный
    • Другое.

    Думаю, они не требуют объяснения.

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

    Движок Web-цвета регулирует степень изменения цветов на сходные цвета Web-палитры.

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

    Часто правильное сокращение количества цветов в таблице дает возможность уменьшить размер файла при практически неизменном качестве изображения.

    Таковы основные возможности оптимизации изображений в форматах GIF и PNG-8. Но без практики трудно выбрать оптимальный вариант. Необходимо пробовать, постоянно оценивая размер файла и качество изображения. Универсального алгоритма оптимизации не существует. Выбор всех параметров зависит от самого изображения и целей, для которых он сохраняется.

    Формат PNG-24.

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

    Окно оптимизации в формате PNG-24 выглядит очень просто. Здесь мало настроек.

    • Прозрачность позволяет включить или выключить применение прозрачности в изображении.
    • Матовый (Кайма) определяет методы оптимизации прозрачных пикселей (аналогично форматам GIF и PNG-8).
    • Чересстрочно также аналогично такой команде в форматах GIF и PNG-8.

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

    Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

    Проголосуйте за статью, нажмите кнопку социальной сети.

    А пока посмотрите фотографии Варламовских чтений.

    7. Оптимизация GIF и PNG-8

    Задача

    Используя программу photoshop, научится получать изображения в форматах GIF и PNG-8 с минимальным весом при сохранении приемлемого качества.

    Заметка

    Хотя форматы GIF и PNG между собой довольно сильно отличаются, в данном уроке они объединены, т.к. в photoshop настройки оптимизации для них одинаковы.

    Чтобы начать «колдовать» над изображением, откроем панель оптимизации — выбираем меню File -> Save for web & Devices (Файл -> сохранить для Веб).

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

    Готовые установки

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

    Выбор формата

    В зависимости от выбранного формата, окно настроек меняет вид. Сейчас интересует формат GIF.

    Выбор алгоритма сокращения цветов

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

    Алгоритм сокращения цветов (Color reduction algorithm) определяет, какой схемой воспользуется Photoshop при преобразовании полноцветного изображения в индексированное (таблицу цветов):

    Perceptual (палитра на восприятие) создает цветовую таблицу на основе текущих цветов изображения. При этом особое внимание уделяется тому, как человек воспринимает цвета. Преимущество данной таблицы заключается в сохранении целостности цвета; Selective (выборочная палитра) аналогичная первой, но с предпочтением цветов web-безопасной палитры (принята по умолчанию, довольно близко сохраняет исходные цвета); Adaptive (адаптивная палитра) создаст цветовую таблицу из цветов, наиболее часто встречающихся в исходном изображении; Custom (заказная) палитра из выбранных пользователем цветов.

    Остальные варианты лучше не трогать: он приводят к значительным искажениям цветов изображения. Вариант Restrective (Web) хоть и кажется по названию наиболее подходящим, но это не так: сформирует палитру на основе 216 веб безопасных цветов. Качество изображения получится самым худшим. В добавок при выборе данного варианта в браузерах отключатся возможность смешивания цветов для получения недостающих (дизеринг). В данном методе уже нет смысла, современные мониторы давно уже поддерживают 24-битные цвета.

    А вот какой выбрать из рекомендуемых (Perceptual/Selective/Adaptive) однозначно посоветовать не получается: для разных изображений лучшим может оказаться любой, нужно пробовать и сравнивать.

    Для данной картинки я остановился на методе Perceptual: он сжал файл лучше, чем Selective и Adaptive.

    Уменьшение числа цветов

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

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

    Adaptive при уменьшении цветов показывает лучшее сжатие файла. Вывод: первоначальный выбор алгоритма получения палитры не всегда будет оптимальным. Итак, останавливаем свой выбор на Adaptive 128 цветов. Затем пробуем еще уменьшить число цветов тонкой настройкой. Для этой картинке удалось уменьшить количество цветов до 109 без особых потерь качества:

    Веб цвета

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

    На этом этапе для многих изображений можно остановиться.

    Стоила ли игра свеч

    Несложными манипуляциями в photoshop за пару минут мы смогли добиться уменьшения размера файла на 36.5% по сравнению с простым сохранением изображения через Save for web (19.86Kb против 12.63Kb).

    Заметка

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

    Изначально используются все 256 цветов. Затем мы их сократили до 109, в таблицы соответственно осталось 109. Затем мы применили преобразование в веб цвета — в таблице точками отметились преобразованные цвета. На них теперь никак повлиять не нельзя.

    Дополнительные параметры

    Особые случаи

    Градиенты

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

    Дизеринг увеличивает вес файла.

    Прозрачность

    GIF и PNG-8 поддерживают прозрачность. Для того чтобы сделать прозрачные участки изображения прозрачными убираем в слоях фон у изображения

    и в настройках оптимизации устанавливаем флажок Transparency (прозрачность).

    У этих форматов есть две проблемы с прозрачностью:

    • хорошо работает только с ровными линиями;
    • не поддерживает полупрозрачностей (в отличии от PNG-24), т.е. пиксель может быть или абсолютно прозрачным или абсолютно непрозрачным (бинарная прозрачность).

    С полупрозрачностью ничего не поделать: если она нужна, следует использовать PNG-24. Посмотрим, что можно сделать с кривыми линиями:

    Если сохранить просто GIF или PNG-8 с прозрачностью, изображение получает «зазубрины» (обрати внимание на усы) или еще могут появляться белые артефакты. Чтобы от этого избавиться обращаемся к опции Matte (Кайма): так можно будет контролировать как частично прозрачные точки вдоль границ изображения будут смешиваться с фоном веб-страницы. Устанавливаем значение опции равной цвету фона, куда будет вставлена картинка:

    Применение Matte немного увеличивает вес файла. Недостаток такого способа — нужно быть уверенным что фон не изменится и к тому же фон должен быть одного цвета.

    В данной статье не рассматривается в каком случае какой формат лучше применять. Этому будет посвящена отдельная статья.

  • Ссылка на основную публикацию
    Adblock
    detector