带有alpha通道的JPEG图像在网站上

时间:2010-04-14 18:11:50

标签: transparency jpeg opacity alpha

我想制作一个JPEG图像文件,其中包含部分透明或完全透明的像素,类似于带有Alpha通道的PNG文件。这可能吗?如果是这样,我将如何做到这一点?

我想在网站上使用该图片。如果我尝试这样做,它会在任何或所有流行的浏览器(IE 7 +,Firefox,Safari)中工作吗?假设它是可能的,它会起作用,还是需要任何技巧或黑客来使它工作?

编辑:有些回复称我不能这样做。但是,我发现this page描述了具有透明度的JPEG图像。有谁知道是否有一种方便的方式来生成这种格式的文件?它被广泛支持吗?

9 个答案:

答案 0 :(得分:32)

是的,你可以这样做。 JPEG format提供可交换的图片文件格式

  • 色彩空间定义
  • 组件子样本注册
  • 像素宽高比定义

JPEG / Exif是最常见的摄影,JPEG / JFIF是最常用的存储。

当其他状态JPEG格式不提供alpha通道时,他们真正说的是没有广泛使用的包含alpha通道的JPEG编码格式。

查看作者描述的On adding alpha channels to JPEG images,并提供解决方案,确切了解您要执行的操作,并使用canvas元素在浏览器上呈现。

答案 1 :(得分:10)

JPEG不支持透明度。你需要坚持使用PNG或GIF。为什么要使用JPEG来提高透明度?

更新

请忽略这个答案,当Canvas支持稀疏时,它会被回写。请转而参考马丁的回答。

答案 2 :(得分:6)

您还可以使用SVG将JPG与Alpha通道相结合,如here所述。 您需要在HTML中内联SVG,否则它将无法在所有浏览器中使用。 此外,不支持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>

答案 3 :(得分:3)

JPEG图片不能具有任何透明度:JPEG不支持。

您必须切换到PNG张图片,才能获得1位或8位透明度(或GIF,只支持1位 - <透明,或不透明)

答案 4 :(得分:1)

原始JPEG格式不提供Alpha通道。但是,您可以制作PNG文件。它可以在IE7 +和其他“现代”浏览器中使用。

“JPEG 2000”格式 支持透明度,但尽管名称它实际上是一种全新的图像编码格式。它只受Safari支持。

答案 5 :(得分:1)

我仍在寻找相同的解决方案。

除非浏览器支持 Alpha频道新图片格式,否则只会有解决方法。

使用jpeg for image和png for mask会大大减少大小,但会增加文件数(2个图像+ ALPHA而不是1个带ALPHA的图像)。

如果您想提高浏览器加载速度和缩小尺寸,您应该找到只有一个浏览器请求的解决方案(1个图像文件)。

我找到的任何解决方案都是原型。但你应该检查一下:

CSS3面具 http://www.webkit.org/blog/181/css-masks/

两个文件组合 http://blog.jackadam.net/2010/alpha-jpegs/

答案 6 :(得分:0)

JPEG XL有计划支持透明度。来自Draft Call for Proposals on Next-Generation Image Coding (JPEG XL)

  

1.2范围

     

下一代图像编码活动旨在开发图像   编码标准,提供:
  ...

     
      
  • Web应用程序的功能,例如支持Alpha通道编码和动画图像序列。
  •   
     

...

     

4.2压缩比特流要求

     

提交材料应至少涵盖核心要求,并鼓励提交所需要求。

     

核心要求

     

...

     

支持Alpha通道/透明度编码

答案 7 :(得分:-2)

看看“金融时报”的标志。 它显然是一个jpeg,但有一个alpha通道:http://im.media.ft.com/m/img/masthead_main.jpg

我无法用Photoshop打开图像。

答案 8 :(得分:-2)

这里有多少令人难以置信的自信错误信息?如果您不知道,请不要发表评论。 JPEG绝对支持透明度 - 透明度是一个组件/通道,JPEG可以支持数千个通道。 JPEG是色盲的,它甚至不知道红色,绿色和蓝色通道,或YCbCr通道,没有JFIF或SPIFF包装器。正如JPEG可以支持12位通道,而不仅仅是8位 - 并不意味着浏览器知道如何处理数据。问题在于给定的浏览器是否可以解码并正确地将通道解释为在渲染过程中意味着“透明度”。