图像质量

图像质量表示基于像素的图像的尺寸。高图像质量意味着图像看起来会清晰锐利。相反，低图像质量意味着图像看起来会很差或粗糙。

大多数由相机拍摄或视觉艺术家制作的图像都以高质量保存，就像下面展示的图像一样。

适当的尺寸

如果您希望图像填满整个屏幕的宽度，首先要确保图像的尺寸准确。

图像尺寸不够

质量为 200 x 150 的图片可以放在宽度为 100 像素、高度为 75 像素的空间内。但是，如果将其拉伸到宽度为 800 像素、高度为 600 像素的屏幕，则会显得模糊和像素化。在这种情况下，质量不够好。

图片尺寸过大

质量为 57600 x 38400 的图片在缩小到 800 x 600 屏幕时看起来还可以。相反，质量低得多的图片（例如 1000 x 800）是合适的，并且没有过多的数据。质量过大的图片效率低下，需要更长的上传和/或下载时间。这也会减慢您的网页速度。

图片质量指南

在将图片添加到您的网站之前，请确保：

• 选择正确的图片格式
• 增强你的图片

最适合上传的图片文件类型是PNG、JPEG、SVG和WebP。 了解有关网络上最常用的图片文件类型的更多信息.

在 Webflow 中使用图片

您可以使用两种方法将图片合并到您的 Webflow 网站中： 

• 作为嵌入图像
• 作为背景图片

嵌入图像

当您的网站包含嵌入图像时，Webflow 将自动增强并创建不同质量的该图像的各种版本。

当用户打开包含嵌入图像的页面时，浏览器将根据该用户的屏幕质量提供最佳图像。 探索更多响应式图像. 

背景图片

在部件或容器等元素上设置背景图像时，将应用原始图像。Webflow 不会为背景图像创建响应式版本。这意味着您应该上传具有适当质量的增强图像。

增强图片的最佳方法是规划常见、实用的显示，并考虑您网站的受众。

例如，15 英寸 MacBook Pro 的分辨率为 2880 x 1800。宽度为 3000 像素的图像非常适合此显示屏。在更大的显示屏上，图像可以放大，并且看起来仍然令人印象深刻。

然而，移动设备上的网站用户会下载用于较大断点的相同大型背景图像，这并不理想。您可以上传背景图像的变体，并为每个断点引入新的背景图像版本。这可以优化您的背景图像，以适应更宽或更窄的断点。

修改图片压缩

您可以使用 Photoshop 等图片编辑器来修改图片格式的质量。图片编辑器可以压缩图片并减小文件大小。