Формат GIF

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

В формате предусмотрено сжатие без потерь (LZW). Однако в силу ограничения палитры используемых цветов (не более 256 оттенков цвета) оптимизация оригинального 24-битного изображения в формат GIF с глубиной цвета 8 бит может привести к потере оттенков в изображении.

Изображение в формате GIF с выборочной коррекцией цвета и с применением веб-цвета
Изображение в формате GIF с использованием селективного алгоритма сокращения цветов (слева) и изображение в формате GIF с использованием стандартной таблицы цветов, поддерживаемых в вебе (справа)

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

Формат PNG-8

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

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

Функция компрессии у формата PNG-8 имеет улучшенные характеристики, чем у формата GIF, при этом изображение в формате PNG-8 меньше по размерам того же изображения в формате GIF (от 10% до 30%, в зависимости от цветового узора). Несмотря на то, что алгоритм сжатия PNG-8 является методом сжатия без потерь, оптимизация оригинального 24-битного изображения в формат GIF с глубиной цвета 8 бит может привести к потере оттенков в изображении.

Примечание.

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

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

we_04
PNG-8 с использованием 256 цветов без смешения (слева) и PNG-8 с использованием 16 цветов и смешением (справа)

Оптимизация изображения в формат GIF или PNG-8

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

  1. Откройте изображение и выберите «Файл» > «Сохранить для Web».
  2. Выберите «GIF» или «PNG-8» из списка форматов оптимизации.
  3. Для постепенного улучшения разрешения изображения в процессе загрузки установите флажок «Чересстрочная развертка». Чересстрочная развертка увеличивает скорость загрузки изображения и уже после первого этапа развертки пользователь сможет получить представление о том, что, собственно, изображено на картинке.
  4. В списке «Алгоритм сокращения цветов» под списком форматов можно выбрать параметр создания цветовой таблицы, или алгоритм цветовой редукции:

    Перцепционная

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

    Выборочная

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

    Адаптивная

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

    Ограниченная (Веб)

    Использует стандартную таблицу из 216 цветов, включающую 8-битные цвета (256 цветов), используемые в операционных системах Windows и Mac OS. Выбор данного варианта исключает необходимость имитации отсутствующих цветов на основе смешения имеющихся при отображении изображения, использующего 8-битные цвета. Если изображение имеет менее 216 цветов, неиспользуемые цвета удаляются из таблицы.

  5. Чтобы задать максимальное количество цветов в таблице, выберите число в раскрывающемся списке «Цвета», введите значение в текстовом поле или щелкайте стрелки для изменения количества цветов. Если изображение содержит меньше цветов, чем имеется на панели, в цветовой таблице отображается фактическое число цветов в изображении.
  6. При использовании алгоритма сокращения цветов «Ограниченная (Веб)» в меню «Цвета» можно выбрать вариант «Автоматически». Выберите вариант «Автоматически», если вы хотите, чтобы программа Photoshop Elements обеспечила использование только цветов, имеющихся в исходном изображении.
  7. Выберите значение смешения в процентах, указав его в числовом поле или щелкнув на стрелках и перетащив всплывающий ползунок на нужное значение.
  8. Если изображение содержит прозрачные области, установите флажок «Прозрачность», который позволяет обеспечить прозрачные области в изображении, сквозь которые просвечивает фон веб-страницы; снимите флажок «Прозрачность», чтобы заполнить полностью или частично прозрачные пикселы цветом подложки.
  9. Чтобы создать анимацию в формате GIF, выберите «Анимация».
  10. Чтобы сохранить оптимизированное изображение, нажмите «ОК». В диалоговом окне «Сохранить оптимизированное изображение» укажите имя файла и нажмите кнопку «Сохранить».

Создание анимированного GIF-файла

  1. Расположите изображения, которые должны появляться в каждом кадре анимации на отдельных слоях панели «Слои». Например, чтобы создать анимацию с моргающим глазом, поместите изображение с закрытым глазом на одном слое, а с открытым глазом — на другом.
  2. Выполните команду «Файл» > «Сохранить для Web».

    Примечание.

    Если изображение имеет несколько слоев, можно открыть диалоговое окно «Сохранить для Web» из диалогового окна «Сохранить как», выбрав «CompuServe GIF format» и установив флажок «Слои как кадры».

  3. Настройте параметры оптимизации изображения в формате GIF.
  4. Выберите «Анимация».
  5. Задайте дополнительные параметры в разделе «Анимация» диалогового окна:

    Параметры повтора

    Непрерывно повторите анимацию в веб-браузере или примените анимацию только один раз. Также можно выбрать параметр «Другое», чтобы указать количество повторов анимации.

    Задержка кадра

    Указывает число секунд, которое анимация воспроизводится в веб-браузере. Для определения долей секунд используйте десятичные значения. Например, чтобы задать полсекунды, укажите значение 0,5.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет