商品图片的要求及优化(上)
收藏课程
取消收藏
4 mins / By SHOPLAZZA Learn
收藏课程
取消收藏

消费者对图片的敏感性更高,所以一张好图对于电商销售过程来说,往往有着非常重要的作用,所以图片质量一定不能忽视。
Shoplazza对图片的格式和尺寸有一定的要求。目前Shoplazza支持jpg/jpeg,png,gif以及webp格式,甚至是apng这种小众格式,可以满足卖家的日常所需。而jpg/jpeg格式的图片因其质量好,成为电商独立站商品图片的首选。另外,Shoplazza对于单张图片大小的限制为10MB,所以在上传图片之前,尽量在保证图片质量的情况下对图片进行压缩。

  • 0:00:12 对于电商来说,一张好的图片是销售过程中至关重要的一部分。相对于文字,消费者对于图片的敏感性会更高。商品图片的质量甚至可以决定消费者的选择,成为产品大卖的关键。关于商品图片的内容大致上可以分为三个部分: 图片的构图和拍摄; 平台的要求和上传; 以及图片的优化。 由于图片的构图和拍摄包含的内容比较多,我们会在后面的课程中,单独出一期专题进行详细介绍。我们今天就先来说一说商品图片的要求以及优化。
  • 0:01:06 首先是Shoplazza对于图片的格式要求。目前Shoplazza所支持的图片格式,包含了我们最经常使用的jpg/jpeg,png,gif以及webp格式。以及apng这种基于png而开发出的小众格式,可以满足日常的使用需求。除了店铺首页的轮播图等特殊位置,可以使用gif格式的图片以外,其他图片我们推荐使用jpg/jpeg格式。 因为在文件同等大小的情况下,jpg/jpeg格式的图片比gif、png格式的图片,色彩要好一些。 因此jpg/jpeg格式的图片,也被很多人认为是,电商独立站商品图片的第一选择。
  • 0:02:12 除了格式的要求以外,还有图片大小的要求。Amazon曾经做过一项数据调研,网站打开的速度慢一秒,一年的销售额损失大概在16亿美金。所以,我们不推荐使用质量过大的图片。目前Shoplazza对于单张图片大小的限制为10MB,超出此大小的图片无法上传。 并且,通过先进的图片算法,平台会对上传的商品图片进行优化,在尽量保持原有照片质量的基础上,对图片大小进行压缩,保证用户有一个良好的购物体验。
  • 0:03:01 我们推荐各位在上传图片之前,对图片进行预处理,控制图片大小在500KB左右,这样可以最大化地平衡图片的质量和用户的体验,保证页面打开和商品的加载速度。 在进行图片压缩的时候,推荐使用无损压缩图片的方式。有很多专业的工具,可以在保证图片质量不变的情况下,对图片的大小进行压缩,解决了图片质量和大小之间的矛盾,极大的方便了我们电商卖家。具体的图片压缩软件和功能,大家可以自行搜索进行了解,这里就不做推荐了。
课程评论

看看学员怎么说

发表评论
顾客评论
已到底部
最新评价时间
按点赞数从大到小
按评分从高到低
按评分从低到高
×
class SpzCustomFileUpload extends SPZ.BaseElement { constructor(element) { super(element); this.uploadCount_ = 0; this.fileList_ = []; } buildCallback() { this.action = SPZServices.actionServiceForDoc(this.element); this.registerAction('upload', (data) => { this.handleFileUpload_(data.event?.detail?.data || []); }); this.registerAction('delete', (data) => { this.handleFileDelete_(data?.args?.data); }); this.registerAction('preview', (data) => { this.handleFilePreview_(data?.args?.data); }); this.registerAction('limit', (data) => { this.handleFileLimit_(); }); this.registerAction('sizeLimit', (data) => { this.handleFileSizeLimit_(); }); } isLayoutSupported(layout) { return layout == SPZCore.Layout.LOGIC; } setData_(count, file) { this.uploadCount_ = count; this.fileList_ = file; } handleFileUpload_(data) { data.forEach(i => { if(this.fileList_.some(j => j.url === i.url)) return; this.fileList_.push(i); }) this.uploadCount_++; sessionStorage.setItem('fileList', JSON.stringify(this.fileList_)); this.triggerEvent_("handleFileUpload", { count: this.uploadCount_, files: this.fileList_}); if(this.fileList_.length >= 5){ document.querySelector('#review_upload').style.display = 'none'; } if(this.fileList_.length > 0){ document.querySelector('.apps-reviews-write-anonymous-box').style.marginTop = '8px'; } } handleFileDelete_(index) { this.fileList_.splice(index, 1); this.uploadCount_--; sessionStorage.setItem('fileList', JSON.stringify(this.fileList_)); this.triggerEvent_("handleFileDelete", { count: this.uploadCount_, files: this.fileList_}); document.querySelector('#review_upload').style.display = 'block'; if(this.fileList_?.length === 0){ document.querySelector('.apps-reviews-write-anonymous-box').style.marginTop = '132px'; } } handleFilePreview_(index) { const finalPreviewData = this.fileList_[index]; const filePreviewModal = document.getElementById('filePreviewModal'); const fullScreenVideo = document.getElementById('fullScreenVideo'); const fullScreenImage = document.getElementById('fullScreenImage'); const previewModalClose = document.getElementById('previewModalClose'); const previewLoading = document.getElementById('previewLoading'); filePreviewModal.style.display = 'block'; previewLoading.style.display = 'flex'; if(finalPreviewData?.type === 'video'){ const media = this.mediaParse_(this.fileList_[index]?.url); fullScreenVideo.addEventListener('canplaythrough', function() { previewLoading.style.display = 'none'; }); fullScreenImage.src = ''; fullScreenImage.style.display = 'none'; fullScreenVideo.style.display = 'block'; fullScreenVideo.src = media.mp4 || ''; } else { fullScreenImage.onload = function() { previewLoading.style.display = 'none'; }; fullScreenVideo.src = ''; fullScreenVideo.style.display = 'none'; fullScreenImage.style.display = 'block'; fullScreenImage.src = finalPreviewData.url; } previewModalClose.addEventListener('click', function() { filePreviewModal.style.display = 'none'; }); } handleFileLimit_() { alert(window.AppReviewsLocale.comment_file_limit || 'please do not upload files more than 5'); this.triggerEvent_("handleFileLimit"); } handleFileSizeLimit_() { alert(window.AppReviewsLocale.comment_file_size_limit || 'File size does not exceed 10M'); } clear(){ this.fileList_ = []; this.uploadCount_ = 0; sessionStorage.setItem('fileList', JSON.stringify(this.fileList_)); this.triggerEvent_("handleClear", { count: this.uploadCount_, files: this.fileList_}); document.querySelector('#review_upload').style.display = 'block'; } mediaParse_(url) { var result = {}; try { url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (str, key, value) { try { result[key] = decodeURIComponent(value); } catch (e) { result[key] = value; } }); result.preview_image = url.split('?')[0]; } catch (e) {}; return result; } triggerEvent_(name, data) { const event = SPZUtils.Event.create(this.win, name, data); this.action.trigger(this.element, name, event); } } SPZ.defineElement('spz-custom-file-upload', SpzCustomFileUpload);
The review would not show in product details on storefront since it does not support to.