大图像尺寸会减慢商店的网站速度,从而对客户体验和转化率产生不好的影响。它还可能损害您在搜索引擎结果中的排名。最好的方式是优化网站照片,实现图片清晰度和文件大小的最佳平衡,以确保快速加载时间。
以下是衡量网站速度的工具以及有关优化商店图像的建议。
速度测试工具
像Google 的PageSpeed工具和Pingdom的网站速度测试工具会确定哪些图像的文件过大,从而导致页面加载时间变慢。要了解有关如何提高站点速度的更多信息,请参阅我们的站点速度指南。
优化图像属性
物理图像尺寸
确保图像的物理尺寸(高度和宽度)合适。一般情况下,您的产品照片的最佳尺寸是1280 x 1280 像素。您的主题文档可能会建议不同的推荐尺寸。如果您以 3:2 的纵横比拍摄 5 兆像素的照片,这意味着它的最长边大约为 2740 像素,这远高于 Web 内容的最佳分辨率。
专家提示!从相机下载照片时,应以易于搜索引擎查找的方式命名图像文件。例如,直接来自相机的图像可能具有文件名 DSC00101.JPG。将其更改为 red-longsleeve-kashmir-sweater.jpg 之类的内容。
您可以使用计算机上的图形软件或Pixlr等免费网络服务来修剪原始相机图像或产品照片。
图像文件大小
文件大小与尺寸一样重要。文件大小是指文件包含多少数据或将消耗多少存储空间。TinyPNG之类的网站可以压缩图像来提高页面加载速度。一些图形软件程序(如 Adobe Photoshop)还具有“保存为 Web”命令,它也有同样的功能。
未压缩的 JPG 文件大小:182 kb(千字节) | 压缩后的 JPG 文件大小:34 kb |
请注意,上面两张图片之间没有明显的质量差异,但右侧的压缩版本加载速度会快 5 倍。
格式
图像的格式是指信息如何编码以供计算机解读。图像可以以各种不同的格式编码。对于您的 BigCommerce 商店的大多数情况,为您的产品照片使用JPEG或JPG格式可以在美观和快速加载之间实现最佳平衡。PNG 文件通常用于 Web 图形,例如图标或图案。
内容分发网络
内容交付网络(CDN) 允许您通过在全球网络节点中缓存公共数据来更快地在全球范围内为您商店的 Web 文件提供服务。例如,如果在日本的个人访问您的网站,则该数据是从亚洲的本地服务器提供的,这比从北美传输数据要快。如果您有自定义设计的主题,您可以使用BigCommerce 内容交付网络更快地提供主题中的图像。
响应式图像
具有基于 Cornerstone 4.0 或更高版本的 Stencil 主题的 BigCommerce 商店使用srcset属性来处理响应式图像。这将自动优化每个在线图像,获得适合每个图像与设备的尺寸和质量的最佳组合。
这意味着当上传图像时,它具有一组定义的图像尺寸,查看者的浏览器将自动从中选择理想的尺寸和正在使用的设备上的分辨率。即使您从数码相机上传非常大的图像,它也会被重新格式化便于在线查看。
要通过 srcset 了解有关响应式图像的更多信息,请参阅我们的开发人员文档。