如何为电子商务优化图像？
产品摄影是电子商务中的一环，更多的像素或更高的分辨率代表着占比更大的文件和在线加载缓慢的挑战。试想一下，当你试图在山上度假的移动设备上在线购物时，3G网络根本无法加载出来，或者，需要使用更大的屏幕才能正常观看整幅图片。 我们将为您提供有关如何优化产品图像以在线展示的指南，以便使你的客户可以体验到流畅的画面，保证卡顿、模糊的画面不会发生在您客户身上。您将学习如何消除繁琐的页面加载时间和产品照片与设备不适配的情况。 我们从简单的问题“为什么要优化？”开始，然后引导您完成分辨率优化和文件大小管理的内容。最后，您将有机会了解图像SEO优化的基本原则。
为什么要优化产品图片以及如何开始？ 时间和金钱是线上业务始终追求的资产，学会有效地管理它们是成功的一部分，而这些离不开简化产品摄影流程。您需要制作用于销售的图像，并且保证这些图像是能够为商店引流而非成为产品点击量增加的阻碍的。 这些产品图像需要在可见性、下载大小和搜索引擎定位方面进行优化。如果您的目标是降低成本并保证用户的体验，那么就必须解决这些参数。 考虑图像优化后，您将获得更快，更精简的网站，这将有助于节省服务器费用。您还将得到更好的搜索引擎位置推荐，这将为您的网站带来流量并增加转化率。 优化的最简单方法是考虑使用较小的分辨率，引入图像压缩并正确标记图像。这将涉及选择图像格式，一些分辨率的后期处理和一定数量的网站管理。 我们将指导您完成所有这些操作。 产品图片的分辨率优化 首先，让我们快速了解一下分辨率。对于基本定义，它是图像由像素数组成的。它通常以垂直和水平数字表示：图像的宽度和高度（以像素为单位），例如1920×1080。 图像的像素越多，为观看者呈现的细节就越好。下面的示例说明了这种情况。
高分辨率
低分辨率 在分辨率优化方面，并没有一个简单的解决方案。要为您的产品图片选择最佳分辨率，您需要考虑以下特征： 网站布局、显示屏、文件大小。 网站布局和最佳分辨率 并不建议以尽可能高的分辨率做为目标，即使是“更多的像素意味着更好的细节”。对于在线商店，高分辨率也可能导致需要更多的加载时间和“错误显示”。 网站要求是您需要使图像和系统顺利协同工作的第一个原因。您的网站站长将帮助回答的问题包括： 网站是否显示微缩模型？ 微缩模型需要什么分辨率才能看起来清晰？ 对于台式机、移动设备和平板电脑的所有类别的图像，网站引擎建议采用何种分辨率？ 网站是否有特写演示系统？
了解这些答案将帮您解决第一个方案的选择。规划在线商店时，请与您的网络人员密切合作。他们提供的知识将使您在产品图像创建和后期处理方面腾出时间。而且，最重要的是，这将是向您的客户顺利显示图像迈出的第一步。 仔细倾听web设计师的意见，选择他们为微缩、特写、主要列表图像等提出的解决方案。事先了解他们，然后为企业中的照片生成制定最佳标准，会更加有效。 显示屏和最佳分辨率 可用数字设备的多样性将在为商品图片设置分辨率指南方面发挥重要作用。客户可以使用不同尺寸的智能手机或平板电脑、多标准桌面屏幕等查看产品，如何做到图片能适应所有设备呢？ 这个问题没有一个准确答案。这是因为您的用户可能会选择数十种可能的分辨率。其中一些会更常见，有些会更少。您可以使用大多数基本的网站流量管理工具来衡量客户查看的分辨率，并从统计数据中得出结论。与网站管理员和平面设计师一起，您需要做出适合大多数人而不是所有人的图像。
为了理解不同分辨率屏幕的现象，让我们来看看一个屏幕在更改其分辨率时的表现。
根据分辨率，屏幕能够显示更少或更多。在笔记本电脑或台式机屏幕中，分辨率的较长边将是水平的。在手机屏幕中，垂直面会更长。这种简单的差异已经对您的电子商店中的图像产生了要求 - 例如，您应该在垂直还是水平上塞入更多内容？
值得注意的是，对于现代智能手机和笔记本电脑中常见的HiDPI（每英寸高点）或Retina屏幕，有必要区分应用程序（包括web浏览器）使用的所谓CSS像素和设备制造商确定的物理像素。在这种情况下，对于1个CSS像素，可以计算更多的物理像素。定义它的参数是DPR–设备像素比。 高点每英寸屏幕允许网页设计师根据屏幕所支持的内容以各种分辨率呈现图像。通常，相同的图像会有不同的版本，每个版本的分辨率都不同。它们将使用<img-scrset>属性放置在网站上，浏览器将读取该属性以最方便地显示图像。从专门提供屏幕分辨率的网站了解更多有关该主题的信息。 4K等分辨率的屏幕越来越受欢迎，但是无论是笔记本电脑还是智能手机，它仍然是最常用的全高清分辨率。我们的照片以100%放大倍率观看，在垂直和水平屏幕中的显示会有所不同：
在更大的分辨率下
水平、适合屏幕
垂直且不适合屏幕 请注意，在智能手机上，1920像素的全高清将是屏幕的较长（垂直）一侧。因此，我们的照片显示才会小于屏幕表面。 以上示例说明了全高清分辨率的案例研究。这不是客户使用的唯一分辨率，您应该考虑调整分辨率使其适合更多屏幕。 这意味着为不同的屏幕分辨率引入不同的图像分辨率，并相应地加载它们。是可以在大多数网站管理系统中实现的解决方案。 注意为产品的缩微图像准备单独的文件，因为它们的加载速度将快于通过web浏览器缩小的大型图像。它只需要较少的处理和下载时间，当许多产品微缩模型加载到网格或一行的一个屏幕上时，这一点就变得非常重要。 更重要的是，微型的实际大小和HTML标签中显示的大小会影响Google在定位网站时考虑的参数。提高网站性能和SEO的规则是指在不需要进行浏览器的操作时，服务器上准确显示文件的分辨率。 输出文件大小和最佳分辨率 极低的分辨率意味着文件大小非常小。对于非常高的分辨率，情况正好相反。优化器必须找到一个中间值来保证分辨率合适的情况下，文件大小也保持在合理的范围内。请参阅下面的文件大小示例。
确定最佳文件大小可以通过参数进行指导，例如需要在一个网站上同时加载的图像数量。想象一下，一个由数百种产品组成的产品网格，其中图像以全分辨率加载，然后由浏览器最小化。这将对最终用户的互联网连接造成严重负担，并使其在低速网络上几乎不可能进行浏览。 网站形象优化的8条规则 知道划分图像优化知识的难度以及它呈现了多少种方法，我们决定为您准备一份候选建议清单。请继续阅读。 1）为您的图像选择正确的格式。对于具有简单几何形状和简单色调范围的图像，建议将光栅图替换为矢量图。您可以通过这种方式实现最佳的质量：以这种方式实现大小比例，并获得极好的可扩展性。矢量图形（例如.SVG格式）无论在高分辨率还是在低分辨率下的显示度都同样好。建议将它们用于徽标，图标，插图。 光栅图形（文件类型如PNG，JPG）适用于复杂的视觉效果和摄影。他们的Web优化可以通过WebP格式实现 - 参见第6点。
2） 创建文件时使用正确的压缩级别。 图片编辑软件在保存文件时会提供压缩，具体取决于文件类型。选项可以设置为最大化压缩从而获得小文件，或小程度压缩并获得较大的文件。 黄金法则是由每个用户自己找到，一般建议将压缩保持在92%以上。您应该找到一个值，在不牺牲质量的情况下，图像大小也是令人满意的。
3） 使用高级图像压缩器。 大图像文件可以使用在线图像压缩器进行额外压缩，该图像压缩器提供高级算法来减小文件大小并保持质量印象不变。这些工具通常适用于最常见的文件类型。 使用它们就像拖放文件并下载结果一样简单。使图像压缩器成为您为 Web 保存的工具。我们推荐的在线服务包括Tiny JPG和ImageOptim。你会发现大量的图像压缩器的在线排名，因为这些网站非常受欢迎。
图像优化 4）在相关情况下将GIF替换为视频。 GIF文件往往很大，特别是如果它们包含较长的视频序列时。使用各种压缩视频文件来节省页面加载时间并引入显示优化可能会更方便。
5）分类提供图像。 我们已经谈到了这个话题。对于网站优化，请确保您的CMS为不同的屏幕分辨率和设备提供各种图像版本。 6）使用WebP，JPEG2000等。 使用2010年已经出现在市场上的WebP格式可以促进您的网站SEO，并自然地节省加载时间。这种格式可以达到图像高质量的同时，文件大小保持在最低。但是，此文件类型的使用可能会受到浏览器兼容性的限制。还有更多可用的Web格式，但是它们并没有获得那么多的普及（HEIC，AVIF，JPEG XL）。Google已经在考虑WebP2了！ 各种云服务，如Orbitvu SUN，有条件地提供WebP格式的图像 - 如果浏览器不支持它，则使用JPG或PNG。
7） 使用 CDN 进行图像加载。 内容交付网络（CDN）可以理解为定义如何使用上传到您网站的图像的API。它们可以是自我管理的，也可以由外部服务提供。它们的使用由特殊的图像URL应用，这些URL决定了浏览器如何显示图像，并且可以节省40-80%的图像大小。 有关 CDN 的更多信息，请参阅有关 web.dev 的专门文章。 8）缓存不再更改的图像。 缓存的工作原理是将不会更改的图像存储在用户的驱动器上，并在需要时直接从那里加载它们。缓存通常由浏览器处理，但网站建设可以支持这种解决方案，从而缩短返回用户的页面加载时间。
对于图像格式和Web浏览器的兼容性，我们建议您检查简单有效的网站：https://caniuse.com/ 产品图片的色彩空间优化 最常见的将图像以色彩空间的方式编码入文件的格式是sRGB或Adobe RGB。 色彩空间的主题是摄影中最复杂和最常用的主题之一 - 确保从一开始就在sRGB色彩空间中准备图像，避免转换时发生的损失。这可以在相机设置中设置，也可以在Adobe Photoshop等图像编辑软件中处理。
SEO图像优化的12条规则 用于SEO目的的图像优化（图像SEO）主要是为了您的图片在Google图片搜索引擎中的可见性，并在任何搜索结果中都能受到更广泛地关注。 图像可以严重影响您在Google搜索结果中的位置，如果在网站设计中遵守一定的规则，也可以在Google图形中有利地展示出自己，。 研究图片的关键字。 图像要在搜索引擎中达到高的排名，您需要将您的图像描述跟能搜索到的内容达成匹配。根据SEO研究提前计划您的图像描述，这可以通过Semrush，Semstorm或Ahrefs等众多平台提供帮助。让您的图像在查找位置找到！ 您可以将特殊关键字添加到图像描述中。“意见”、“专家意见”、“前10名”、“评论”、“价格”、“比较”、“排名”、“测试”是添加到类别或产品中以查找信息的最常见关键字。回答此需求并将其添加到您的图像中！如果您正在销售手机，可以将其设置为：“三星s10测试”或“快速智能手机排名”。规则很简单。
使用相关的图像格式。 就像分辨率和大小优化一样，Google会查看图像的格式，以评估其作为搜索结果显示的价值。格式通常会定义加载的大小和速度，从而影响Google的选择。我们的快速提示是：尽可能使用WebP或其类似格式。
保证图片质量。 良好的质量会被Google推荐到更好的位置上。不要使用大量的库存图像，否则会导致它们位于较低的位置。尝试引入尽可能多的拍摄精美的产品图像，没有像素化，没有模糊，具有高吸引力。Google会相应的给予流量。
注意照片的大小。 Google的推荐机制对照片的分辨率和大小都有一定的要求，并不是所谓的“越大越好”。尽量将图片保持在5 MB以下，以便快速加载以获得更好的用户体验并提高您图片在搜索引擎的位置。包括产品图片！
延迟加载 为了使网站排名更高，其图像更受网站的欢迎，您可以使用延迟加载技术。随着用户在站点中的浏览，它会逐渐加载图像，从而允许更流畅的浏览并注册更短的页面加载时间。它还将改善用户体验，因为它有助于更快地访问内容。
Google搜索控制台中的网站地图 将网站图片地图上传到 Google Search Console 后，搜索引擎可以更轻松地了解您网站上图片的架构和位置。在这里，更多信息等于更多的信用 - 期望这能提高您的排名。
图片替代标记 一个好的图片alt标签（您在网站HTML中通过“alt”属性分配给图片的描述文本）的关键是关键字的巧妙放置。不要用流行的关键字过度饱和替代文本，最好使其与图像内容相关，并直观地放置其中的一两个。在多语言网站中，管理所有相关语言的alt标签 - 这意味着更多的本地化任务，但肯定值得一试。
将照片放置在网站内。 重要的是，你想在Google排名很高的照片被正确放置在网站的文本中，需要将其放在包含所需关键字的文本附近，并对其进行说明。搜索引擎将从这种接近中提取信息。电子商务网站将通过构建一个产品描述和图像彼此非常接近的结构来做得很好。
不要忘记文本内容。 Google是一个内容搜索引擎，所以确保您的文字和视觉内容具有高质量。根据搜索引擎的建议写下优质的文章，并以相关的图像辅佐你的文章。这将逐步成为电子商务业务的总体战略。这是图像SEO又向前迈出了一步！
避免将重要内容仅放在图像中。 对于Google来说，从图像中提取内容和含义仍然会更加困难。如果您打算将重要信息传递给您的客户/读者，请避免仅将其放在图像中。尽管信息图表很有用，但在文本中描述它们对SEO更有益。
搜索引擎友好的图像网址 不仅设计精良的alt标签，而且名称明确的图像也会受到Google的青睐。使用连字符和描述性名称。诸如DSC123123_a.jpg之类的解决方案既不向用户也不向搜索引擎谈论图像的内容。
结构化数据非常重要。 Google将内容指定为比典型搜索结果更突出的特殊呈现模式。想想烹饪食谱，简短的简历，产品说明书。如果您的网站设计明确指出哪些内容值得作为结构化数据（包括图像）处理，您可能会从搜索结果列表中的暴露位置中获益。特别注意产品！
结论 通过我们的指南列表，我们引导您解决了图像优化问题。现在，是时候在实践中运用你的知识了。 无论您是在构建新的电子商务网站，还是考虑提高现有网站的性能，您都需要在以下方面优化图像： 分辨率 这一切都是为了了解您网站的大部分使用情况，并调整图像以与发现保持一致。图像的响应式服务也将是关键。您希望用户能够在移动设备、平板电脑和台式机上浏览。 文件大小 为您的图像找到正确的格式，使浏览器快速且保证质量的加载。不要犹豫，使用功能强大（且免费）的图像缩小器，可以将文件大小减少多达70%。 色彩空间 这里只有一个选择 - sRGB色彩空间。它针对Web浏览器进行了优化，并在Web上广泛提供。 搜索引擎优化 我们的提示列表提供了有关如何改善图像SEO的基本概述。研究关键字，构建网站，并避免在图像中放入太多信息。考虑正确的网址和结构化数据指示。这一点，以及更多，应该带你在SEO图像优化方面走得足够远。 上一篇如何拍摄艺术品-案例研究
|
