JPG 不允许透明背景。

您唯一能做的就是拥有一个可以融入您的网站的纯色背景：例如。如果您的网站背景是白色的，则使用白色背景创建 JPG。

否则，您需要考虑另存为 PNG，它确实允许真正的透明度。

JPEG 根本不支持透明度。

最兼容的选项是使用 PNG，但由于它是无损压缩，因此会导致照片文件很大。

另一种选择是使用新的 WebP 文件格式，它支持无损（如 PNG）和有损压缩（如 JPEG），并允许两者都具有透明度。现在对 WebP的支持相对较好，但还没有普及（特别是 Safari 和 IE 都不支持，但 Edge 支持）。

虽然 JPEG 格式本身不能处理透明度，但在现代浏览器中使用 JPEG 完全有可能实现透明度。然而，它很复杂。它涉及使用 SVG 创建处理透明度的剪贴蒙版。使用 Photoshop，您可以使用钢笔工具执行此操作，然后导出到 Illustrator，您可以在其中将钢笔工具路径转换为 ​​SVG。

这是有关如何执行此操作的更详细指南。

诀窍是做两件事：

• JPG
• 剪报

JPG很容易。直接从 Photoshop 输出。优化。

现在我们可以设置 SVG。SVG 很乐意采用光栅图形。SVG 以矢量图形而闻名，但它是一种非常灵活的图像格式。

<svg>
  <image xlink:href="/images/chris.jpg" x="0" y="0">
</svg>

为了获得路径，我们将使用钢笔工具创建的路径导出到 Illustrator。现在我们有了那里的路径，并且很容易导出为 SVG[.]

现在我们有了我们需要的路径数据[.] 让我们在我们开始的 SVG 中使用它。然后还将该剪辑路径应用于：

<svg viewBox="0 0 921.17 1409.71">
  <defs>
    <clipPath id="chris-clip">
      <path d="[path data from Illustrator]" />
    </clipPath>
  </defs>
      <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409">
</svg>

或者，这里有一个工具，可以将 PNG 转换为嵌入了 JPEG 的 SVG。与 WebP 相比的优势在于它可以在 Internet Explorer（从第 9 版起）和 Safari（从第 3 版起）中运行，包括在 iOS 上。

也就是说，通常的标准确实只是为 JPEG 背景着色以匹配网站的背景，或者使用优化的 8 位 PNG（使用像 PNGQuant 这样的工具来转换常规的 32 位 PNG）。

JPEG 2000（也称为 JP2）是原始 JPEG 格式（从 1992 年开始）的改进版本，它也完全支持透明度，但它的浏览器支持极差（只有 Safari 支持）。

我同意 Lucian，只使用 PNG，它得到了极好的支持，并且有很多工具（pngcrush、optipng、pngout...）来压缩文件。请参阅此处进行比较。

关于 tylisirn 所说的，我理解对文件大小的担忧，但请考虑一下：如今，网页臃肿是常态。然而，另一方面，快速的页面加载时间给用户留下了良好的印象，并对SEO 产生了积极的影响。