图像分辨率

图像分辨率是指基于像素的图像的宽度和高度。高图像分辨率意味着图像将呈现高质量或清晰。低图像分辨率意味着图像将出现低质量或颗粒状。

大多数由相机捕捉或由平面设计师创建的图像都以高分辨率保存，如下图所示。

适当的大小

如果您想让图像覆盖显示器的全部宽度，首先要确保图像的大小合适。

图像太小

一张分辨率为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这样的图像编辑器来调整图像格式的质量。图像编辑器可以压缩图像，减少文件大小。