动画图片、透明度和背景

网站会使用各种图像类型 – 包括光栅和矢量格式。这为开发人员提供了许多选择,但同时也带来了哪种格式最适合哪种用例的问题。

我们来看看常见的图像用例,并针对每种图像用例提出一些建议和考虑因素。

动画

动画图形是具有多个框架的图片,用于描绘某种形式的运动。

多种格式支持动画(GIF、PNG 和 WebP),但由于其全面的浏览器支持,大多数网站使用 GIF(注意 – 它限制为 256 色,1 位透明度)。

透明图像

当您不确定图像显示的背景颜色时,透明图像就很有用。使用二进制透明度,索引调色板中的一种颜色被标记为透明颜色。更高级的技术是 Alpha 透明度 – 透明度信息存储在单独的通道即 Alpha 通道中。

可以通过 GIF 及其二进制透明度来满足简单的透明度要求。PNG、WebP、JPEG 2000 和 JPEG XR 通过使用 Alpha 通道提供增强功能。

背景渐变

就像您可以在 CSS 中将元素的背景定义为纯色一样,您也可以将该背景定义为渐变。渐变通常是一种颜色逐步过渡到另一种颜色,但在 CSS 中,您可以根据需要控制颜色渐变的各个方面,从方向到颜色到这些颜色发生变化的位置。

使用在 CSS 中定义的渐变,而不是使用实际的图像文件,这对于控制和性能都更有利。

徽标

徽标是纯图形(符号/图标),或由组织名称(标识或文字商标)组成。

矢量格式(例如 SVG)将为徽标提供最佳质量(平滑边缘、无损质量地调整大小、较小的文件大小),但您也可以使用高分辨率的光栅图像格式(通常为 PNG)。

剪贴画

图片或图像的剪贴画集合可以导入到文档或另一个程序中。图像可以是光栅图形或矢量图形。

GIF 非常适合纯色图像(如在漫画或剪贴画中)。GIF 图像也可以放置在具有清晰背景的网页上,这样您就可以对其进行分层。

夹层图像

夹层图像通常具有 300 dpi(每英寸点数)的最小分辨率,并且通常与照片相关。

高分辨率 JPEG 在基于 Web 的夹层图像(原图)中非常流行,因为它仍然通过有损压缩来平衡质量和尺寸。如果您想要通过无损压缩获得顶级质量,请考虑使用 PNG。为了在多种介质(例如 Web 和打印)上实现图像的最佳利用,TIFF(标签图像文件格式)是您的最佳原图格式选择。请记住,您需要将 TIFF 转换为 Web 友好格式。

响应式图像

响应式图像是适应不同的环境条件并对其进行响应的图像:适应可以包括但不限于改变尺寸、裁剪或甚至对原图的处理。使用响应式图像可以通过将较小的文件发送到具有较慢连接的移动用户来改善 Web 性能

在设计跨浏览器兼容性时,JPEG 非常适合。当在兼容的浏览器上显示图像时,WebP(Chrome 和 Opera)、JPEG 2000 (Safari) 和 JPEG XR(Internet Explorer 和 Edge)是最佳选择。

图像精灵

图像精灵可将许多小图像或图标组合成更大的图像(称为精灵表单或瓦片集),已成为 Web 设计中提高性能的一种方式。

图像精灵也用于图标(最适合使用 GIF/PNG 格式),但我们偶尔也会看到 JPEG 格式。

级联样式表 (CSS) 通常用于帮助显示图像,但是图像精灵本身通常采用 PNG 或 JPEG 格式。

图标

图标可以用作网站上的按钮或视觉指示器。与图像精灵(上面所述)类似,通常情况下图标集会组合在一起。根据使用情况,这种类型的图像有很多选择,但 SVG 提供最佳性能,如果在加载页面时得到妥善的管理,也可以使用图标字体。除这种普通格式之外,也可以使用诸如 GIF 和 PNG 等格式。如果加载图标集(用于字体或图像精灵),请确保评估不使用的图标的加载成本。

圆角或布局组件

遗憾的是,使用图像来帮助修复屏幕上的样式、高度或宽度,或使用圆角等效果,仍然在许多网站上很常见。总之,不要使用这种图像,而要使用 CSS。

所有浏览器都支持圆角,并允许一些更高级的设置,如下所示。

总结

为您的用例选择最佳格式对于最大化图像的影响至关重要。请记住,每种格式都有其优点和缺点 – 您的最终决定可能需要平衡这些方面。

详细了解使用 Akamai Image Manager 管理多个在线图像用例。