互联网现在遍布全球，人们使用许多不同的设备接入互联网。在过去，台式电脑是人们使用互联网的主要方式——但现在呢?近60%到2022年，全球网络流量的一半将通过移动设备访问。
这意味着您需要为移动购物者正确优化图像。如果不这样做，他们看到的图像可能比理想的要小——迫使他们滚动和缩放——或者更糟，根本没有图像。
好消息是，确保您的图像与多个设备兼容并不需要太多的工作。主要方法包括使用正确的图像大小(像素和内存大小)，以及使用在线图像优化工具。
遵循下面的快速步骤教程优化您的图像适用于移动和桌面设备。
最佳图片大小的网站
像素宽度:在大多数情况下，2500像素对于在浏览器中拉伸全屏是完美的。如果需要填充浏览器宽度，任何小于该宽度的图像都可能被截断或显得模糊。
图片大小:图像的最佳整体(像素)大小取决于您的用例，例如，背景图像需要比博客文章图像大。
文件大小:任何大于20mb的大小都会极大地影响你的网站速度。在大多数情况下，较小的图像(大小不超过2兆字节)效果更好。
图像属性:图像属性(alt文本或alt标签)是基于文本的，不会真正影响网站的性能。然而，它们是通过屏幕阅读软件为视力受损的人使用的，所以要保持属性文本的简短和简洁。
为什么图片大小对网站很重要?
对于网站来说，图片大小很重要，主要有三个原因:用户体验、页面速度和排名。图像大小的错误选择通常会同时影响这三个指标。
这意味着在你的网页上为每个用例使用最佳的图像大小可以帮助同时改善它们。
创造更好的用户体验
为每个用例提供正确的图像大小有助于改善用户体验，因为它更容易让眼睛看到，而不需要放大细节或滚动查看整个图像。
这里有一个例子，当你使用的背景图像太小而无法在整个页面上缩放时(这会导致使用“重复”图像来适应屏幕)会发生什么:
如果这个网站的所有者选择尝试将小图像适配到屏幕上，那么它就会太模糊而无法看到。重复的图片也没有吸引力，造成糟糕的用户体验。
提高网页速度
当你的网站上有大尺寸的图片时，当用户到达它时，服务器需要更长的时间来加载页面。在图像搜索引擎优化术语中，这被称为“内容丰富的油漆”。较小的图像大小(主要是图像文件大小)往往跨设备加载更快。
这里有一个糟糕的页面加载速度的例子。
从这里可以看到，服务器加载第一个图像的加载速度为2.1秒，加载最大的图像的加载速度为4.1秒。当一半的顾客如果页面加载时间超过6秒，放弃购物车，提高页面速度以避免高跳出率是很重要的。
提高网站排名
网站排名可以指你的网站的整体排名(例如，域名评级)，或者当用户搜索特定术语时，你的网页离搜索结果的第一页(或第一页顶部)有多近。
谷歌在其算法中使用了大量的指标来决定什么会出现在搜索结果的首页，而图片的质量(以及它们产生的用户体验)是搜索结果的一部分目前的算法。
网站图片大小指引
在本节中，我们将查看特定类型的web图像的大小要求，因为它们并不完全相同。你会在网站上看到五种主要类型的图像:背景图像、英雄图像、横幅、博客图像和徽标。
背景图像
背景图片是你会看到的最大的图片类型——顾名思义，它是你主页的背景(尽管你也可以在主要的“支柱”页面上找到它们)。
最大图像宽度:2500像素
最大图像高度:1406像素
纵横比:16:9
文件大小:最大20 MB
下面是电子商务网站背景图片的一个很好的例子:欧宝体育百家乐
自行车零售商牛仔让它的英雄产品以这种形象占据中心舞台。它占据了整个屏幕，无论在什么设备上观看，它都可以伸展开来。
英雄的形象
你可能弄错了英雄的形象对于背景图像来说，但关键的区别是它们通常在高度上更小-大约是大小的一半。这种图像类型是一个很好的选择，如果你需要在屏幕上有更多的文字，而不需要用户滚动看到它。
最大图像宽度:在1280到2500像素之间
最大图像高度:在720到900像素之间
纵横比:16:9
文件大小:最大10 MB，但理想情况下，更小(不牺牲质量)
下面是一个英雄形象的例子:
如你所见，黑色和粗体选择尽可能宽，使用较短的固定比例图像高度。
网站横幅
横幅图像比其他类型的图像更棘手，因为它们可以是不同的大小和形状，这取决于你需要向访问者展示什么。然而，最典型的网站横幅类型是广告。
由于谷歌广告是这个领域最受欢迎的服务之一，所以谷歌有一些推荐有关最佳横幅尺寸:
如您所见，有很多选择。然而，如果你想做一个横幅不在广告中，矩形选项(例如300 × 200像素或970 × 90像素)通常更好。保持较小的文件大小有助于提高网页速度，所以最大5兆字节将是理想的。
博客图片
博客图片的类型和大小也各不相同。然而，值得注意的是，如果我们谈论的是主“标题”图像(显示在顶部，“在折叠上方”)，它们在整个博客中的大小应该是统一的。
最大图像宽度:2240像素
最大图像高度:1260像素
纵横比:16:9
文件大小:最大3 MB，但理想情况下更小(不牺牲质量)
你可以看看这个页面顶部的一个博客图片的例子，但这里有另一个:
这篇文章来自Kulala虽然该图像的固有尺寸为1200 × 620像素，但渲染尺寸要小得多(894 × 462像素)，使文件大小仅为95.1千字节。
标志
你的徽标可能是你网站上最小的图像之一(除非你算上标签栏中的图标)。根据标志的类型，你应该选择两种路线中的一种:矩形或方形。
大多数徽标都适合正方形1:1的比例，你可以在上面Kulala示例的左下角看到。但一个更矩形的标志可以使用2:3的图像比例几乎方形，甚至是4:1的比例。
最大图像宽度:250像素
最大图像高度:250像素
纵横比:1:1 2:3, 4:1
文件大小:最大1 MB，但理想情况下，更小(不牺牲质量)
Shopify自己的网站标志使用了更长4:1的比例:
这种图像尺寸适合较长的品牌名称或标识只有文字而不是图形的徽标。
手机尺寸图片推荐
1.选择正确的图像尺寸
在大图像和最佳大小之间取得平衡是至关重要的，这样用户就可以放大图像，而最佳大小的图像则不会占用太多空间并减慢页面加载时间。
在Shopify上，你可以上传图片最大4472 * 4472像素，文件大小可达20兆字节。但是,网站建设者通常建议使用2048 * 2048像素的方形产品照片。
这些高分辨率的图像使您的商店具有专业和全面的外观，具有强大的变焦功能。请记住，要使变焦功能发挥作用，您的图像必须大于800 × 800像素。
保持所有特征图像的宽度和高度长宽比，以保持产品线和收藏页面的统一外观。例如，你可以把它们都变成方形。
您的特征图像是产品的第一个图像，它将出现在您的商店的主页、购物车页面、结帐页面和各种收藏页面上。所有的缩略图也要保持相同的大小和形状，以传达一个精致的商店外观。
请记住，你的许多客户也会在手机上浏览，方形图像更容易在小屏幕上重新定位。此外，方形和垂直图像占据了更多的手机屏幕，让客户看到更多的照片。
2.记住文件大小
较大文件大小的图像会极大地影响网站的速度，尤其是当访问者试图通过智能手机访问它时。如果你的网站太慢，这增加了人们离开你的网站的机会，转而在他们的谷歌搜索中选择另一个选项。
这就是为什么你想压缩大的图像，这样他们的文件大小就不会那么大，特别是因为许多网站都有一个最大的文件大小，他们允许你上传。例如，Shopify的最大文件大小为20兆字节。
有一些在线工具可以提供帮助，比如TinyPNG或JPEG压缩。使用这些工具，您可以轻松地将大图像文件拖到上传区域，压缩它们，使它们更小(同时仍保持图像质量)，然后重新下载新文件。
在大多数情况下，你会希望你所有的标题或背景图像不超过1兆字节产品图片大约300千字节。
3.调整照片的移动屏幕
Shopify会自动调整图像大小以适应较小的屏幕，但某些图像有时需要手动编辑。请记住，桌面和手机屏幕不仅大小不同，而且方向也相反。
虽然Shopify试图通过温和的裁剪来适应这一点，但如果你的图像是正方形的，你的产品是垂直和水平居中的，那将是最好的。
此外，分辨率过大的图像，比如那些保存在Shopify最大4000 × 4000像素的图像，在调整大小用于移动设备时可能会变得模糊。因此，将你的图像缩小到更易于管理的大小和形状，让手机铭记在心，可以帮助你的商店在所有设备上看起来更好。
记住，大文件也会减慢网站的加载时间。在电子商务中，尤其是在移动端，每一秒都很重要，所以优化你的图像应该是优先考虑的。
虽然无损压缩可以为您提供最高质量的图像，但它通常会创建大文件，需要很长时间才能上传(特别是批量上传)，并且会减慢页面加载时间，导致访问者放弃您的商店。这在移动设备上尤其如此，因为移动设备的网速可能较慢，等待图片最终出现会让购物者感到沮丧。
虽然Shopify的响应式设计和算法擅长调整大小，并在不同设备上显示你的图像，但在文件大小方面给予他们体贴的帮助，可能意味着更顺畅的购物体验。
最佳图像格式的网络
让我们来看看产品摄影中最广泛使用的文件格式，以及每种格式带来的好处。这里列出的是它们在产品摄影中的使用频率。
JPG
JPG是最常用的数字图像文件格式。它被广泛支持，拥有一个小的文件大小和良好的颜色范围。它的压缩允许你平衡文件大小和图像质量。
PNG
PNG是为了改进GIF格式而创建的，它消除了256色的限制。它被广泛接受，无损(减少文件大小而不降低质量)，并支持透明度(例如，透明背景)。缺点是PNG文件大小可能很大，因为它是无损压缩的，而且格式不像JPG那样普遍兼容。
HEIC
HEIC文件是一种节省空间的文件格式，它占用的空间大约是使用高级压缩技术的同等JPEG文件的一半。它最常用于iOS设备上的照片存储，因为它是苹果的标准文件格式。
WebP
WebP是一种现代图像格式，它为网络上的图像提供了优越的压缩，与PNG和JPEG等传统文件格式相比，平均节省了30%以上的文件大小。
GIF
GIF通过压缩和减少图像到256色来提供小文件大小。尽管它已被PNG广泛取代，但它仍然用于动画，因为它是唯一既支持它又被浏览器普遍认可的格式。
TIFF
TIFF是一种无损压缩格式，广泛支持各种编辑和web应用程序。它提供了高质量的图像分辨率，多个图像和页面可以方便地保存在一个文件中。但是，文件大小往往较大。
回顾:
- JPG是最方便的结合较小的尺寸和体面的质量。
- PNG提供了更高质量的无损压缩，但这样做的代价是更大的文件大小。
- 如果你想提供360度的照片，并且想要轻量级的文件，GIF是很有用的。
- 相比之下，TIFF可以提供很好的质量，但文件大小通常相当大且不切实际。
如何在你的网站上找到图像大小
在任何给定网页上查找图像大小的最快方法(无需下载图像并查看其规格)是使用浏览器开发/检查工具。
无论你使用的是Mac、Windows还是Linux操作系统，这种方法都有效，因为它依赖于浏览器——这也有一个警告。它可以使用Safari、基于chrome的浏览器和Firefox。
所有你需要做的是去网页和悬停在你想要的信息的图像，然后用鼠标右键单击或使用Control/CTRL + click调出选项。
从那里，寻找Inspect选项:
点击Inspect将显示有关网页的所有代码信息(它可能看起来很吓人，但不用担心)。
在检查面板中，关于你点击的图片的信息应该被高亮显示，你会注意到，当鼠标悬停在高亮显示的文本上时，图片会得到一个蓝色的覆盖，以显示你正在查看的代码的哪一部分:
在这种情况下，您可以看到浏览器(Brave)在图像上方告诉您图像使用了多少像素。但如果你调整网页的大小，这个数字就会改变。然而，如果你把鼠标悬停在图像存储链接上，它会弹出图像的固定属性:
就是这样。您不需要下载图像或特定的工具-它就在浏览器中。要退出检查器面板，只需点击右上角或左上角的红色X。
图像优化工具
最好的方法是使用优化工具来帮助调整图像的大小。这里有两个很好的工具可以帮助你在Shopify管理中做到这一点。
图像优化由松鼠
的图像优化工具由松鼠是速度测试，并确保您的图像是seo准备，并自动优化您的网站上的所有图像-包括您以后添加的新图像。
此外，您还可以自定义和应用水印来保护您的产品摄影不需要知道任何代码。
loytyharbour图像优化器
loytyharbour图像优化器插件的工作原理类似于Squirai的工具，在你的网站上为你压缩你的图像。
然而，它没有相同的水印功能。相反，深度仪表板允许您自动设置图像的alt- text，并将其转换为最佳的图像文件类型，以获得更好的页面速度。
或者，如果你有能力，你也可以使用Photoshop来帮助减小文件大小，但这可能是一个比上述工具更复杂的过程。
为你的品牌使用最好的网站图片
在你的网站上有不同屏幕尺寸的图片对于让页面看起来有趣和在搜索引擎结果页面上排名是必不可少的。但是图片的大小很重要——太大可能会导致网站加载速度太慢;太小的话，你就有可能带来糟糕的用户体验。
但是，根据您想要的图像类型，对于图像大小有不同的建议。你可以把这篇指南收藏起来，以便在需要上传图片的时候参考，而不是试图记住所有的图片。
但是如果你同时使用Shopify和其中一个推荐的优化工具，你不需要担心文件大小会给你一个缓慢的网站。