欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

instagram架构_如何为亚马逊,Instagram,Zalando和天猫生成产品图像

程序员文章站 2022-06-10 14:58:45
...

instagram架构

Millions of people have already shifted from traditional tv to online content, and from traditional malls to online stores. Because of this, e-commerce and marketing teams need to deploy and maintain strong online presences for their businesses.

数百万人已经从传统电视转向在线内容,从传统购物中心转向在线商店。 因此,电子商务和营销团队需要为其业务部署和维护强大的在线形象。

This usually means running the brand's own online store and having a presence in different marketplaces that cover different regions and population segments. The never-ending list of possible marketplaces in which to showcase, promote, and sell products just gets longer and longer.

这通常意味着要经营品牌自己的在线商店,并在覆盖不同地区和人群的不同市场中占有一席之地。 展示,促销和销售产品的无穷无尽的市场清单变得越来越长。

To make matters worse, different marketplaces have different requirements and restrictions on images, which can add a burden for the devops and marketing teams. It's also a source of inconsistency in the public image of a brand.

更糟糕的是,不同的市场对图像有不同的要求和限制,这可能会给开发人员和营销团队增加负担。 这也是品牌公众形象不一致的原因。

Here, we'll review the main aspects to consider when setting up a clean pipeline for the seamless production of omnichannel images.

在这里,我们将回顾在设置干净管道以无缝生成全渠道图像时要考虑的主要方面。

通过单个管道的单个主映像 (A single master image through a single pipeline)

To simplify workflows and keep them sustainable, a good practice is to apply the principles of omnichannel to images. This basically means to set a single, easy to configure pipeline for the creation of variants, from the same master or pristine images. Under this approach, we can use the same product image for every channel.

为了简化工作流程并使其可持续发展,一个好的实践是将全渠道原则应用于图像。 从根本上讲,这意味着要设置一个易于配置的管道,以从相同的主映像或原始映像创建变量。 在这种方法下,我们可以为每个渠道使用相同的产品图片

Our pipeline should receive master images and produce the derivatives needed to feed the marketplaces. At a minimum, it should cope with a workflow like this.

我们的管道应接收主图像,并生成提供市场所需的衍生产品。 至少,它应该应付这样的工作流程。

Abraia bulk processing tool.Abraia批量处理工具创建图像变体的简单工作流程。

Of course, a front-end and cloud storage are not necessary. The pipeline may just work by watching a hot folder and creating the variants as master images land there. We'll also take a look at this.

当然,不需要前端和云存储。 通过监视热文件夹并在主映像登陆那里创建变体后,管道就可以工作。 我们还将对此进行研究。

图像转换与优化 (Image transformation and optimization)

Each web channel has its own web design and layout. As for images, this means different and specific aspect ratios. Besides, each marketplace usually has an image policy in place, which limits the resolution and the weight of the image and sets the admissible image format. Usually, it also specifies other style guidelines.

每个网络频道都有自己的网络设计和布局。 对于图像,这意味着不同和特定的纵横比。 此外,每个市场通常都有适当的图像政策,这限制了图像的分辨率和权重,并设置了可接受的图像格式。 通常,它还会指定其他样式准则。

Let's look at the main operations we'll want to accomplish with our pipeline.

让我们看一下我们希望通过管道完成的主要操作。

调整大小,裁剪,填充 (Resizing, cropping, padding)

To change the aspect ratio of an image we may crop it or pad it. To get a squared image from a vertical one we may cut out the upper and bottom parts or we may fill in the left and right sides with white stripes.

要更改图像的宽高比,我们可以对其进行裁剪或填充。 为了从垂直的图像中获取方形图像,我们可以切掉上部和底部,或者在左侧和右侧填充白色条纹。

There are open source tools – like ImageMagick – that allow you to perform these operations effectively. Resizing an image with ImageMagick to limit its maximum dimensions to 800 px is as simple as this:

有一些开源工具(例如ImageMagick)可让您有效地执行这些操作。 使用ImageMagick调整图像大小以将最大尺寸限制为800 px就是这么简单:

convert input.jpg -resize 800x800 resized.jpg

This instruction respects the aspect ratio. If the original image is not squared, then the resized image has one dimension lower than 800 px.  Let's say the image is vertical and we want it for Tmall, which requires a squared image of 800x800 px. Then we may pad it like this:

该说明尊重长宽比。 如果原始图像未平方,则调整大小后的图像的一维尺寸小于800 px。 假设图片是垂直的,而我们想要用于天猫,则需要800x800像素的正方形图片。 然后我们可以像这样填充它:

convert resized.jpg  -gravity center -extent 800x800 padded.jpg

Also, we may simply crop it to fit the dimensions:

另外,我们可以简单地裁剪它以适合尺寸:

convert input.jpg -gravity Center  -crop 800x800+0+0 +repage crop.jpg

While some marketplaces like Tmall encourage padding images with white stripes and branding them with logos to use them in category pages, others like Amazon or Lamoda forbid this practice.

尽管某些市场(如天猫)鼓励在图像上填充白色条纹并在徽标上加上商标以在类别页面中使用它们,但其他市场(如亚马逊或拉莫达)则禁止这种做法。

instagram架构_如何为亚马逊,Instagram,Zalando和天猫生成产品图像
Cropping (left), Resizing (center), Resizing and padding (right)
裁剪(左),调整大小(中间),调整大小和填充(右)

When we pad an image to match the aspect ratio, we don’t risk cropping out important parts. In fact, padding is a trick to keep the aspect ratio unchanged. However, the risk is real when we crop the image.

当我们填充图像以匹配宽高比时,我们不会冒出裁剪重要部分的风险。 实际上,填充是保持纵横比不变的一种技巧。 但是,当我们裁剪图像时,风险是真实的。

So, it is a good practice to ensure in the studio that we comply with some composition requirements set by each channel. We should produce master images with a view of the product compatible with the different aspect ratios that we'll deliver.

因此,最好在工作室中确保我们遵守每个频道设定的一些构图要求。 我们应该以与所提供的不同宽高比兼容的产品视图来制作主图像。

智能裁剪 (Smart cropping)

There are algorithms inspired by human attention and aesthetic perception that provide an enhanced protection against bad automatic crops. In the next example, with smart image cropping (white line) we avoid cutting the face unlike a simple center cropping (red line) would do.

有一些算法受到了人类的关注和审美观念的启发,可以增强对不良自动作物的保护。 在下一个示例中,通过智能图像裁剪(白线),我们避免了像简单的中心裁剪(红线)那样切割面部。

instagram架构_如何为亚马逊,Instagram,Zalando和天猫生成产品图像
cloud service vs center cropping云服务进行智能裁剪与中心裁剪的示例

This option is available in some cloud services. If we're going to use it, we should verify that it works properly for us because many solutions only use an attention map and do not consider aesthetic aspects. Usually, choosing a number of representative images, making some tests with them, and finally verifying the results is enough to get a good grasp.

此选项在某些云服务中可用。 如果要使用它,我们应该验证它是否对我们合适,因为许多解决方案仅使用关注图,而没有考虑美学方面。 通常,选择一些有代表性的图像,对它们进行一些测试,然后最终验证结果足以很好地理解。

叠加徽标和文字 (Overlaying logos and text)

We may also need to add our brand logo or to add a message to the image by overlaying a vector graphic or a text. Moreover, in many cases we need some content localization strategy in place – like tailoring discounts and language to a market region. Sticking to our example, with ImageMagick we can overlay text on a padded image.

我们可能还需要添加我们的品牌徽标或通过覆盖矢量图形或文字来向图像添加消息。 此外,在许多情况下,我们需要适当的内容本地化策略-例如针对市场区域定制折扣和语言。 坚持我们的示例,使用ImageMagick,我们可以在填充的图像上覆盖文本。

convert -fill black -pointsize 70 -gravity center -draw "rotate -90 text 0,-330 'MyBrandHere'" padded.jpg padded-with-brand.jpg

Once we configure it for one image, we may apply it to any other with the same dimensions.

一旦为一个图像配置了它,我们就可以将它应用于具有相同尺寸的其他任何图像。

instagram架构_如何为亚马逊,Instagram,Zalando和天猫生成产品图像
Abraia's cloud serviceAbraia的云服务进行批量图像品牌化的示例

Otherwise, handling typographies and different settings may end being tricky in workflows with certain complexity. In this regard, a cloud service usually provides a front-end to make the configuration intuitive and fast, and more convenient to handle. It also deals with other stuff like typographies or quality preservation in image recompression.

否则,在某些工作流程中,处理印刷体和不同的设置可能会变得很棘手。 在这方面, 云服务通常提供一个前端,以使配置直观,快速并且更方便处理。 它还处理诸如排版或图像重新压缩中的质量保留之类的其他内容。

工作流程 (The workflows )

There are many ways to deploy an image processing pipeline. Depending on the flow rate of images, we may need to support different types of workflows.  

有很多方法可以部署图像处理管道。 根据图像的流率,我们可能需要支持不同类型的工作流。

批量处理 (Batch processing)

In the most simple case – when the flow rate is low – a batch image processing solution may be enough. With ImageMagick, we can use mogrify (instead of convert) to process all the images inside a folder.

在最简单的情况下(当流速较低时),批处理图像处理解决方案可能就足够了。 使用ImageMagick,我们可以使用mogrify (而不是convert)来处理文件夹中的所有图像。

In certain cases, like image versions with a text in different languages, we may need to code a script, but that's not a big deal either. To make it even easier, we may use a cloud batch processing tool in which we drop images and it gives us back all the variants we need, like in the video at the beginning of the post.

在某些情况下,例如带有不同语言文本的图像版本,我们可能需要编写脚本代码,但这也没什么大不了的。 为了使操作变得更加简单,我们可以使用云批处理工具,在其中放置图像,并向我们提供所需的所有变体,例如帖子开头的视频。

热文件夹 (Hot folders)

For in-house deployments where we need something more than simple batch image processing, the use of hot folders may be a good option. In this case, we should set a worker that watches a folder. Any time an image lands the folder the watcher triggers the process that creates all the variants we need.

对于内部部署,我们需要的不仅仅是简单的批处理图像处理,使用热文件夹可能是个不错的选择。 在这种情况下,我们应该设置一个监视文件夹的工作程序。 每当图像登陆文件夹时,观察者就会触发创建我们需要的所有变体的过程。

In this regard, Gulp comes very handy to implement a folder watching pipeline. This GitHub repository brings a ready-to-use implementation of hot folder based on Gulp. It allows us to transform images using Abraia's cloud service or optimize them using Imagemin (an open source solution). Once installed, the watcher is easily started with just one command in the terminal.

在这方面,Gulp非常方便地实现了文件夹监视管道。 这个GitHub存储库提供了一个基于Gulp的即用型热文件夹实现 。 它使我们能够使用Abraia的云服务来转换图像或使用Imagemin(开放源代码解决方案)对其进行优化。 安装后,只需在终端中使用一个命令即可轻松启动观察程序。

$ gulp

This video shows the process at work.

该视频显示了工作过程。

Example of hot folder using Gulp
使用Gulp热文件夹示例

全云 (Full cloud)

Cloud services usually bring the most flexible and fast-to-deploy solution. Still, there are different ways to go full cloud. In the most simple approach from a user perspective, an image management and optimization service takes charge of the transformation. It also manages the delivery to end users (through a CDN) or other web channels like marketplaces and social networks. The user only needs to upload the master images and to configure the transformations, usually with an intuitive graphic interface.

云服务通常会带来最灵活,部署最快的解决方案。 不过,有多种方法可以使整个云变得完整。 从用户角度来看,最简单的方法是图像管理和优化服务负责转换。 它还管理(通过CDN)或其他网络渠道(如市场和社交网络)向最终用户的交付。 用户只需要上传主图像并配置转换,通常使用直观的图形界面即可。

In medium to large companies that manage their own cloud, services from different providers are usually combined. In this case, we are likely to have to manage private and public buckets. We can have a service accessing a bucket, creating the variants, and delivering the resources or just returning them to a different bucket.

在管理自己的云的中型到大型公司中,通常会合并来自不同提供商的服务。 在这种情况下,我们可能必须管理私有和公共存储桶。 我们可以让服务访问存储桶,创建变体,交付资源或将它们返回到另一个存储桶。

Also, a cloud pipeline may be partially implemented in-house. In this case we have endless possibilities. However, such development effort only makes sense when no service complies with the requirements and there is a justified need for a tailored solution.

而且,云管道可以部分地在内部实现。 在这种情况下,我们拥有无限的可能性。 但是,只有在没有服务符合要求并且有合理需求的情况下才需要量身定制的解决方案时,这种开发工作才有意义。

摘要 (Summary)

Studio shooting and photography retouching are time-consuming and costly operations. Being able to use the same master material everywhere is very important to keep times and cost under control.

影棚拍摄和摄影修饰是耗时且昂贵的操作。 能够在任何地方使用相同的母版材料对于控制时间和成本非常重要。

We have reviewed the main aspects of a complete pipeline in charge of creating image variants. On one hand, we looked at the transformations you need to perform from resizing, cropping, or padding, to the overlay of texts and graphics. On the other, we looked at the workflows to implement from batch processing to hot folders or full cloud solutions. We have reviewed some important open source resources (like ImageMagick or Gulp) that make it possible to implement a pipeline you develop yourself.

我们已经审查了负责创建图像变体的完整管道的主要方面。 一方面,我们研究了从调整大小,裁剪或填充到文本和图形覆盖所需要执行的转换。 另一方面,我们研究了从批处理到热文件夹或完整云解决方案的实施工作流程。 我们已经回顾了一些重要的开源资源(例如ImageMagick或Gulp),这些资源使实现自己开发的管道成为可能。

In the end, there are two main factors to consider when deciding whether to use an in-house or a cloud service. First, you must evaluate your willingness to take on the development effort. Second, you need to decide what features you require, from an easy to use interface for the configuration of variants to advanced features like smart cropping.

最后,在决定使用内部还是云服务时要考虑两个主要因素。 首先,您必须评估自己承担开发工作的意愿。 其次,您需要确定所需的功能,从易于使用的界面(用于配置变体)到高级功能(如智能裁剪)。

翻译自: https://www.freecodecamp.org/news/generation-of-product-images-for-amazon-zalando-tmall-instagram-asos/

instagram架构