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