Почему гифка сохраняется как картинка
Перейти к содержимому

Почему гифка сохраняется как картинка

  • автор:

Почему гифка сохраняется как картинка

17 августа, 2023
Медиа Contented редакция Contented

GIF (Graphics Interchange Format) — это тип файла графического формата, который используется сегодня так же активно, как JPEG или PNG, но, в отличие от них, имеет очень маленький вес и позволяет демонстрировать короткую зацикленную анимацию. Данный формат не поддерживает большое количество цветов, поэтому не подходит для хранения и передачи высококачественных фото.

Постройте креативный маршрут

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

Постройте креативный маршрут

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

Содержание

  1. Для чего нужны анимированные GIF-файлы
  2. В каких сферах используется GIF-формат
  3. Почему GIF до сих пор популярны?
  4. Преимущества и недостатки анимированных GIF-файлов
  5. Как создать GIF самостоятельно
  6. Где скачать и как установить GIF на ПК и смартфон

GIF был создан в 1987 году и пользовался популярностью по простой причине: компьютеры того времени не имели достаточно мощностей, чтобы воспроизводить даже короткие видео и небольшие по объему графические файлы. Пик популярности гифок пришелся на середину 90-х — это было модное средство для передачи информации. Затем в истории формата произошла некая стагнация, но в последние 10 лет он вернулся. Сегодня он востребован пользователями при оформлении онлайн-публикаций и переписке.

Для чего нужны анимированные GIF-файлы

ИСКРА —
неделя знакомства с дизайн-профессиями

Выберите дизайн-профессию, которая нужна в IT.

разжечь искру

Все банально — для развлечения пользователя. Функционал гифок довольно прост: это зацикленные анимированные файлы, которые можно просматривать бесконечно, а для запуска анимации не нужно кликать на какие-либо кнопки — все происходит автоматически. Людям скучно смотреть на статичные чертежи и инфографику, а GIF позволяет наглядно продемонстрировать сложные процессы, привлечь внимание к определенным объектам на странице, а также получить эстетическое наслаждение. Наверняка вам попадались гифки с горящим огнем, работающими механизмами и падающим снегом, и вы подолгу не могли от них оторваться, не так ли?

Гифка, на которой действие никогда не завершается

ИСКРА —
неделя знакомства с дизайн-профессиями

Выберите дизайн-профессию, которая нужна в IT.

разжечь искру

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

Гифка с огнем, который горит беспрерывно

В каких сферах используется GIF-формат

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

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

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

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

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

Почему GIF до сих пор популярны?

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

Главные причины того, что гиф-анимация все еще с нами:

  • разные браузеры. Если 20 лет назад все пользовались медленным, но единственным на тот момент Internet Explorer и применение гифок было оправдано низкой скоростью интернета и загрузки сайтов, то сегодня существует масса альтернатив. Но далеко не все приложения для интернет-серфинга способны адекватно воспроизводить видеоформат: где-то отсутствуют необходимые настройки, а где-то все еще не проработаны до конца ошибки в программном коде. GIF легко решает эту проблему — он работает в любых браузерах и на любых устройствах (стационарных ПК, мобильных телефонах и планшетах);
  • HTML не поддерживает видео. Около 10 лет назад было сложно поделиться видеофайлом по одной простой причине: стандарт HTML до 2014 года просто не поддерживал такую возможность. И GIF-анимация оставалась чуть ли не единственным способом создать на странице не статичную картинку, а подвижное изображение. Да, это было возможно сделать и при помощи Adobe Flash Player, но данный модуль не функционировал на планшетах и смартфонах, а версию для владельцев iPhone разработчики вообще не посчитали нужным предусмотреть;
  • GIF легко сделать самостоятельно. Для чего придумывать новый формат, если создать гифку можно при помощи одного клика мыши? Достаточно загрузить свой видеофайл на тематический сайт или использовать стандартный фоторедактор, который можно найти в наборе предустановленных производителем смартфона программ.

ИСКРА —
неделя знакомства
с дизайн-профессиями

Какие они — востребованные в IT дизайн-профессии? Знакомьтесь с ними в течение недели, выбирайте подходящую и получайте полезные подарки каждый день.

разжечь искру

Преимущества и недостатки анимированных GIF-файлов

Как и у любого явления на этом свете, у гифок есть как положительные, так и отрицательные стороны.

Вот несколько плюсов GIF-формата.

  • Компактность. Небольшие анимации занимают мало места на диске, в отличие от изображений в формате JPEG. И если для ПК это не столь критично, то для мобильных устройств важно, чтобы принимаемый файл не занимал всю свободную память. GIF-формат в этом плане выигрывает у любых видеофайлов.
  • Скорость загрузки. В последнее время алгоритмы поисковых систем уделяют особое внимание скорости загрузки сайта: чем она выше, тем выше и сам сайт в поисковой выдаче. Гифки загружаются быстрее даже самых коротких видео, поэтому их используют не только в качестве рекламных инструментов на баннерах, но и в роли, например, демонстрационных роликов.
  • Продолжительность просмотра. Пользователи готовы в течение нескольких минут смотреть на зацикленный GIF-файл, но при этом могут не досмотреть 30-секундное видео до конца. Именно по этой причине маркетологи все чаще обращаются к GIF-формату для привлечения новой и удержания уже имеющейся аудитории. А секрет столь длительных просмотров прост: файл начинает воспроизводиться автоматически и не имеет звука. Не нужно кликать на кнопку запуска, регулировать уровень громкости, убирать или добавлять титры и т.д.
  • Ироничность. Юмор в современном мире занимает особое место: он не просто разбавляет беседу и делает медиапространство более разнообразным — с ним людям проще пережить стресс и принять суровую реальность. GIF позволяет не только взглянуть на любую ситуацию в более оптимистичном ключе, но и заодно посмеяться над мегавысоким разрешением видеофайлов и поностальгировать по временам, когда интернет был более ламповым, а картинка — восьмибитной, но такой уютной.

У GIF-формата есть и минусы.

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

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

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

Как создать GIF самостоятельно

Для начала понадобится видеофайл. Он может иметь любую продолжительность — в процессе создания вы сможете обрезать его под необходимую вам длину. Видео можно скачать в интернете или снять на смартфон. Хотите добавить текст и эффекты? Не переживайте: в любом из описанных ниже способов вам представится такая возможность.

GIF-сайты. Это решение наиболее популярно среди пользователей: не нужно скачивать сторонние приложения, изучать сложный интерфейс и настраивать программу определенным образом. Достаточно загрузить видеофайл на сайт или вставить ссылку на ваше видео. Далее сервис предложит обрезать файл до нужной длины, вставить эффекты и настроить качество изображения и скорость воспроизведения. Для создания GIF подходят и картинки — сервис создаст из них легкое подобие слайд-шоу, в котором вы самостоятельно задаете порядок и скорость смены кадров. Вот несколько популярных сайтов для создания гифок: gifius.ru, img2go.com, products.aspose.app.

GIF-приложения. Файлы такого типа можно создавать и без привязки к веб-ресурсам. Особенно это актуально для владельцев смартфонов, планшетов и иных мобильных устройств. Достаточно загрузить видео или серию изображений в редактор, а затем сохранить полученный результат. Среди популярных приложений можно отметить GIF Maker и GIPHY CAM, у которых есть версии как для Android, так и для iOS.

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

Где скачать и как установить GIF на ПК и смартфон

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

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

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

Что такое гифка? GIF-изображения «ВКонтакте» и не только

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

Понятие о формате

GIF можно расшифровать как «формат, предназначенный для обмена графическими изображениями». Его разработала компания CompuServe в 1987 г. для того, чтобы пересылать растровые изображения по сети.

что такое гифка

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

Усовершенствованные GIF-изображения

Что значит гифка для современного пользователя, если в ней нет анимации? Это совсем не то, что он хотел. Поэтому вскоре после создания формат был усовершенствован: с 1989 г. GIF-файлы могут быть динамичными и содержать прозрачные участки. Анимированная гифка – это изображение, которое содержит несколько кадров, а также сведения о частоте и порядке их вывода на экран. Как правило, процесс закольцовывается, и после окончания показа гифка запускается заново.

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

Где применяется GIF-формат?

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

Формат GIF распространен в веб-дизайне. Он прекрасно подходит для передачи небольших картинок, в т. ч. содержащих текст. Красиво оформленные кнопки с разнообразными надписями – не что иное, как гифки. Тем не менее, GIF не годится для сохранения фотографий. Для такой цели идеально подходит JPEG (JPG): этот формат не ограничен в количестве отображаемых цветов.

что значит гифка

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

Технические характеристики

Что такое гифка? Прежде всего, это уменьшенное по «весу» изображение. Формат предполагает LZW-сжатие, которое позволяет объединять повторяющиеся пиксели. Поэтому чем больше однородных участков, тем сильнее будет уменьшено изображение. Алгоритм позволяет сокращать размер восьмибитных картинок с палитрой без ущерба для качества: упакованные данные можно полностью восстановить. Что касается фотографий, то ограничение в 256 цветов будет необратимым.

Алгоритм LZW выискивает одинаковые участки файла, называемые фразами, присваивает им маркеры и заносит в таблицу. Например, в картинке есть 70 наборов пикселей, окрашенных в оранжевый, желтый и розовый цвета. Каждому из них будет присвоено одно и то же значение – например, 8. Данные будут сохранены 70 раз в виде записи с восьмеркой. Чем меньше шума на картинке, тем более качественным будет сжатие.

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

Сначала записываются 1, 5, 9 и дальнейшие строки с интервалом «4», в таком же порядке они появляются при загрузке. Когда 25% будет загружено, можно увидеть размытую картинку. Далее появляются 3, 7, 11 и дальнейшие строки, изображение становится в 2 раза четче. Затем грузятся остальные ряды (2, 6, 10. и 4, 8, 12. ) и картинка приобретает окончательный вид. Такой способ записи немного увеличивает размер гифки, но возможность увидеть ее до окончания загрузки полностью оправдывает этот маленький недостаток.

Что такое гифка «В Контакте»?

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

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

что такое гифка в контакте

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

Анимированные картинки, увиденные у друзей, можно сохранять себе. Для этого нужно развернуть изображение кнопкой «+», нажать на него правой кнопкой и выбрать в меню нужный пункт.

что такое гифки в вк

Что такое гифки в ВК? Это прекрасный способ украсить свой профиль, выразить эмоции, развлечь себя и друзей. Добавляйте анимации в переписку или на стену с собственного компьютера или интернет-сайтов: теперь вы знаете, как это сделать!

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

GIF — стандартный формат сжатия изображений с большими областями однотонных цветов и четких элементов, таких как line art, логотипы или текст. Имея всего лишь 8 разрядность, он мог бы исчезнуть с просторов Интернета после введения форматов JPEG и PNG, но GIF по-прежнему является популярным веб-форматом благодаря его возможностям покадровой анимации. В этом уроке, мы подробнее рассмотрим возможные варианты, как конвертировать видео в GIF анимацию, и как оптимизировать размер файла. Давайте начнем!

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

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

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

10 Ways to Optimize a GIF File

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

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

10 Ways to Optimize a GIF File

3. Опция Save for Web

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

10 Ways to Optimize a GIF File

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

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

10 Ways to Optimize a GIF File

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

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

10 Ways to Optimize a GIF File

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

10 Ways to Optimize a GIF File

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

7. Дизеринг

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

10 Ways to Optimize a GIF File

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

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

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

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

10 Ways to Optimize a GIF File

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

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

Параметры оптимизации для изображений и анимированных файлов GIF

В этом разделе рассматриваются различные параметры экспорта изображений и анимированных файлов GIF.

Форматы веб-графики

Форматы веб-графики могут быть битовыми (растровыми) или векторными. К битовым форматам относятся GIF, JPEG и PNG, которые зависят от разрешения, то есть от размеров растрового изображения. Использование различных разрешений экрана монитора может привести к изменению качества. К векторным форматам относятся SVG и SWF, которые не зависят от разрешения и поддерживают масштабирование без потери качества изображения. Векторные форматы могут также содержать растровые данные.

Параметры оптимизации JPEG

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

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

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

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

Отображение формата «Прогрессивный JPEG» требует большего объема оперативной памяти, этот формат поддерживается не всеми браузерами.

Задает степень размытия изображения. При выборе этого параметра создается эффект, аналогичный фильтру «Размытие по Гауссу», и обеспечивается дополнительное сжатие, что уменьшает размер файла. Рекомендуется использовать значение от 0,1 до 0,5.

Встроенный профиль (Photoshop) или ICC-профиль (Illustrator)

Сохраняет цветовые профили в оптимизированном файле. В некоторых браузерах для цветокоррекции применяются цветовые профили.

Задается цвет заливки для пикселей, которые в исходном изображении были прозрачными. Чтобы выбрать цвет в палитре цветов, щелкните «Образец цвета подложки» или укажите параметр в меню «Подложка»: «Цвет пипетки» (для использования цвета в поле образцов пипетки), «Основной цвет», «Цвет фона», «Белый», «Черный» или «Другой» (для использования палитры цветов).

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

Параметры оптимизации для форматов GIF и PNG‑8

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

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

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

Потери (только GIF)

Уменьшение размера файла путем выборочного удаления данных. Чем выше значение параметра «Потери», тем больший объем данных удаляется. Обычно сохранить качество изображения позволяет установка для параметра «Потери» значения в диапазоне от 5 до 10, иногда до 50. Изменение значения параметра «Потери» может привести к уменьшению размеры файла на 5 — 40 %.

Параметр «Потери» нельзя использовать одновременно с параметром «Чересстрочно», алгоритмами «Шум» или «Регулярный дизеринг».

Цвета и метод редукции цвета

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

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

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

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

Ограниченная (Web) Используется стандартная таблица из 216 цветов, применяемая в Windows и Mac OS в палитрах с 8-разрядной глубиной цвета (256 цветов). При выборе этого параметра дизеринг в браузере не применяется при отображении с 8-разрядной глубиной цвета (такая палитра также называется «безопасной палитрой Web»). Использование палитры Web может приводить к увеличению размера файла, и рекомендуется только в тех случаях, когда крайне важно исключить дизеринг в браузере.

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

Таблица цветов изображения настраивается с помощью палитры «Таблица цветов» в диалоговом окне «Сохранить для Web и устройств».

«Черно-белый», «Оттенки серого», Mac OS, Windows Используется заданная палитра цветов.

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

Доступны следующие методы дизеринга.

Диффузия Применяется случайный узор, менее заметный, чем в режиме «Регулярный дизеринг». Эффекты дизеринга распространяются на смежные пиксели.

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

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

«Прозрачность» и «Подложка»

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

  • Чтобы сделать полностью прозрачные пиксели прозрачными и смешать частично прозрачные пиксели с цветом, выберите «Прозрачность» и укажите цвет подложки.
  • Чтобы заполнить полностью прозрачные пиксели цветом и наложить их на частично прозрачные пиксели того же цвета, выберите цвет подложки и отмените выбор параметра «Прозрачность».
  • Для выбора цвета подложки щелкните стрелку рядом с образцом цвета «Подложка» и выберите требуемый цвет в палитре цветов. Второй способ: выберите параметр в меню «Подложка»: Цвет пипетки (для использования цвета в поле образцов пипетки), Основной цвет, Цвет фона, «Белый», «Черный» или «Другой» (для использования палитры цветов).

Параметры «Основной цвет» и «Цвет фона» доступны только в Photoshop.

A. изображение B. Прозрачность выбрана с цветом подложки C. Прозрачность выбрана без подложки D. Прозрачность отключена с цветом подложки

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

  • При выборе параметра «Без дизеринга прозрачности» дизеринг к частично прозрачным пикселям в изображении не применяется.
  • Применяется случайный узор, менее заметный, чем в режиме «Регулярный дизеринг». Эффекты дизеринга распространяются на смежные пиксели. При выборе этого алгоритма необходимо указать процент дизеринга, управляющий степенью дизеринга, который применяется к изображению.
  • В режиме «Регулярный дизеринг прозрачности» применяется квадратный узор наподобие полутонового для частично прозрачных пикселей.
  • В режиме «Шумовой дизеринг прозрачности» применяется случайный узор, подобный узору в режиме «Случайный дизеринг», но без распространения на смежные пиксели. При использовании алгоритма «Шум» швы не возникают.

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

Привязка к веб-цветам

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

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

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

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

Настроить оптимизацию прозрачных пикселей в изображениях GIF и PNG можно с помощью параметров «Прозрачность» и «Подложка» в диалоговом окне «Сохранить для Web и устройств».

  • (GIF и PNG‑8) Чтобы сделать полностью прозрачные пиксели прозрачными и наложить частично прозрачные пиксели на цвет, выберите «Прозрачность» и укажите цвет подложки.
  • Чтобы заполнить полностью прозрачные пиксели цветом и наложить их на частично прозрачные пиксели того же цвета, выберите цвет подложки и отмените выбор параметра «Прозрачность».
  • (GIF и PNG‑8) Чтобы сделать все пиксели с прозрачностью более 50 % полностью прозрачными, а все пиксели с прозрачностью 50 % и менее полностью непрозрачными, установите флажок для параметра «Прозрачность» и укажите «Нет» в меню «Подложка».
  • (PNG‑24) Чтобы сохранить изображение с многоуровневой прозрачностью (до 256 уровней), установите флажок для параметра «Прозрачность». Параметр «Подложка» станет недоступен, поскольку многоуровневая прозрачность позволяет накладывать изображение на любой фоновый цвет.

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

Для выбора цвета подложки щелкните стрелку рядом с образцом цвета «Подложка» и выберите требуемый цвет в палитре цветов. Второй способ: выберите параметр в меню «Подложка»: Цвет пипетки (для использования цвета в поле образцов пипетки), Основной цвет, Цвет фона, «Белый», «Черный» или «Другой» (для использования палитры цветов).

Параметры «Основной цвет» и «Цвет фона» доступны только в Photoshop.

Просмотр таблицы цветов для оптимизированного фрагмента

Таблица цветов для фрагмента отображается на панели Таблица цветов диалогового окна «Сохранить для Web и устройств».

Выберите фрагмент, оптимизированный в формате GIF или PNG‑8. Таблица цветов для выбранного фрагмента отобразится на палитре «Таблица цветов» диалогового окна «Сохранить для Web и устройств».

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

Настройка таблицы цветов для изображений GIF и PNG‑8

Цвета в оптимизированных изображениях GIF и PNG-8 настраиваются с помощью таблицы цветов в диалоговом окне «Сохранить для Web и устройств». Сокращение количества цветов часто позволяет сохранить качество изображения при одновременном уменьшении размера файла изображения.

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

Сортировка таблицы цветов

Выберите порядок сортировки в меню палитры «Таблица цветов».

  • При выборе параметра «Без сортировки» восстанавливается исходный порядок.
  • Команда «Сортировать по тону» сортирует цвета по положению на стандартном цветовом круге (в градусах от 0 до 360). Нейтральным цветам присваивается тон 0 и они помечаются красным.
  • Команда Сортировать по светимости сортирует цвета по светимости.
  • Команда «Сортировать по частоте использования» сортирует цвета по частоте их использования в изображении.

Добавление нового цвета в таблицу цветов

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

Если в таблице цветов выделены какие-либо цвета, выберите в палитре Таблица цветов пункт Отменить выделение всех цветов, чтобы отменить выбор этих цветов.

Выберите цвет, выполнив одно из следующих действий.

  • В диалоговом окне «Сохранить для Web и устройств» щелкните значок «Цвет пипетки» и выберите цвет из палитры.
  • В диалоговом окне «Сохранить для Web и устройств» выберите инструмент «Пипетка» и щелкните изображение.

Выполните одно из следующих действий.

  • Нажмите «Новый цвет» в таблице цветов.
  • Выберите команду Создать цвет в меню палитры Таблица цветов.
  • Чтобы переключить таблицу цветов на палитру «Заказная», удерживайте при добавлении нового цвета нажатой клавишу «Ctrl» (Windows) или «Command» (Mac OS). Новый цвет отобразится в таблице цветов со значком в виде небольшого белого квадрата в правом нижнем углу. Такой значок показывает, что цвет заблокирован. В динамической таблице цветов исходный цвет отображается в левом верхнем углу, а новый цвет — в правом нижнем углу.

Выбор цветов в таблице цветов

Вокруг выделенного цвета появляется белая рамка в Таблица цветов.

  • Чтобы выбрать цвет, щелкните его в таблице цветов.
  • Чтобы выбрать в таблице цветов несколько цветов, удерживайте нажатой клавишу «Shift». Будут выбраны все строки между первым и вторым выделенными цветами. Чтобы выбрать несмежную группу цветов, нажмите клавишу «Ctrl» (Windows) или «Command» (Mac OS) и щелкните нужные цвета. Кроме того, в меню палитры «Таблица цветов» доступны команды выбора цветов.
  • Чтобы выбрать цвет в изображении предварительного просмотра, щелкните его инструментом «Пипетка» в диалоговом окне «Сохранить для Web и устройств». Чтобы выбрать несколько цветов, удерживайте нажатой клавишу «Shift».
  • Чтобы отменить выбор всех цветов, выберите в меню палитры «Таблица цветов» пункт «Отменить выделение всех цветов».

Замена цвета

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

Для отображения палитры цветов по умолчанию дважды щелкните цвет в таблице цветов.
Выберите цвет.

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

Чтобы отменить замену цвета, выполните одно из следующих действий.

  • Дважды щелкните образец замененного цвета. Исходный цвет выделится в палитре цветов. Чтобы восстановить цвет, нажмите кнопку «OK».
  • Чтобы отменить выделение всех замененных цветов (включая замененные веб-цвета), выберите в меню палитры Таблица цветов пункт «Отменить замену всех цветов».

Замена цветов на ближайшие эквивалентные цвета палитры Web

Чтобы в браузере не выполнялся дизеринг, можно заменить цвета на ближайшие эквивалентные цвета в палитре Web. Это позволяет предотвратить выполнение дизеринга в браузерах операционных систем Windows или Macintosh, в которых доступно только 256 цветов.

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

  • Нажмите кнопку Заменить на Web в палитре Таблица цветов.
  • В меню палитры Таблица цветов выберите пункт «Заменить/Отменить замену выделенных цветов на цвета палитры Web». Исходный цвет отобразится в левом верхнем углу образца, а новый цвет — в правом нижнем углу. Небольшой белый ромб в центре образца показывает, что цвет является веб-цветом. Небольшой квадрат в правом нижнем углу образца показывает, что цвет заблокирован.

Чтобы задать допуск для замены, введите значение параметра «Web-цвета». Чем выше значение, тем больше изменяется цветов.

Чтобы вернуть цвета, замененные на Web-цвета, выполните одно из следующих действий.

  • Выделите в таблице цветов цвет, замененный на Web-цвет, и нажмите кнопку Заменить на Web в палитре Таблица цветов.
  • Чтобы отменить в таблице цветов замену всех цветов на Web-цвета, выберите в меню палитры Таблица цветов пункт «Отменить замену всех цветов».

Преобразование цветов в прозрачность

Чтобы добавить в оптимизированное изображение прозрачность, нужно преобразовать существующие цвета в прозрачность.

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

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

Чтобы вернуть преобразование прозрачности в исходное состояние, выполните одно из следующих действий.

  • Выберите цвет, для которого нужно отменить преобразование в прозрачность, и нажмите кнопку Преобразовать прозрачность либо в меню палитры «Таблица цветов» выберите пункт «Преобразовать/Отменить преобразование выделенных цветов в прозрачность».
  • Чтобы вернуть все преобразованные цвета в исходное состояние, выберите пункт «Отменить преобразование цветов прозрачного объекта».

Блокировка или снятие блокировки цвета

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

Блокировка цветов не отменяет дизеринг в браузере.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *