Растровая графика для веба в лице Гиф, Джейпег и Пнг

Сейчас очень трудно представить веб-сайты и отдельных веб-страниц совсем без наличия на них каких-либо фотографий, значков или картинок. Кстати, первым браузером, который мог показывать графику, стал 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

Формат JPG: особенности, преимущества и недостатки.

Vasyl Holiney

Обновлено 11 декабря, 2019

Loading…

Содержание:
1.Преимущества и недостатки
2.Где используется?

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

Появился этот формат, как результат работы группы фото экспертов «Joint Photographic Experts Group». Основной задачей этой группы разработчиков было выработать оптимальный алгоритм сжатия изображения. На сегодня эта задача решена успешно.

Фото Cargocollective.com

Вкратце о формате мы уже писали в этой статье «Форматы графических файлов — JPG, PNG, SVG, PDF», теперь разберем плюсы и минусы формата более подробно:

Преимущества и недостатки.

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

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

Где используется?

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

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

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

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

Вернуться на страницу пятого класса »

Назначение

• Визуальная/эстетическая привлекательность — поддерживает интерес и внимание посетителей
• Создать визуальную структуру — прояснить информационную иерархию (вспомните типографику и иерархию)
• Визуально сообщайте идеи

Наши сайты обычно довольно скучны без использования графики.

Руководство по веб-графике

• Веб-графика должна соответствовать назначению, организации и стилю сайта
• Большая (размер файла) графика увеличивает время загрузки страницы — избегайте.
• Графика должна помочь сосредоточить внимание посетителя на том, что важно на странице
• Избегайте надоедливых изображений, анимации, бесполезных эффектов — они быстро устаревают без цели.
• Графика никогда не должна использоваться для текстового содержимого, за исключением случаев, когда заголовок требует включения логотипа. . Это снижает индексацию поисковыми системами, доступность и т. д.
• Сделать графику доступной с альтернативным текстом.
• Убедитесь, что текст в графическом изображении достаточно контрастен, чтобы его можно было прочитать. Это особенно важно при использовании фоновых изображений.

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

Существует три формата графических файлов, используемых в Интернете: 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 — единственный формат файла, который может это сделать.
Но, если вы не планируете делать что-то для Facebook или MySpace, вы, вероятно, не захотите использовать анимированный GIF.

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

Сводка форматов изображений

JPG

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

PNG

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

GIF

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

Назад на страницу класса 5 »

Изображение

JPEG с прозрачностью –

Задавать вопрос

спросил
12 лет, 7 месяцев назад

Изменено
1 месяц назад

Просмотрено
53 тысячи раз

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

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

РЕДАКТИРОВАТЬ: я нашел эту страницу, описывающую изображение JPEG с прозрачностью. Кто-нибудь знает, есть ли удобный способ создавать файлы в этом формате? Широко ли это поддерживается?

• прозрачность
• jpeg
• непрозрачность
• альфа

2

Да, вы можете это сделать. Формат JPEG позволяет обмениваться форматами файлов изображений

• Определение цветового пространства
• Регистрация подвыборки компонентов
• Определение соотношения сторон пикселей

JPEG/Exif чаще всего используется для фотографии, а JPEG/JFIF чаще всего используется для хранения.

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

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

7

Устаревший ответ

Если ваш браузер не поддерживает холст, вы не можете использовать JPEG с прозрачностью.
Вам нужно будет придерживаться PNG или GIF.

2

Вы также можете использовать SVG для объединения JPG с альфа-каналом, как описано здесь.
Вам нужно будет встроить SVG в HTML, иначе он не будет работать во всех браузерах.
Кроме того, IE8 не поддерживается.

Встроенный код svg будет выглядеть так:

  1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:// www.w3.org/1999/xlink" viewBox="0 0 560 1388">
  <определения>
    <маска>
      <изображение xlink:href="img/can-top-alpha.png" />
    
  
  

 

Исходный формат JPEG не предусматривает альфа-канал. Однако вы можете создать файл PNG. Он будет работать в IE7+ и других «современных» браузерах.

Формат «JPEG 2000» поддерживает прозрачность , но, несмотря на название, это действительно совершенно новый формат кодирования изображений. Он поддерживается только Safari.

1

В настоящее время JPEG не поддерживает прозрачность.

Можно переключитесь на изображения PNG , чтобы получить либо 1 бит, либо 8 бит прозрачности (или GIF , который поддерживает только 1 бит, т.е. прозрачный или непрозрачный) .

Вы также можете переключиться на WebP , механизм которого аналогичен JPEG. Он поддерживает сжатие с потерями/без потерь, прозрачность и анимацию.

3

Я все еще ищу такое же решение.

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

Использование jpeg для изображения и png для маски значительно уменьшит размер, но увеличит количество файлов (2 ИЗОБРАЖЕНИЯ+АЛЬФА вместо 1 ИЗОБРАЖЕНИЯ с АЛЬФА).

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

Любое решение, которое я нашел, является прототипом. Но вы должны проверить это:

Маски CSS3
http://www.webkit.org/blog/181/css-masks/

И комбинация из двух файлов
http://blog.jackadam. net/2010/alpha-jpegs/

Планируется, что JPEG XL будет поддерживать прозрачность. Из проекта конкурса предложений по кодированию изображений следующего поколения (JPEG XL):

Деятельность по кодированию изображений следующего поколения направлена
стандарт кодирования, который предлагает:
…

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

…

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

Основные требования

…

Поддержка кодирования альфа-канала/прозрачности

4

С технической точки зрения JPEG поддерживает тысячи каналов даже в 12-битном формате, а не только в 8-битном. Интерпретация данных определяется оболочкой JFIF или SPIFF.

This entry was posted in Популярное