Изображение JPEG с альфа-каналом на веб-сайте

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

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

EDIT: Некоторые ответы говорят, что я не могу этого сделать. Однако я нашел эту страницу, описывая изображение JPEG с прозрачностью. Кто-нибудь знает, есть ли удобный способ для создания файлов в этом формате? Широко поддерживается ли она?

Ответ 1

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

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

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

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

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

Ответ 2

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

Update

Пожалуйста, проигнорируйте этот ответ, он был записан, когда поддержка Canvas была разреженной. Обращайтесь к мартинскому ответу.

Ответ 3

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

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

<svg preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 560 1388">
  <defs>
    <mask id="canTopMask">
      <image width="560" height="1388" xlink:href="img/can-top-alpha.png"></image>
    </mask>
  </defs>
  <image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg"></image>
</svg>

Ответ 4

Вы не можете иметь никакой прозрачности с изображением JPEG: JPEG не поддерживает это.

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

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

Ответ 5

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

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

Ответ 6

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

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

Использование jpeg для изображения и png для маски резко уменьшит размер, но увеличит количество файлов (2 IMAGE + ALPHA вместо 1 IMAGE с ALPHA).

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

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

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

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

Ответ 7

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

1.2 Объем

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

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

4.2 Требования к сжатому битовому потоку

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

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

...

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

Ответ 8

Взгляните на логотип Financial Times. Это, по-видимому, jpeg, но с альфа-каналом: http://im.media.ft.com/m/img/masthead_main.jpg

Я не могу открыть изображение с помощью Photoshop.

Ответ 9

Что с невероятно уверенной дезинформацией здесь? Если вы не ЗНАТЬ, не комментируйте. JPEG абсолютно поддерживает прозрачность - прозрачность является компонентом/каналом, а JPEG поддерживает тысячи каналов. JPEG является слепящим, он даже не знает о красных, зеленых и синих каналах или каналах YCbCr, без обертки JFIF или SPIFF. Так же, как JPEG может поддерживать 12-битные каналы, а не только 8-битные - это не значит, что браузер знает, что делать с данными. Проблема заключается в том, может ли данный браузер декодировать и правильно интерпретировать канал, что означает "прозрачность" во время его рендеринга.