如何为移动Web优化您的图像

Shopify图像大小

90%的互联网用户也可以通过移动设备访问网络。这意味着确保你的网站和社交媒体图像针对手机用户进行优化是非常重要的。要正确优化您的图像,请遵循我们下面的快速步骤教程。

1.选择合适的图像尺寸

在足够大的图片和尺寸适中的图片之间取得平衡是至关重要的,前者用户可以放大,而后者不会占用太多空间,从而降低页面加载速度。

在Shopify上,你可以上传图片大小可达4472 x 4472 px,文件大小可达20 MB网站建设者通常建议使用2048 x 2048像素的方形产品照片。这些是高分辨率的图像,给你的商店一个专业和全面的外观与伟大的缩放功能。记住,缩放功能的工作,你的图像必须大于800 x 800像素。

同样的,亚马逊而且Etsy,有1000 x 1000像素的图像要求,以启用缩放。

为了在产品线和集合页面上保持统一的外观,您应该保持所有功能图像的宽高比相同。例如,你可以把它们都做成正方形,就像我们下面看到的那样。

来源:Beardbrand

您的特征图像是将出现在整个商店中的产品的第一个图像——您的主页、购物车页面、结帐页面和各种集合页面。所有的缩略图也要保持相同的大小和形状,以传达一个精心设计的商店外观。

记住,你的许多客户也会在手机上浏览,方形图像更容易在小屏幕上重新定位。不仅如此,正方形和垂直的图像占据了更多的手机屏幕,让他们可以看到更多你的照片。

2.选择最佳的图像格式

让我们来看看产品摄影中最广泛使用的文件格式,以及它们各自带来的好处。在这里根据它们在产品摄影中的使用频率列出。

图像格式

来源:Jaelynn卡斯蒂略

JPG

JPG是最常见的数字图像文件格式。它得到了广泛的支持,拥有一个小的文件大小和良好的颜色范围。它的压缩可以让你在文件大小和图像质量之间取得平衡。Shopify特别推荐使用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可以提供很高的质量,但生命尺寸通常相当沉重和不切实际。

来源:Jaelynn卡斯蒂略

3.记住文件大小

较大文件大小的图片会极大地影响网站的速度,特别是当访问者试图通过智能手机访问它时。如果你的网站速度太慢,这就增加了人们离开你的网站转到其他谷歌搜索选项的可能性。

这就是为什么你要压缩大的图像,这样它们的文件大小就不会那么大。特别是因为许多网站都有允许你上传的最大文件大小,例如Shopify,它的最大文件大小是20 MB。

有一些在线工具可以提供帮助,比如TinyPNGJPEG压缩.有了这些工具,您可以轻松地将较大的图像文件拖到上传区域,将它们压缩成较小的文件(同时仍然保持图像质量),然后重新下载新文件。

截图

在大多数情况下,您希望所有标题或背景图像的大小不超过1mb,产品照片的大小在300kb左右。

4.调整移动屏幕照片的大小

Shopify会自动调整图片的大小以适应更小的屏幕,但某些图片有时需要手动编辑。请记住,桌面和手机屏幕不仅大小不同,而且方向相反。

虽然Shopify试图用温和的裁剪来适应这种情况,但最好是你的图片是方形的,你的产品是垂直和水平居中的。

此外,分辨率过大的图像,比如Shopify的最大分辨率为4000 x 4000像素,在调整移动设备的分辨率时,可能会变得模糊。因此,将图像缩小到更易于管理的大小和形状,并考虑到移动设备,可以帮助你的商店在所有设备上看起来更好。

相机

请记住,大文件也会减慢网站的加载时间。在电子商务领域,尤其是移动领域,每一秒都很重要,所以优化你的形象应该是优先考虑的。

因此,虽然无损压缩可以给你最高质量的图像,但它经常创建大文件,上传需要很长时间(特别是批量),并会减慢页面加载时间,导致访问者放弃你的商店。在移动设备上尤其如此,因为移动设备的网速可能较慢,等待图片最终出现会让购物者感到沮丧。

虽然Shopify的响应式设计和算法擅长在不同设备上调整和显示图像的大小,但给他们提供体贴的文件大小可以意味着更流畅的购物体验。

关于作者

Holly Cardew是Pixc的创始人,Pixc是一个帮助电子商务商店编辑和优化他们的产品照片,从而提高销售额的平台。Pixc通过在24小时内编辑和删除背景,将普通的产品图片变成漂亮的图片。OB欧宝娱乐APPHolly十几岁就开始在eBay上销售,创建了自己的在线市场,拥有电子商务、在线营销、平面设计和组建分布式团队的背景。ob欧宝娱乐app下载地址她在Shopify商店的建设和运营方面也很有经验,并在社交媒体上拥有大量粉丝。2016年,Holly入选了福布斯30位30岁以下的零售和电子商务榜单。霍莉经常往返于旧金山、布里斯班和悉尼。当霍莉不工作的时候,她喜欢旅行,探索新的地方,美丽的设计,排版和提出新的经营理念

主题: