图片尺寸建议

图片是店铺设计的重要素材,良好的图片质量以及合理的展示可以提高店铺整体设计感,间接促进店铺转化。为此,我们列举了各组件推荐图片尺寸和一些您在设计过程中可能遇到的问题,您可以按照以下建议选择更合适的图片。

注:以下建议说明不适用于“Simple、Audio、Brooklyn、Pink”四个模板。

 

各组件图片尺寸建议

1.商品图

由于商品在电脑端的布局是可调整的,建议您优先考虑手机端的图片显示效果。

我们提供方形(1:1)、纵向(2:3)、横向(4:3)和原始比例4种商品比例选择,可根据您的产品形状,挑选适合的比例。

注意:如选择了原始比例,则会以原图的比例显示,请尽可能保持所有商品图的比例一致,否则在列表展示中,商品会出现高低不齐的效果,影响浏览体验。

mceclip6.png

 

推荐的比例 2:3
最小尺寸(移动端75%宽度) 560px 宽 840px 高
推荐尺寸(详情页大图) 1700px 宽 2550px 高

 

2.轮播图

我们支持电脑端和移动端独立配置图片,可以根据显示效果分别上传素材。

注意:如选择了固定高度,则会对您的图片进行裁切;如选择了视差效果,即便选择了适应图片,也会发生裁剪。

电脑端推荐的比例 16:9
推荐尺寸 1920px 宽 1080px 高

 

移动端推荐的比例 1:1
推荐尺寸 1125px 宽 1125px 高

 

3.单图

单图默认为固定高度,图片会发生裁剪,可以通过选择图片展示区域来控制不想被裁剪的焦点内容,或者更改图片高度为“适应图片”来避免裁剪。

注意:素材图片高度尽量高于设置的裁剪高度,否则图片将会放大模糊。

推荐的比例 16:9
推荐尺寸 1920px 宽 1080px 高

 

4.图文列表

推荐的比例 4:3(会应用原图比例,此处只做建议)
推荐尺寸 650px 宽 488px 高

 

5.页脚推广

推荐的比例 16:9(可配置)
推荐尺寸 650px 宽 365px 高

 

6.其他注意事项

建议提供尺寸尽可能大的原图,视觉展示效果最好。

建议使用jpg而不是png的文件格式,图片加载速度更快。 主题会根据不同屏幕加载合适的图片大小,确保您的网站加载速率。

 

FAQ

Q1:为什么图片会发生裁剪?

  • 模块设置为固定高度
    单图模块:在适配不同屏幕宽度以及手机设备的时候,为了保证内容的可读性,默认固定了该模块高度,则无法保证图片等比展示。
    轮播图模块:如设置为固定高度,则在不同屏宽下图片都会保持同样高度,此时比例发生变化,就会对图片进行裁剪。

  • 设置了固定比例
    如模块设定了固定的比例,则会自动处理裁切,如未设置图片显示区域,则默认居中裁剪。

  • 响应式图像处理
    在主题的许多模块(轮播图、单图等)中使用了响应式图像。响应式图像是放大和裁剪宽幅图像的行业标准技术,以确保图像对电脑端和手机端具有相同的影响。会将拍摄您的照片放大,直到它完全覆盖显示区域,以便在不拉伸或扭曲图像的情况下进行缩放处理。

响应式处理前的商品显示

mceclip7.png

响应式处理后的商品显示

mceclip8.png

Q2:为什么设置了适应图片还是会被裁剪?

可能是打开了视差滚动效果。为了保证视差生效,会自动放大图片使其图片大小超过显示区域,自然会发生裁剪。

Q3:使用了建议尺寸,图片还是显示不全?

先检查高度设置是否为“适应图片”。如果设置无误,再检查是否开启了“视差效果”,关闭即可保持不裁剪。

 

 

还有其它问题?提交请求

评论