图像分辨率

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

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

适当的大小

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

图像太小

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