Magento 2中的图片

本篇主要总结 Magento 2 中的产品图片和素材图片。

产品图片的存储位置在pub/media/catalog/product位置下,该目录下的原始图片按照一定的目录索引存储,子目录cache存放各种调整过大小的图片。

素材图片存储位置在pub/media/wysiwygLuma主题首页的一些展示图片就在该目录下,Media Storage指的也是它。

产品图片有角色(Image Roles)

Role Descriptions
Swatch Image A swatch image can illustrate a color, texture, finish, or pattern. Swatch images that are specific to the product can be uploaded to the image gallery.
Base Image The base image is the main image on the product detail page. Image zoom is activated if you upload an image that is larger image than the image container. Example sizes:
470 x 470 pixels (without Zoom)
1100 x 1100 pixels (with Zoom)
Small Image The small image is used for the product images in listings on category and search results pages, and to display the product images needed for sections such as for Up-sells, Cross-sells, and the New Products List. Example size:
470 x 470 pixels
Thumbnail Thumbnail images appear in the thumbnail gallery, shopping cart, and in some blocks such as Related Items. Example size:
50 x 50 pixels

为什么图片要有角色呢?
不同的页面对图片的尺寸要求不一样。比如列表页面,这个页面就是一个概览,小图片就可以满足要求了,而且图片小一点加载更快。但是他没有解决多终端的图片加载问题。多终端下按需加载会是最好的方案。

在创建自定义主题中,提到用view.xml来配置图片的属性。但是这样的结构看起来完全没有考虑到按需加载。所谓按需加载,指的是根据不同的终端提供不同尺寸的图片。因为我们不会希望在手机端加载一张大图,然后只是在前端缩小他的尺寸,实现视觉上的变小。以 luma 主题为例,我们用调试工具就会发现,尽管是响应式,但他只是样式上变小,而不是按需加载。

参考文档

How to Manage Product Images in Magento 2? (Add/Remove)

发表评论

电子邮件地址不会被公开。 必填项已用*标注