产品图片的分辨率优化

首先，让我们快速了解一下分辨率。对于基本定义，它是图像由像素数组成的。它通常以垂直和水平数字表示：图像的宽度和高度（以像素为单位），例如1920×1080。

图像的像素越多，为观看者呈现的细节就越好。下面的示例说明了这种情况。

 高分辨率  

                     低分辨率

在分辨率优化方面，并没有一个特别简单的解决方案。在选择产品图片的佳分辨率前，需要考虑以下因素：

1. 网站布局。
2. 显示屏。
3. 文件大小。

网站布局和最佳分辨率

虽然说，“更多的像素意味着更多的细节”，但并不推荐盲目的追求最高的分辨率。网站的承载能力是必须要考虑的因素，适合的才是最好的。图像应该要能够和系统协同工作，保证网站的顺畅。

选择拍摄图片前，要先了解好关于网站的以下问题：

• 网站是否显示微缩模型？
• 微缩模型需要什么分辨率才能看起来清晰？
• 网站引擎为台式机、移动设备和平板电脑的所有类别的图像建议哪种分辨率？
• 您的网站是否有特写演示系统？

在规划线上店铺时，密切与网络人员沟通，对这些内容的充分了解，将节省您在产品图像创建和后期处理方面的时间。而且，最重要的是，这将是让您的图片顺畅显示的第一步。

仔细聆听网页设计师的意见，并选择他们为微缩模型，特写镜头，主要列表图像等提出的分辨率。

显示屏和最佳分辨率

可用数字设备的多样性是商品图片设置分辨率时重要的参考因素。客户在看产品图片时可以使用不同尺寸的智能手机或平板电脑等不同标准的桌面屏幕。那么该如何匹配到他们所有人？

这个大问题没有一个确切的解决答案。客户设备屏幕分辨率可能达数十种，并不可能全部满足。您可以使用大多数基本的网站流量管理工具来衡量客户的分辨率，并从统计数据中得到最普遍适用的分辨率，满足大多数人的需求即可。

为了理解不同分辨率屏幕的概念，让我们来看看一个屏幕在更改其分辨率时的区别。

     

不同的分辨率，屏幕的显示也不同。在笔记本电脑或台式机屏幕中，分辨率的较长边是水平的。在手机屏幕中，垂直面会更长。这种简单的差异已经对您的电子商店中的图像产生了要求 - 例如，您应该在垂直还是水平上塞入更多内容？

值得注意的是，对于现代智能手机和笔记本电脑中常见的HiDPI（每英寸高点数）或Retina屏幕，有必要区分应用程序（包括Web浏览器）使用的所谓CSS像素和设备制造商确定的物理像素。在这种情况下，对于 1 CSS 像素，可以计算更多的物理像素。定义它的参数是 DPR – 设备像素比。

高点每英寸屏幕允许网页设计师根据屏幕支持的内容以各种分辨率显示图像。通常，将准备同一图像的不同版本，每个版本具有不同的分辨率。它们将使用<img scrset>属性放置在网站上，浏览器将读取该属性以最方便地显示图像。

4K等分辨率的屏幕越来越受欢迎，但是无论是笔记本电脑还是智能手机，它仍然是最常用的全高清分辨率。我们的照片以100%放大倍率观看，在垂直和水平屏幕中的行为会有所不同：

在更大的分辨率下

水平和适合屏幕  垂直且不适合屏幕

             

这不是客户使用的唯一分辨率，您应该考虑调整分辨率“使其适合更多屏幕”。

这意味着为不同的屏幕分辨率引入各种图像分辨率，并加载它们。可以在大多数网站管理系统中实施的解决方案。

请注意为产品的微型图像准备单独的文件，因为它们的加载速度比Web浏览器缩小的大图像更快。它只是需要更少的处理和下载时间，当许多产品微缩模型加载到网格或一行的一个屏幕上时，这一点变得越来越重要。

输出文件大小和最佳分辨率

极低的分辨率代表文件大小极小，高分辨率正好相反。优化器必须找到一种中间方法来保持合理的文件大小，同时不会随着分辨率的下降而失去细节级别。请参阅下面的文件大小示例。

可以通过一些参数来确定最佳文件大小，例如需要在一个网站上同时加载的图像数量。想象一下，一个由数百种产品组成的产品网格，其中图像以全分辨率加载，然后由浏览器最小化。这将对最终用户的互联网连接造成严重负担，并使在低速网络上几乎不可能进行浏览。