图像质量表示基于像素的图像的尺寸。高图像质量意味着图像看起来会清晰锐利。相反,低图像质量意味着图像看起来会很差或粗糙。
大多数由相机拍摄或视觉艺术家制作的图像都以高质量保存,就像下面展示的图像一样。
适当的尺寸
如果您希望图像填满整个屏幕的宽度,首先要确保图像的尺寸准确。
图像尺寸不够
质量为 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 等图片编辑器来修改图片格式的质量。图片编辑器可以压缩图片并减小文件大小。
- 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
- 定心盒摘要 - 2024 年 4 月 15 日
- 存储网站以供将来参考 - 2024 年 4 月 15 日