7分钟阅读时间 (1346字)

我的网站上应该使用哪种类型的图片？

四月

2024年4月20日星期六

940次点击

0条评论

本指南针对初学者，简单解释了不同图像文件格式以及如何在网站上正确使用它们。

无论网站的主题是什么，图像无处不在：从标志到产品或团队成员的照片，图像无处不在。我们习惯于在网站上添加图像，但我们做得对吗？这个问题可能对我们中的许多人来说很奇怪，但根据我在客户网站上的观察，这并不是一个愚蠢的问题。

在这篇文章中，我将解释如何在管理网站时优化图像的使用。因为本指南主要面向初学者，我会根据不同情况解释您应该在网站上使用哪种类型的图像文件。我将从最经典的（JPEG与PNG之争）到最新的（WebP和AVIF）进行说明。

让我们从JPEG图像（.jpg和.jpeg文件）开始，这是在网络上使用的最常见图像文件。它们是光栅图像，因此对放大的容忍度相当差，但对缩小的容忍度相当好。它们还可以被压缩以更快地加载给访客，这会牺牲它们的视觉质量。

✅	❌
JPEG图像适用于背景。它们的压缩使它们比PNG等价物更轻，对于背景图像来说，质量的降低是可以接受的。	JPEG不支持透明度。如果图像必须在前景显示，而背景必须显示在其后面，则不应使用JPEG格式。
照片报道？选择JPEG！它是数码相机的标准输出格式，因此您完全可以利用它。	JPEG图像的边缘不太清晰。对于标志、图形或图表，请选择另一种格式。
	JPEG图像中的文字不太易读。如果文字很重要（公司口号、餐厅菜单），您可能需要考虑选择另一种格式。

JPEG 格式的对应格式是 PNG 格式（.png 文件）。这种格式是矢量图，并配备了 无损压缩，支持 透明度，具有更清晰的渲染效果，但文件较大。

✅	❌
PNG 图片在前景中占有一席之地。它们的清晰度和细节使其非常吸引人，透明背景使它们能够整洁地集成在页面背景之上。	不要使用 PNG 格式处理大文件。数兆像素的图片在 PNG 格式下会变得非常庞大。
简单的 PNG 图片也可以用作背景。简单意味着细节较少，即不是照片。不过要小心文件大小。
PNG 图片在文字和轮廓的渲染上非常清晰。它非常适合文字为主的图像（如带口号的标志、餐厅菜单），或当存在几何形状如图表、图表等时。

动画 GIF，适合低分辨率动画

GIF 动画（.gif 文件）由一系列限制在 256 种颜色 内的矢量图快速连续组成。当闪亮的横幅广告和闪烁的号召性用语流行时（有点过头了）。如今，我们在网站上看到越来越少，而在即时通讯应用中看到越来越多。

✅	❌
GIF 图片允许您显示小型的等待动画（预加载器）。这里有一些可供选择。	无法控制 GIF 动画。无法启动、停止和倒放 GIF 动画。它以循环播放，仅此而已。
GIF 动画允许您用较少的颜色数量来动画化图像。例如，贺卡或解释图。
GIF 动画允许您显示几秒钟的电影片段。这在博客、社交媒体等地方很常见。

让我们离开位图格式，转向矢量 SVG 格式（.svg 文件），它是矢量图。因此，它很容易支持 尺寸变化，无论是放大还是缩小。SVG 图像总是 完美清晰，而其他格式只有在正确尺寸下才会清晰。

Joomla 标志的 SVG 格式

✅	❌
SVG 格式非常适合插图和标志。如果图像中有文字，别忘了将其矢量化。	SVG 格式与照片不兼容。抱歉，现实世界不是矢量图！
SVG 图像始终清晰。只需一个文件，你就可以在网站上查看任何大小的图像。	请注意浏览器中的渲染！例如，旧的 Internet Explorer 被知不支持 SVG 图像中的渐变。
高级用户：SVG 图像支持一些 CSS 动画。

随着网页优化的日益重要，新的图像格式如 WebP 应运而生。这种格式压缩率更高，渲染效果相当，由最现代的浏览器支持。这种格式可以缩短页面加载时间，从而避免在用户刚到达网站时就失去他们。其使用也推荐在 SEO 的背景下。

WebP格式现在在计算机和移动设备上得到广泛支持（来源：caniuse.com）。

✅	❌
WebP图像必须与JPEG和PNG图像一起使用。它们得到广泛支持，忽略它们将是遗憾的。	当公司推荐的浏览器不支持时，在内部网络上使用WebP格式是没有意义的。

现代图像格式不会直接在网页中使用，它们保留对经典图像（JPEG、PNG等）的引用。现代格式文件存储在经典图像版本相同的文件夹中。当浏览器请求经典图像时，网络服务器将设置为自动为兼容浏览器提供服务。

这篇文章如果不提一下图标字体（.woff和.woff2文件）将是不完整的。它们允许您像使用普通字符一样使用图标（字体大小、颜色等）。最著名的是Font Awesome库，其中包含许多图标，或者IcoMoon服务，允许您创建自己的字体。

图标的行为像文本

✅	❌
图标字体适用于单色图标，在许多地方使用，如社交网络、分享按钮、菜单按钮、搜索、项目符号、分页等。	没有多色图标。每个显示的图标都只有一个颜色。
图标字体始终清晰。每个字符基于矢量图像。