Gif, Png или Jpg — форматы растровой графики для веба, их плюсы и минусы при использовании на сайте
Обновлено 22 мая 2021 Просмотров: 128 825 Автор: Дмитрий ПетровЗдравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поговорить про форматы растровой графики, которые было уместно применять для картинок выводимых на сайте, да и вообще.
Мы рассмотрим Gif, который популярен сейчас именно из-за поддержки им гиф анимации, Jpg, который очень хорошо подходит для вставки полноцветных фотографий и, конечно же, Png, который позволяет создавать картинки с прозрачным фоном и может служить отличной заменой упомянутых ранее форматов. Так же можете почитать про наполовину графический, а наполовину текстовый формат djvu.
Все они активно используются в современной верстке сайтов, но тонкость заключается в том, чтобы выбрать оптимальный формат для каждого конкретного случая, чтобы и качество изображения не пострадало, и его вес был бы минимальным. Саму графику я советую брать с бесплатных сервисов на подобии IconFinder, Freepik, PSDGraphics и других подобных, чтобы потом не было бы проблем с нарушением авторского права.
Растровая графика для веба в лице Гиф, Джейпег и Пнг
Сейчас очень трудно представить веб-сайты и отдельных веб-страниц совсем без наличия на них каких-либо фотографий, значков или картинок. Кстати, первым браузером, который мог показывать графику, стал Mosaic (мозаика), появившийся практически одновременно с появлением языка гипертекстовой разметки Html.
Причем, как я уже упомянул выше, для добавления на сайт подойдут не все форматы изображений, а только определенные, максимально под это заточенные — Gif, Png и Jpg. В зависимости от типа картинки, которую вы хотите добавить на веб страницу, вам и нужно будет выбирать один из упомянутых форматов, которые, в свою очередь, относятся к так называемой растровой графике.
Сама по себе она подразумевает, что изображение на бумаге или мониторе будет формироваться из так называемых единичных элементов называемых пикселями (точек цветов). Все картинки любого формата, относящегося к растровой графике, обладают некоторыми свойствами.
Размер картинки у них определяется таким понятием, как разрешение, которое представляет из себя размер изображения в пикселах по горизонтали и вертикали, например, 300 на 200. Иногда, правда, говорят об общем количестве пикселей в картинке, например, производители фотоаппаратов (12 Мега пикселей и т.п.).
Применительно к вебу, физический размер растровой картинки может существенно зависеть от величины пикселя (зерна экрана) того устройства, на котором пользователь осуществляет просмотр веб страницы. Изображения так же характеризуются таким понятием, как количество цветов используемых в нем. Например, для Gif используется всего лишь 256 цветов, которые задаются в одном байте информации.
Ну, и кроме этого в этих форматах могут использоваться различные цветовые модели, при помощи которых формируются все возможные оттенки. Когда мы рассматривали с вами написание кодов цветов в Html, то там довольно подробно рассмотрели принципы формирования модели RGB.
Одним из основных недостатков растровой графики является большой размер результирующих картинок, даже в форматах Gif, Png и Jpg, которые используется в вебе. Естественно, что для уменьшения результирующих изображений используются различные алгоритмы сжатия, которые работают как с ухудшением качества (сжатие с потерями), так и без оного.
Все это очень похоже на принципы работы алгоритмов сжатия аудио — MP3 сжимает с потерями, причем, в первую очередь удаляются всякие переходы, которые скорее всего не будут восприниматься ухом человека. Такой аналогией в мире растровой графики может служить формат Jpg, сжатие информации в котором осуществляется с потерями. При этом учитываются возможности визуального восприятия человека и, в первую очередь, удаляются те детали, которые будут особо и не заметны.
Но существуют и алгоритмы сжатия картинок без потерь — BMP, Gif и Png. BMP чаще всего представляет из себя не сжатое изображение, а вот Gif и Png сжимаются без потерь за счет удаления повторяющейся и избыточной информации (получается что-то на вроде архивирования, но учитывающего особенности растровой графики).
Существует множество графических редакторов, которые умеют работать с растровой графикой (например, все тот же фотошоп или его онлайновый аналог Pixlr), но для подготовки графики для веба следует использовать ориентированные именно на это редакторы, ибо только тогда вы сможете получить максимально оптимизированные картинки, которые затем не будут создавать излишней нагрузки на сервер вашего хостинга при их загрузке в браузеры пользователей.
Формат Gif — элементы дизайна и анимация для сайта
На данный момент практически все браузеры поддерживают три основных формата растровой графики используемых для веба — Gif, Png и Jpg. Исторически первым появился Гиф и именно с помощью него в первых браузерах можно было добавлять и отображать картинки и медийную информацию, которая в первую очередь выражалась в так называемой Гиф анимации.
Аббревиатура Gif расшифровывается, как Graphics Interchange Format — формат графического обмена. Произносится как гиф, но разработчики стандарта считали, что правильно его называть джиф, но прижилось другое название в русской интерпретации.
Т.к. он был разработан давно, а скорость интернета у большинства пользователей в то время была, ох какой малой, то и при его создании делали основной упор на максимальное уменьшение размера результирующей картинки (писал об этом в статье про программу для просмотра изображений от FastStone или от Гугла под названием Picasa).
В связи с этим, Gif может в себя включать палитру, состоящую всего лишь из 256 цветов (ее так же еще называют индексированной палитрой). Т.е. изображение, преобразованное в этот формат всегда будет содержать не более чем 256 оттенков, а все остальные цвета будут создаваться на основе подмешивания (хитрым образом подбираются соседние пикселы из базовой палитры, чтобы человеческий глаз на отдалении воспринимал бы их как нужный в этом месте цвет).
Но, к сожалению, на практике, при преобразовании полноцветных фотографий в Гиф, вылазит куча артефактов (из-за этого самого подмешивания), которые делают фотографии неприемлемым для выкладывания в вебе.
Поэтому для вывода на страницы сайта полноцветных картинок и фото он не используется (для этого чаще всего выбирают Jpg или Png).
Gif-анимация и ее использование в интернете
Обладая таким существенным недостатком, Gif уже давно должен был бы кануть в лету, но он, однако, по-прежнему живее всех живых, и часто изображения в этом формате можно встретить на страницах сайтов.
Тут вся заковыка в том, что формат Гиф поддерживает анимацию (единственный из всех используемых в вебе). Всякие анимированные смайлики и аватарки (в том числе и граватары), которые вы в большом количестве можете встретить в интернете, имеют расширение Гиф.
Правда, какое-то время уже развивается альтернативный ему формат Mng, добавляющий возможность анимации в Png, но его развитие и распространение идет не слишком высокими темпами. Поэтому, если не брать в расчет флеш технологию, вся анимация в вебе создается на базе Gif и флеша.
Суть этой анимации заключается в том, что в контейнере Гиф находится не одна картинка, а сразу несколько и там же прописано время, через которые эти изображения будут сменять друг друга.
При этом можно будет зациклить анимацию, когда за последним кадром будет опять начинаться показ первого.
Есть специализированные редакторы, в которых можно создавать Gif анимацию. Главное создать нужное количество картинок определенного размера, а потом они размещаются на временной шкале и задается интервал для их смены.
В результате получает тот самый эффект мультика, который мы уже привыкли наблюдать на веб страницах. Иногда даже в глазах рябит от анимированных баннеров (читайте про то, как сделать баннер онлайн), смайликов, аватаров. Примером Гиф анимации может служить гоблин со страницы «О блоге» моего проекта.
Гиф поддерживает прозрачный фон (почти)
Но анимация — это не единственная фишка этого формата. Он может так же поддерживать примитивный способ формирования прозрачности для создаваемых изображений. Один из 256 возможных цветов в Gif задается как прозрачный и сквозь него будет просвечивать фон веб страницы, на которой будет расположена эта картинка.
Но проблема состоит в том, что для любого пиксела в изображении этого формата возможно лишь два значения — прозрачный или непрозрачный (два крайних состояния без возможности промежуточных вариантов типа полупрозрачный, на четверть прозрачный и т.п.). Т.е. о таком понятии, как альфа-канал (используемого в Png), в прозрачном Gif речи не идет. Из-за этого возникают сложности с отображением плавно изменяющего уровня прозрачности.
Но все равно прозрачный Гиф находит применение в вебе. Например, в таком формате очень часто сохраняют различные маркеры, используемые на веб страницах. Фон вокруг маркера делается прозрачным и сквозь него будет просвечивать фон веб страницы. Например, вот так бы выглядел маркер с серым фоном:
А так этот же маркер будет выглядеть при замене серого фона на прозрачный цвет при сохранении в Гиф:
Для того, чтобы сформировать плавные края с падением прозрачности в картинках Gif, идут на одну хитрость. В любом графическом редакторе при создании изображения в этом формате, у вас будет возможность указать так называемый цвет MATE (иначе будет в качестве него использоваться цвет по умолчанию, обычно белый).
Цвет MATE подмешивается в те области Гифа, где вам требуется создать плавные края с падением прозрачности, но все это будет хорошо смотреться только для того фона веб страницы, который совпадает с указанным вами MATE. А вот поверх другого оттенка эта картинка будет выглядеть очень не здорово.
Для какой веб-графики имеет смысл использовать формат Gif?
Как я уже упоминал чуть выше, в этом формате рисунки сжимаются (преобразуются) без потерь, но только в том случае, если исходная картинка была 8-ми битной (для кодирования цвета отводился всего лишь один байт), т.е. содержало 256 цветов. Если же исходник был полноцветным, то будет ухудшение качества при сохранении или преобразовании в Gif, именно в силу потери части оттенков.
Алгоритм сжатия (преобразования) в Гифе работает таким образом, что лучше всего он будет оптимизировать размер фото при вертикальном изменении цвета (градиенте). Т.е. имеет смысл его использовать для сжатия картинок, цвет в строках которых сильно не меняется.
А вот при преобразовании в Gif фото с горизонтальным или наклонным градиентом, итоговая картинка может получиться очень большого размера, например, по сравнению все с тем же Png. Ну, а кроме этого возможно вылезание неприятных артефактов.
Кроме этого, данный алгоритм сжатия был в свое время запатентован, и именно поэтому началась усиленная работа над альтернативным Png 8, но на данный момент сроки патентов Gif уже истекли. ПНГ получился в итоге на голову лучше Гифа и продолжает набирать популярность среди вебмастеров.
Jpg (JPEG) — полноцветные изображения с малым весом
Jpg был разработан для сжатия и хранения полноцветных фотографий. Он является собственностью ассоциации американских фотографов, о чем, собственно, и говорит аббревиатура Jpeg — Joint Photographic Experts Group. Хотя сама же эта ассоциация говорит, что это открытый формат.
Как я уже упоминал чуть выше, он сжимает изображения с потерей качества. Вся картинка делится на квадраты размером 8 на 8 пикселей и затем начинает работать алгоритм сжатия, который группирует из этих простейших квадратиков разные простые фигуры.
Все те различия в цветах, которые человеческий глаз заметить не в состоянии, из картинки в Jpg удаляются.
Плюсы и минусы Джейпег
Благодаря удалению части информации, которая все равно не будет заметна невооруженным взглядом, Jpeg позволяет иногда сжать полноцветные картинки в десятки раз даже без видимой потери в качестве.
Но, с другой стороны, даже при выборе максимального качества у вас не получится сохранить фотографию в этом формате с абсолютно тем же качеством, что имел оригинал. Потери будут обязательно, но не всегда заметные глазом без увеличения.
Вы можете проверить это сами, взяв какую-нибудь очень качественную фотография и сохранив ее в Джейпег с максимальным качеством несколько десятков раз подряд. Поэтому лучше не сохранять повторно в Jpg исходники такого же формата — будут серьезные потери в качестве из-за накапливания и накладывания артефактов. Поэтому не стоит сохранять незаконченное изображение в JPEG, а затем продолжать его редактирование — существенно потеряете в качестве.
Вот пример такого издевательства (всего несколько повторных сохранений в формате Джепег и на картинку без слез не взглянешь):
Но несмотря на указанные недостатки Jpeg стал очень популярным особенно после появления цифровой фотографии. Основные его достоинства — это возможность быстрого, нересурсозатратного и очень сильного сжатия полноцветных изображений. Правда, этот формат растровой графики назвать полноцветным трудно, т.к. он не совсем охватывает всю палитру RGB, но это можно отнести к несущественным недостаткам.
Какие изображения лучше сохранять в формате Jpg?
Jpg лучше всего подходит для сохранения фотографий с плавными переходами яркости и контраста, а вот для сохранения чего-то вроде чертежей, текстов и других фотографий с резкими контрастными переходами он подходит очень плохо, и в этом случае лучшим вариантом будет использование сжатия без потерь в Png.
Смотрите, как неприглядно выгладит скриншот текста в формате JPEG (хотя при таком же и даже меньшем весе в формате PNG картинку вообще было бы не отличить от оригинала):
У Jpg (JPEG), как я уже упоминал, есть возможность задать качество получаемого изображения, регулируя степень его сжатия.
При сохранении фото, на которых, например, много неба, следует ставить качество (степень сжатия) Jpeg близкое к максимальному (минимальное сжатие) во избежании заметных артефактов на этом самом небе.
А при сохранении фотографий с множеством деталей разных цветов качество можно понизить (увеличить степень сжатия), не боясь появления заметных артефактов.
Я упоминал, что при сохранении в Jpg (JPEG) происходит разбиение всего изображения на квадратики со стороной в восемь пикселей. Так вот, если у вас будет возможность выбирать размер результирующего фото, то лучше его брать кратным восьми, т.к. в этом случае вы получите чуть меньше артефактов, что будет особенно заметно на картинках с тонкими линиями и т.п.
Png — замена Gif и Jpeg, а так же прозрачный фон в Png32
Изначально Png разрабатывался как альтернатива проприетарного в то время Gif (к его разработке не подпускали никого со стороны). Расшифровывается аббревиатура как «portable network graphics», изначально он был заточен именно для применения в вебе.
Этот формат растровой графики полностью открытый и его описание есть на сайте консорциума W3C.
Напомню, что он является форматом сжатия без потерь, а значит можно спокойно сохранять незаконченное изображение в Png, а затем продолжать его редактирование не боясь получить дополнительные артефакты, как это было в случае Jpg.
Png8 и Png24 — полноценная замена Gif и Jpeg
Существует три вариации формата Пнг, каждая из которых призвана выполнять свои задачи. Первые две изначально создавались как альтернатива уже существующих форматов Гиф и Джейпег, а третий привнес в веб-графику то, чего в ней до тех пор вообще не было. Но обо всем по порядку.
Png 8 — восьмерка обозначает битность цвета и говорит о том, что при сохранении фотографии в Пнг 8 будет использоваться только 256 цветов по аналогии с уже описанным чуть выше Gif.
Т.е. он разрабатывался как полноценная замена Гифа и результаты сжатия изображений в этих двух форматах растровой графики будут практически идентичными.
Так же как и в Gif — тут поддерживается прозрачность, но уже с альфа-каналом.
Png 24 — цифра 24 означает, что на каждый пиксел фото в этом формате выделяется три цветовых канала по 8 бит каждый (по 1 байту), тем самым реализуется полноцветное формирование изображения. Т.о. с помощью Пнг 24 вы сможете передавать цвета без искажений. Даже Jpg не может этого сделать на все сто процентов.
Сохраняя исходную картинку в Png 24 вы получаете абсолютно точно такое же фото, но зато его размер будет все же больше, чем при использовании Jpeg. Но это, правда, не всегда так. При больших картинках, имеющих резкие переходы, этот формат может показать даже лучший результат, чем Джипег приемлемого качества.
Т.е. как я уже упоминал чуть выше, для обычных фоток лучше всего подойдет Jpeg, а вот для изображений с текстом или там, где ни в коем случае нельзя будет ухудшать качество, Png 24 будет незаменим. Для сохранения скриншотов, которые я использую в статьях, Пнг 8 или 24 мне кажутся оптимальным решением.
Например, тот же самый скриншот с текстом, который чуть выше вы могли видеть сохраненным в Jpeg (правда с низким качеством, чтобы подчеркнуть возможные артефакты) в Png будет выглядеть так:
А вот полноцветную картинку вначале каждой статьи я сохраняю обычно в Джипеге, т.к. соотношение качество/размер говорят в пользу именно такого варианта. Сразу скажу, что существуют разные способы сжатия изображений в формат Png, и один из лучших алгоритмов используется, на мой взгляд, в онлайн сервисе Puny Png.
Я прогнал через него все имеющиеся на блоге изображения и регулярно прогоняю все новые картинки в формате Png, используемые для новых статей. О том, как сжать в нем все свои Png картинки, вы можете прочитать здесь — сервис для сжатия фото.
Png 32 — полноценная прозрачность с альфа каналом
Наверное, вы поняли по аналогии, что в этом формате растровой графики для одного пикселя возможно использовать аж четыре байта информации.
Три отвечают за формирование полноцветного изображения по аналогии с Пнг 24, а вот четвертый байт выделяется отдельно для формирования альфа-канала, позволяющего использовать Пнг 32 для получения картинок с прозрачным фоном.
В нем вы сможете указывать изменение степени прозрачности без всяких MATE цветов, а значит такие картинки будут одинаково хорошо смотреться на абсолютно любых веб страницах с любым фоном. Примером такого изображения может служить логотип из шапки моего блога:
или иконка RSS ленты:
Наверное, понятно, что Png 32 просто незаменим и не имеет аналогов по предоставляемых возможностям. Кстати говоря, альфа канал можно использовать так же и в Пнг 8, но, к сожалению, не все редакторы растровой графики позволят вам это сделать. Фотошоп, например, этого делать не умеет, но зато Fireworks или Gimp умеют.
Кроме этого, у Пнг 32 и 8 с альфа-каналом есть такая проблема, что он в браузере IE, начиная с версии 6 и ниже, не поддерживается полноценно, и вместо прозрачного фона будет подмешиваться серый цвет, а Png 8 с альфа-каналом там вообще показываться не будет. Правда, таких архаичных браузеров у пользователей уже практически не осталось, но все же.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.
ru
что это, особенности формата и как с ним работать
Особенности форматаОсновной и отличительной особенностью PNG является то, что изображение можно сохранить без фона, то есть фон будет прозрачным. В других растровых форматах это недоступно. Такая особенность делает PNG-файл универсальным. Картинку без фона удобно применять во время дизайна баннеров, постеров, сайтов, она может легко подстроиться под уже имеющиеся элементы на веб-странице и сочетаться с ними. В поисковике такую картинку легко визуально распознать по фону с серыми квадратиками, условно обозначающими прозрачность. Однако после того как вы скачаете и откроете изображение, квадратики должны пропасть, а фон должен стать «пустым».
Пример PNG-картинки с прозрачным фоном в результатах выдачи Google. Источник фотоОднако прозрачность — необязательная опция. Вы вполне можете использовать PNG просто в качестве полноцветной картинки, не вырезая фон.
Где применяется формат PNGВ основном данный формат используется в сфере веб-дизайна, то есть для оформления сайтов и рекламных креативов.
За счет большого количества цветов и алгоритма сжатия без потерь PNG-картинки — это отличные элементы для яркого дизайн-макета, а за счет опции прозрачности PNG помогают ускорить рабочий процесс, ведь не нужно тратить время на то, чтобы вырезать фон.
История его возникновения начинается с 1995 года, когда было принято решение найти альтернативу графическому формату GIF. Трудность заключалась в том, что для использования GIF требовалось приобрести лицензию компании, которая его придумала, что было не всегда и не для всех доступно. Поэтому на смену GIF-изображению и пришел новый непатентованный и свободно распространяемый аналог — формат PNG, ставший доступным каждому пользователю.
Какой программой открыть PNG на разных операционных системахНа сегодняшний день PNG-формат можно открыть на любой операционной системе с помощью уже стандартной программы для просмотра графических изображений.
Сейчас по порядку опишем, как и с помощью каких инструментов можно это сделать.
Для просмотра PNG-формата на ОС Windows понадобится один из следующих вариантов:
- любая встроенная утилита для просмотра графики, например приложение «Фотографии» или Microsoft Paint;
- любой установленный сервис для просмотра графики, например ACDSee;
- любой веб-браузер;
- графические редакторы Adobe Illustrator или Photoshop;
- облачное хранилище Microsoft OneDrive, облака Google Drive, Яндекс.Диск, Mail.ru, Dropbox.
На MacOS:
- встроенные программы «Фото» и «Просмотр»;
- браузер Safari;
- графические редакторы, например ColorStrokes.
На iOS:
- приложение «Фото»;
- сторонние редакторы, например Pixelmator;
- облачные хранилища Google Drive, Яндекс.Диск и др.
На Android:
- встроенная программа просмотра фото;
- сторонние графические редакторы, например Adobe Photoshop Express;
- облачные хранилища.
Создать с нуля файл формата PNG несложно, но процесс может занять много времени в первый раз, если вы не веб-дизайнер и непосредственно не связаны с данной профессией. Понадобится графический редактор (например, Photoshop, MS Paint, Procreate и др.), в котором нужно открыть картинку в другом формате или нарисовать ее с нуля, а затем сохранить в PNG. В Photoshop это делается через опцию «Сохранить как» и выбор нужного формата.
Создание PNG в Adobe PhotoshopКонвертеры PNG-файловЧтобы конвертировать изображение или файл в PNG-формат, можно, например, использовать следующие инструменты в формате онлайн:
- AnyMP4;
- FastStone;
- Adapter;
- Pixillion;
- IMG2GO;
- XnConvert;
- ZamZar и др.
Это не все из возможных онлайн-конвертеров PNG-файлов, однако большим их преимуществом перед другими является то, что они бесплатные.
Плюсы и минусы формата PNGНесмотря на всеобщую доступность PNG-файлов, данный формат имеет как ряд преимуществ, так и некоторые недостатки.
Сейчас по порядку рассмотрим и то, и другое.
Плюсы формата PNG:
- С точки зрения цветового диапазона у PNG существуют несколько вариантов цветовой палитры: от 8-битной (256 цветов) до 48-битной (десятки миллионов цветов). Этот факт говорит нам о том, что у PNG очень широкий цветовой диапазон.
- PNG-файл работает со сжатием без потерь исходного качества или с совсем незначительным ухудшением, которое сложно выделить визуально.
- Размер изображений достаточно компактный по сравнению с фотоформатами (например, RAW).
- С помощью уменьшения прозрачности изображения можно добиться его плавного сочетания с фоном, причем интенсивность прозрачности может меняться от максимальной контрастности до полного исчезновения.
- Если необходимо зафиксировать авторство, то можно добавить в формат необходимые метаданные.
Минусы формата PNG:
- невозможность анимировать картинку;
- на данный момент нельзя в один файл сохранить несколько изображений;
- PNG-файлы зачастую весят больше, чем JPEG и GIF.
Это основные преимущества и недостатки PNG-формата изображений, но, конечно, это не отменяет субъективных особенностей и выводов, которые может вынести для себя каждый пользователь при работе с данным типом файлов.
ИСКРА —
неделя знакомства
с дизайн-профессиями
бесплатно
ИСКРА —
неделя знакомства
с дизайн-профессиями
7 дней, которые разожгут в вас искру интереса
к дизайну. Получайте подарки каждый день,
знакомьтесь с востребованными профессиями
и выберите ту, которая подойдет именно вам.
разжечь искру
форматов веб-графики
форматов веб-графикиВернуться на страницу пятого класса »
Назначение
- Визуальная/эстетическая привлекательность — поддерживает интерес и внимание посетителей
- Создать визуальную структуру — прояснить информационную иерархию (вспомните типографику и иерархию)
- Визуально сообщайте идеи
Наши сайты обычно довольно скучны без использования графики.
Руководство по веб-графике
- Веб-графика должна соответствовать назначению, организации и стилю сайта
- Большая (размер файла) графика увеличивает время загрузки страницы — избегайте.
- Графика должна помочь сосредоточить внимание посетителя на том, что важно на странице
- Избегайте надоедливых изображений, анимации, бесполезных эффектов — они быстро устаревают без цели.
-
- Сделать графику доступной с альтернативным текстом.
- Убедитесь, что текст в графическом изображении достаточно контрастен, чтобы его можно было прочитать. Это особенно важно при использовании фоновых изображений.
Форматы веб-графики
Существует три формата графических файлов, используемых в Интернете: JPG, GIF и PNG.
Каждый из этих форматов файлов разработан с определенной целью, поэтому важно понимать различия, когда мы используем их на наших веб-сайтах.
JPG
Формат изображений JPG был разработан для эффективного хранения и сжатия реалистичных изображений и иллюстраций (как в цвете, так и в оттенках серого). Формат JPG очень хорошо сжимает изображения с большим количеством цветов и градаций цветов. Думайте о JPG как о сильно сжатой фотографии.
Формат JPG не позволяет сохранять прозрачные пленки. Если требуется прозрачность фона вашего изображения, вы должны выбрать другой формат.
При сохранении изображений в формате JPG вы можете выбрать уровень сжатия, чтобы сбалансировать размер файла и качество изображения. Размер файла напрямую связан с фактическим размером (в пикселях) изображения. Большой размер пикселя всегда приводит к большему размеру файла.
Примеры изображений, которые следует сохранять в формате JPG:
GIF и PNG
В форматах изображений GIF и PNG используется так называемый «индексный цвет».
Они хранят минимизированную цветовую палитру в файле изображения и ключи к тому, где эти цвета должны располагаться на изображении. Размер файла для изображений GIF и PNG обычно зависит от количества используемых цветов. Общие номера цветов: 2, 4, 8, 16, 32, 64, 128, 256.
Форматы изображений GIF и PNG идеально подходят для изображений с однородными цветами (без градиентов) и резкими краями. Распространенными примерами таких типов изображений являются логотипы, логотипы и иллюстрации без градиентов.
Прозрачность
Форматы GIF и PNG также поддерживают прозрачность. Если вам нужен какой-либо уровень прозрачности вашего изображения, вы должны использовать либо GIF, либо PNG.
изображений GIF (а также PNG) поддерживают одноцветную прозрачность. В основном это означает, что вы можете сохранить изображение с прозрачным фоном.
В качестве примера возьмем логотип Good Food. Это должен быть файл изображения, потому что мы используем причудливый шрифт, а также изображение яблока вместо a.
Если бы мы сохранили логотип в формате JPG, у нас остался бы фоновый цвет.
JPG не даст нам прозрачности
Очевидно, что цвет фона в этой ситуации не идеален. Если мы сохраним изображение в формате GIF, мы можем использовать прозрачный цвет фона.
GIF дает нам прозрачный фон. Обратите внимание на кольцо вокруг текста.
Использование GIF-изображения с прозрачным фоном позволило нам поместить наше изображение на фон другого цвета. Обратите внимание на белое кольцо вокруг изображения. Это связано с тем, что изображения GIF могут использовать только одноцветную прозрачность. Мы не можем медленно становиться прозрачными. Вокруг изображения всегда будет цветное кольцо. Мы можем изменить цвет кольца, но это означает, что мы должны заранее знать, какой цвет фона мы собираемся использовать.
Переменная прозрачность
Формат файла PNG позволяет сохранять различные уровни прозрачности.
Это известно как альфа-канал. Используя переменную прозрачность, мы можем фактически использовать прозрачность в качестве градиента.
Самый простой способ продемонстрировать прозрачность переменных — на примере. Ниже показано одно и то же изображение дважды на двух разных цветах фона.
Обратите внимание, что цвет фона просто растворяется в изображении. Это будет работать хуже, если вы сохраните как png8. Обязательно сохраните как png24.
Возвращаясь к нашему логотипу Good Food, мы можем использовать ту же технику, чтобы убедиться, что наш логотип сочетается с любым фоновым цветом.
GIF против PNG
В этот момент вам может быть интересно, как узнать, когда использовать GIF или PNG. GIF — это более старый формат файла, восходящий к началу 1990-х годов.
Раньше мы использовали его для действительно неприятных анимаций изображений (на самом деле, мы все еще делаем это). GIF — единственный формат файла, который может это сделать.
Формат PNG является более новым и лучшим форматом. Раньше мы использовали GIF из соображений совместимости, но к настоящему времени любой браузер, который не поддерживает PNG, является действительно старым браузером. Формат PNG использует лучшую схему сжатия, чем GIF, поэтому размеры файлов обычно меньше. Кроме того, изображения PNG можно дополнительно сжать с помощью инструмента сжатия, такого как Smush.it.
Сводка форматов изображений
- JPG
- Используется для фотографий или изображений любого типа с плавными переходами между цветами. Не поддерживает прозрачность.
- PNG
- Используется для изображений с ровными цветами и четкими краями, таких как логотипы, логотипы и иллюстрации без градиентов. Может иметь один или несколько уровней прозрачности.
- GIF
- Старый формат. Обычно не нужно его использовать, но знайте, что он существует.
Назад на страницу класса 5 »
Как сделать изображения с прозрачным фоном PNG
Фоновые изображения PNG широко используются для отображения высококачественных цифровых изображений на веб-сайтах. Он особенно популярен среди дизайнеров в файлах формата PNG, поскольку может обрабатывать графику с прозрачным или полупрозрачным фоном. Это позволяет просвечивать цвет позади вашего изображения.
Более того, чтобы превзойти производительность файлов GIF, PNG обеспечивает не только сжатие без потерь, но и более широкую и яркую палитру. Фоновые изображения в формате Png очень хороши. Как сделать изображения с прозрачным фоном png?
Что такое фон PNG?
Фон PNG часто используется в рисовании линий, логотипах, онлайн-диаграммах и графике. PNG (Portable Network Graphics) — это тип файла растрового изображения. Файлы PNG с расширением .png. Он может обрабатывать 16 миллионов цветов, что отличает его от большинства типов файлов.
В чем разница между PNG и JPG?
Поскольку все мы знаем, что общий тип файла изображения — это не только PNG, но и JPG, так в чем же между ними разница? Разницу между jpg и png легко отличить, и мы можем отличить их по следующим аспектам:
1.
Степень сжатия
Jpg — это сжатый с потерями файл изображения, который является популярным форматом файла изображения в сети. Картинка в формате jpg может сжимать файл изображения до минимального формата. Однако Png представляет собой сжатый файл изображения без потерь.
2 . Разница в качестве после сжатия
Изображения в формате jpg могут отображать очень яркие и насыщенные изображения одновременно с высокой степенью сжатия, но с повышением степени сжатия качество изображения будет постепенно снижаться.
Однако, картинки png отличаются, они меньше по размеру и занимают меньше места по сравнению с форматом jpg, картинки png без потери данных изображения, вы сможете получить нужные вам картинки быстрее, а качество картинок не ухудшится.
3. Редактируемый и нередактируемый
Изображения в формате jpg не могут быть отредактированы должным образом. Изображения PNG больше, чем изображения jpg в формате png.
Но изображения в формате png можно редактировать, например стили текста, линии и т. д., и их можно изменять с помощью программного обеспечения, такого как фотошоп.
После появления PNG мы можем ясно почувствовать, что фон PNG очень распространен в нашей жизни и работе, поэтому, когда нам нужен фон PNG, есть ли другой способ получить фон PNG, кроме как обратиться к профессионалам? Мы можем использовать инструменты, чтобы сделать это!
Как сделать прозрачный фон с помощью инструментов?
Есть много способов сделать прозрачный фон, мы представим некоторые из наиболее распространенных программ для создания фоновых изображений png.
Используйте PowerPoint, чтобы сделать прозрачный фон
В Word, PowerPoint и Excel вы можете удалить фон с изображения, чтобы выделить тему изображения, или удалить отвлекающие детали. Чтобы удалить фон, выберите изображение. Выберите инструмент «Изображение» > вкладку «Форматирование», а затем выберите «Удалить фон».
В Windows
1. Выберите изображение, с которого вы хотите удалить фон.
2. В разделе Инструменты для работы с изображениями на вкладке Формат в группе настроек выберите Удалить фон. Щелкните один из маркеров на линии выделения, а затем перетащите линию, чтобы она содержала часть изображения, которую вы хотите сохранить, и исключила большую часть областей, которые вы хотите удалить. Иногда вы можете получить желаемые результаты, поэкспериментировав с расположением и размером линий выделения без каких-либо дополнительных усилий.
3. Чтобы отменить маркировку области, выберите Удалить метку, а затем выберите линию. Если область по умолчанию неверна, перейдите к фоновому инструменту «Удалить» > «Изображение» и выполните одно или оба этих действия.
4. Выберите «Отметить область для перемещения» и используйте карандаш для рисования, которым рисовали таблицу, чтобы отметить область, которую вы хотите оставить на изображении.
5.
Выберите область, которую хотите удалить, и карандашом, которым рисовали таблицу, отметьте область, которую хотите удалить.
Когда вы закончите, выберите сохранить изменения или отменить все изменения. Чтобы сохранить изображение в отдельный файл для последующего использования, щелкните изображение правой кнопкой мыши и выберите «Сохранить как изображение». Есть подробное обучающее видео, вы также можете следовать видео шагам:
На MAC
Выберите изображение. На вкладке Формат изображения на ленте выберите Удалить фон.
Если вы не видите вкладку удаления фона или форматирования изображения, убедитесь, что вы выбрали изображение. Возможно, вам придется дважды щелкнуть изображение, чтобы выбрать его, а затем открыть вкладку формата изображения. Фоновая область по умолчанию окрашена в пурпурный цвет, чтобы пометить ее для удаления, в то время как передний план сохраняет свой естественный цвет.
Если область по умолчанию неверна, на вкладке «Удалить фон» в разделе «Инструменты для рисунков» выполните одно или оба из следующих действий:
1. Выберите «Отметить область», которую вы хотите сохранить, и используйте карандаш произвольной формы, которым рисовали таблицу, чтобы отметить область, которую вы хотите сохранить на изображении.
2. Выберите область, которую вы хотите удалить, и используйте карандаш для рисования, которым рисовали таблицу, чтобы отметить область, которую вы хотите удалить.
3. Когда вы закончите, выберите сохранить изменения или отменить все изменения. Чтобы сохранить изображение в отдельный файл для последующего использования, щелкните изображение правой кнопкой мыши и выберите «Сохранить как изображение».
Используйте Adobe Photoshop, чтобы сделать прозрачный фон
Photoshop — самый традиционный способ создания прозрачного фона в формате PNG. Метод полигонального лассо очень подходит для изображений с прямыми краями.