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

Содержание

10 Способов Оптимизации GIF Анимации

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

GIF — стандартный формат сжатия изображений с большими областями однотонных цветов и четких элементов, таких как line art, логотипы или текст.

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

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

Кроме того, если вам часто приходится иметь дело с GIF анимацией, вы можете использовать автоматизированное решение: Gift Export- экшен для Photoshop, доступный на Envato Market, который позволит вам взять несколько изображений, автоматически загрузить их в Photoshop, и экспортировать их как GIF.

1. Нарезка Анимации

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

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

Вы можете уменьшит размер изображения использовав опции меню Image или сделать это позже, использовав диалоговое окно Save for Web.

Я предпочитаю делать это в начале с помощью диалогового окна Image Size, так как это позволит сократить вам значительное количество времени на загрузку, когда вы будете открывать диалоговое окно Save for Web.

Ваш слой с видео будет преобразован в Смарт-объект, если вы измените размер изображения, но вы можете не беспокоиться на этот счет, это не повлияет на ход работы.

3. Опция Save for Web 

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

4. Уменьшение Числа Кадров

Вы можете еще больше уменьшить размер вашей GIF анимации, если откроете результат экспорта в GIF опять в Photoshop, и удалите каждый второй или третий кадр в панели Timeline.

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

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

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

Наиболее важный параметр, который позволяет оптимизировать размер GIF файла – это количество цветов используемое в Цветовой Таблице.

Максимальное количество – 256, которое соответствует ограничению глубины цвета в 8-bit.

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

6. Какой Алгоритм для Уменьшения Цветности Выбрать?

  • Perceptual (Перцепционный) предназначен для создания пользовательской таблицы цветов, в которой предпочтение отдается тонам, к которым человеческий глаз наиболее чувствителен.
  • Selective (Селективный), создает таблицу цветов подобную Перцепционной, но использует наиболее часто повторяющиеся цвета в изображении и предпочтение отдается цветам, используемым в Web. Использование этой таблицы цветов дает наибольшую цветовую целостность. (Эта опция стоит по умолчанию).
  • Adaptive (Адаптивный) предназначен для создания пользовательской таблицы цветов на основе спектра цветов изображения. Например, для изображения с оттенками зеленого и голубого, будет создана таблица преимущественно состоящая из зеленых и голубых цветов. В большинстве изображений цвета сконцентрированы в какой-то конкретной части спектра.
  • Restrictive (Ограниченный) применяет стандартную палитру, состоящую из 216, стандартную цветовую web-таблицу общую для 8 битных (256-цветов) палитр для Windows  и Mac OS . Этот параметр гарантирует, что ни один браузер не применит дизеринг к цветам изображения с 8 битовой глубиной цвета. Если изображение имеет меньше, чем 216 цветов, то неиспользуемые цвета удаляются из таблицы.

7. Дизеринг

Так как цветовая палитра GIF файлов ограничена, мы можем захотеть имитировать недостающие цвета, теми что у нас есть, используя дизеринг. В меню “Dither”, мы выбираем один из алгоритмов для такой имитации. Метод “Diffusion” позволяет регулировать количество смешения. В случае использования  “Pattern” и “Noise”, мы не можем ничего регулировать.

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

8.Опции: Web Snap, Lossy, Transparency and Interlaced

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

9. Сравните Оригинальную и Оптимизированную Версии

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

10. Просмотр, Сохранение Настроек и Оптимизация Размера Файла

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

Источник: //design.tutsplus.com/ru/tutorials/10-ways-to-optimize-an-animated-gif-file--psd-34649

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

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

Используя программу 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).

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

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

Этот параметр нельзя использовать одновременно с параметром Interlaced, алгоритмами “Дизеринг шума” или “Регулярный дизеринг”.

Interlaced (чересстрочная развертка) до полной загрузки файла изображение показывается в низком разрешении, тем самым создавая иллюзию более быстрой загрузки изображения. Увеличивает вес файла.

Градиенты

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

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

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

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

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

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

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

P.S

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

Материалы

Источник: //xiper.net/learn/photoshop/optimization-gif-and-png-8

2.7. Сохранение изображения для размещения его в сети Интернет

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

38Часть I. Некоторые теоретические вопросы

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

Размер

сохраняемого

файла

Рис. 2.12. Диалоговое окно Параметры JPEG

Для сохранения файла в формате JPEG с последующим размещением его в сети Интернет используется диалоговое окно Сохранить для Web и устройств (Save for Web & Devices), которое будет рассмотрено вразд. 2.6.

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

ется командой Файл (File) |Сохранить для Web и устройств (Save for Web & Devices) или клавиатурной комбинацией +++ (в Mac OS +++). В этом окне возможно сохранение файла в формате JPEG, GIF, PNG и WBMP.

Левая часть окна занимает область предварительного просмотра (рис. 2.13), которая может находиться в одном из четырех режимов, устанавливаемых с помощью вкладок:

Исходное (Original). Изображение в исходном виде.

Оптимизация (Optimized). Вид изображения после оптимизации.

2 варианта (2-Up).Одновременный просмотр оригинала и оптимизированного изображения.

4 варианта (4-Up).В этом режиме область просмотра делится на четыре области (рис. 2.11). В первой области отображается оригинал изображения, в остальных можно задать различные уровни сжатия (для формата JPEG) и варианты палитры цветов (для форматов GIF и PNG). Этот режим удобно использовать для

Глава 2. Создание и сохранение изображения39

визуальной оценки качества вариантов изображения и выбора наилучших параметров. Так на рис. 2.11 первый вариант оптимизации в формате JPEG с довольно высоким значением качества 70 выглядит значительно лучше остальных вариантов со значениями качества 30 и 7. Обратите внимание на возникшие артефакты, расположенные по контуру бутонов роз, в обоих последних вариантах.

Режимы предварительного просмотраПараметры оптимизации

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

Рис. 2.13. Диалоговое окно Сохранить для Web и устройств

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

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

Если на вашем компьютере установлено несколько браузеров, то, нажав кнопку, расположенную справа от кнопкиПросмотр (Preview), вы сможете выбрать именно тот браузер, в окне которого в дальнейшем будет открываться оптимизированное изображение. На рис. 2.13 эта кнопка имеет такой вид, который указывает на браузер

Google Chrome, в вашем случае данная кнопка может выглядеть иначе.

40Часть I. Некоторые теоретические вопросы
Тип файла
Размер файла
Время загрузки изображенияВыбор скоростиПараметры
при выбранной скоростипередачи данныхоптимизации

Рис. 2.14. Предварительный просмотр выбранного варианта оптимизации

2.7.1. Оптимизация формата JPEG

Для оптимизации изображения в формат JPEG в диалоговом окне Сохранить для Web и устройств (Save for Web & Devices) необходимо определить следующие параметры:

Качество (Quality), который задается двумя полями. Сначала определяется приблизительное значение качества:Низкое (Low),Среднее (Medium),Высокое

(High), Очень высокое (Very High) иНаилучшее (Maximum). Затем каждое состояние может быть уточнено цифровым значением с помощью ползунка

Качество (Quality).

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

Матовый (Matte), необходим для замены прозрачных областей указанным цветом.

Напомним, что формат JPEG не поддерживает прозрачности, поэтому если исходное изображение содержит прозрачные пикселы, то они будут заменены цветом, указанным в параметреМатовый (Matte).

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

Формат JPEG идеально подходит для изображений с богатой цветовой гаммой, плавными переходами цветов, для фотографий с градиентными областями. Не следует использовать JPEG для сжатия изображений с мелким текстом и мелкими деталями, изображений, которые должны сохранить четкие границы, потому что ухудшение качества наиболее заметно на четких контурах. Также не стоит приме-
Глава 2. Создание и сохранение изображения41

нять этот формат для изображений с шумом, например, полученные в результате применения к ним фильтра Шум (Noise), т. к. каждое зерно шума будет восприниматься мелкой деталью и будет окружено артефактом. Для этих целей целесообразнее использовать форматPNG-24,подробнее см.разд. 2.6.3.

Качество оптимизации

Величина размытия артефактов, возникающих при уменьшении качества

Цвет, заменяющий прозрачные области

Рис. 2.15. Параметры оптимизации формата JPEG

2.7.2. Оптимизация формата GIF

Аббревиатура GIF расшифровывается как GraphicsInterchangeFormat — формат для обмена графикой. Это растровый формат, цветовой диапазон которого ограничен 256 цветами. Формат GIF, в отличие от JPEG, поддерживает прозрачность. Однако в изображениях формата GIF может использоваться только один уровень прозрачности, в отличие от форматаPNG-24,который поддерживает 256 уровней.

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

Еще одним преимуществом формата GIF является поддержка анимации. В этом случае изображение представляется в виде сменяющих друг друга кадров.

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

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

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

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

42Часть I. Некоторые теоретические вопросы

Оптимизация изображения в формат GIF осуществляется в уже известном нам окне Сохранить для Web и устройств (Save for Web & Devices). Оно позволяет определить следующие параметры (рис. 2.16):

модель редукции цвета, по умолчанию используется Селективная (Selective);

количество цветов, как правило, качество изображения позволяет установить значение меньше максимального числа цветов 256;

модель и величину дизеринга;

использование прозрачности или замену прозрачных пикселов выбранным цветом;

дизеринг прозрачности;

использование чересстрочной развертки изображения;

величину допуска, с которым цвета изображения преобразуются в ближайшие им Web-цвета.

Исходное изображениеВарианты оптимизации

Масштаб предварительного просмотра

Рис. 2.16. Параметры оптимизации формата GIF

ЗА МЕ Ч А Н И Е

Файлы, сохраненные в формате GIF, имеют расширение gif.

Источник: //StudFiles.net/preview/6831284/page:12/

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

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

Формат GIF сильно отличается от JPG и использует совершенно другие методы оптимизации. Он предназначен для хранения изображений с количеством цветов не более 256, поддерживает палитру и использует сжатие без потерь по методу LZW.

Методы оптимизации можно разделить на следующие типы (исключая оптимизацию анимированных GIFов):

Теперь разберемся по порядку с этими методами и приемами оптимизации.

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

Для большинства изображений, не являющихся фотографиями, количество необходимых для воспроизведения цветов часто меньше 256. Лишние цвета можно убрать из изображения, тем самым уменьшив его размер. Это возможно потому, что GIF поддерживает размер палитры меньше 256 цветов. Теоретически, мы можем задать любое число цветов палитры в диапазоне 2-256, например, 37 цветов или 101.

Практически же, количество цветов в изображении выбирается из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для представления цвета используется всегда целое число бит, а приведенный выше ряд является рядом максимального количества цветов при использовании от 1 до 8 бит на пиксель (1bpp-8bpp).

В случае, если мы используем, допустим, только 101 цвет в рисунке, для сохранения пикселя все равно будет использовано 7 бит. Поэтому при оптимизации количества цветов нужно ориентироваться на приведенный выше ряд. Это позволит получить более качественную картинку.

Сравните два изображения – они не очень-то и отличаются, но левое использует полную палитру в 256 цветов, а правое – палитру, состоящую только из 32 цветов. И, соответственно, различаются размеры файлов (примерно в 2 раза).

Оптимизация палитры изображения

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

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

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

Тем не менее, данный способ применяется – в основном для того, чтобы изображения приемлемо выглядели на мониторах с малым количеством цветов (16, 256). Обычно в этом случае пользуются т.н. палитрой Netscape (или безопасной палитрой), состоящей из набора часто используемых цветов и их оттенков.

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

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

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

При оптимизации конкретного изображения задача состоит в том, чтобы выбрать наиболее оптимальное количество цветов в палитре. Тут уместно сказать о способе увеличения количества используемых цветов при их недостатке, т.н. дизеринг (Dithering). Например, у нас есть 16 стандартных чистых цветов, а нам нужен отсутствующий оранжевый цвет.

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

Дизеринг может увеличить размер файла, причем довольно существенно (он может стать больше, чем до оптимизации :). А все дело в методе хранения изображения форматом GIF.

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

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

Стилизация изображения

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

Искажение размеров изображения

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

Допустим, нам понадобился рисунок, представляющий из себя черный квадрат (Малевича 😉 размером 100×100 пикселей. Для уменьшения размера файла сделаем т.н. однопиксельный (т.е. размером 1×1 пиксель) GIF черного цвета.

Как обычно, вставим его в HTML-файл, но размеры картинки укажем те, что нужны нам (100×100). Броузер сам растянет наш пиксель до нужных размеров, а мы получим большую экономию :).

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

Методом искажения очень удобно создавать графические разделительные линии. Достаточно нарисовать ее сечение шириной (высотой) в один пиксель, а в HTML-документе указать нужную ширину линии (или высоту, если линия вертикальная). Линия, расположенная под абзацем, сделана именно таким способом.

Фрагментарная оптимизация

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

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

Этот способ позволяет уменьшить объем, занимаемый исходным файлом, примерно раза в 2-3 (в зависимости от конкретного изображения); кроме того, изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться параллельно.

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

Оптимизация “прозрачных” изображений

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

Само по себе это хорошо, но в случае использования метода сглаживания краев изображения (anti-aliasing) и последующего сохранения в формате GIF, возникает проблема появления ореола вокруг прозрачного изображения в случае, если GIF показывается на фоне, отличном от того, на котором происходил anti-aliasing.

Это прямое следствие отсутствия поддержки канала прозрачности форматом GIF. Единственным способом уменьшения проявления этого эффекта является назначение прозрачным пиксела по цвету, близкому к фону, на котором будет использоваться GIF, и проведение anti-aliasing’а на этом же фоне.

Ниже приведены два изображения: на левом anti-aliasing проведен на белом фоне, и поэтому ореол не заметен, а на правом – на контрастном синем, и ореол хорошо виден.

Использование чересстрочной развертки

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

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

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

Mike Melnikov (cherry-design@mail.ru)
Web-studio “Cherry-Design”

citforum.ru

Источник: //vavik96.com/optimizaciya-izobrazhenij-v-formate-gif/

Оптимизация GIF и PNG-8 для веб

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

Подготовил: Евгений Рыжков 01.09.2010

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

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

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

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

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

Самая простая модель получения дохода через интернет

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

>

Форматы 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 настроена таким образом, что настройки по умолчанию позволяют получить достаточно хорошо оптимизированное изображение. Главное, правильно выбрать формат для сохранения.

Источник: //kviter.ru/optimizatsiya-izobrazheniy-v-formatah-gif-i-png

Поделиться:
Нет комментариев

    Добавить комментарий

    Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.