shopify123.cn--一个自学shopify开店、赚美金的网站!
当前位置:shopify教程 > shopify设置 > 正文

亲自动手KMHshopify--网站图片上载&强化

上一则该文他们单纯的介绍了产品副标题,产品叙述的手写和SEO强化 。结语,他们话虽如此产品图片上载教程那个机会,来详尽的说一下产品图片有关的一些科学知识。或许把产品图片原则上列一节而言,原因在于产品图片的强化牵涉到很多的各方面,对B2C业务的开拓也非常的重要。

有关产品图片有关的文本,我觉得大体能分为三个部分:


产品图片怎么拍好;

产品图片怎样强化;

产品图片怎样上载。

有句话说的好:做B2C卖产品,其实卖的是图片。约莫是那个原意了。

这儿Shopify的网志上有2篇有关首饰类产品图片的Tips 和 产品图片对销售的影响 的该文,做有关产品的老师能看看,发布的天数虽然有点久,但是还是很新颖的。

Shopify前台上载产品图片的操作很单纯,这段话就能带过,那个就要放在此栏文本的最后单纯说下。所以此栏重点是紧密结合Shopify网志上的一则有关图片强化的该文而言下有关产品图片强化的事情。该文书名请戳这儿  →《10 Must Know Image Optimization Tips


Shopify图片强化

这儿所言的图片强化,主要指两个各方面的强化: 

1.怎样让Google或者其他浏览器找出并恰当的认知检索你的图片,以期当顾客使用图片搜寻功能搜寻产品的时候恰当显示你的产品图片给潜在性顾客。

2.怎样在保证图片质量的大前提下尽量的增大产品图片压缩率,来大力推进页面的读取速度,延长关上天数。


>>>>

1.图片恰当重新命名


Creating descriptive, keyword-rich file names. Search engines not only crawl the text on your webpage, but they also search for keywords within your image file names.


举个范例:


通常他们用照相机/智能手机拍完相片之后,将相片复制到笔记本电脑里,相片的文档名会是一个个拉丁字母位数加文档file。如DCMIMAGE10.jpg。他们将产品图片上载到Shopify之前的第二步强化,是更动图片的文档英文名字。例如,改成: 2012-Ford-Mustang-LX-Red.jpg。为什么?正像下面所言 Search engines not only crawl the text on your webpage, but they also search for keywords within your image file names. 浏览器更为重要会截取你页面上的文本,还会截取你的图片中文名称。

如下表所示图,为上图GT500敞篷车的图片中文名称。如果是预设的DCMIMAGE10.jpg,浏览器是无法知道这张图片上是什么文本的。如果是2012-Ford-Mustang-LX-Red.jpg,则浏览器会将图片中文名称中的这几个关键词进行检索。


Shopify图片强化

那么,2012 Red Ford Mustang LX;   Ford Mustang LX Red 2012;   Red Ford Mustang LX 2012这三个重新命名哪个更好呢? 

在我看来其实是一样的,但是该文作者提出来,能依据页面分析数据看下访客们都是使用哪种排序方式的关键词进行搜寻的,然后进行图片重重新命名重新上载。精确匹配顾客的搜寻,当然更好,但是我觉得,只要能够准确叙述产品图片,语序具有逻辑性就能了。

其实更为重要是Shopify,任何图片在上载之前都应该进行这样的重重新命名,把那个养成一个习惯。

Tips:图片重新命名的时候,单词之前请使用“-”代替空格,否则上载上去之后,空格会被%20替换。2012-Ford-Mustang-LX-Red.jpg会变成2012%20Ford%20Mustang%20LX%20Red.jpg。

>>>>

2.填写图片的ALT属性

ALT是英文单词Alternate的缩写,意为交换、替换。图片的ALT属性是图片一个必需的属性,它用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的文本。假设由于下列原因用户无法查看图像,alt 属性能为图像提供替代的信息:1. 网速太慢; 2. src 属性中的错误; 3. 浏览器禁用图像; 4. 用户使用的是屏幕阅读器 (以上文本来源于百度)

举个范例 :

上图,添加图片的时候定义了该图片的ALT属性值为“上海鲜花港 – 郁金香”。当用户关上浏览器进行浏览时,正常显示是郁金香的图片了。如果因为网速问题导致图片打不开,则上图位置显示的文本为:

此时用户知道这儿有一张有关郁金香的图片,但是图片具体什么样子,就只能自行脑补了。


除了帮助用户在无法关上图片的时候认知图片文本,ALT的另外一个重要作用是帮助浏览器更好的认知图片的文本了。ALT中的关键词,能帮你的图片在浏览器中有个更好的排名。因此他们说的图片的强化,是要给每个产品图片都加上Alt标签。


目前产品图片展示一个流行趋势是从不同角度给产品拍一些细节图。因此在填写图片的Alt属性的时候,也尽量的为每一张图填写不同的Alt标签。例如:


2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg ->使用Alt标签: alt = ” 2012 Ford Mustang LX Red Leather Interior Trim “

2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg ->使用Alt标签: alt = ” 2012 Ford Mustang LX Red Rear View Air Spoiler “

相对长尾带有叙述性的Alt关键词能让你从Google搜寻中获得更多的访问。


>>>>

3.保证图片质量和控制压缩率


你可能有听说过: 在桌面笔记本电脑上,如果一个网站3秒内还没有关上,很多人就会选择离开;在移动设备上,这一天数增加到5秒;Amazon的一项数据研究表明,他们的网站关上速度慢1秒,一年的销售损失大约为16亿美元;Google的排名算法中,网站关上速度也是帮你获得更高排名的重要因素之一。


因此,如果你的网站关上速度很慢的话,大部分人都会在页面还未读取完的情况下直接选择离开。虽然Shopify采用了包括CDN技术,图片压缩技术等等多项页面加速技术为网站加速,但是如果你的网站上需要读取很多的大文档,例如很多人会用的动辄1M-2M的Banner图,很大的产品图片,这些还是会成为影响网站关上速度的重要因素。


在保证图片质量的大前提下控制图片压缩率的工具有很多,你能找找百度图片无损压缩工具找找。


>>>>

4.选用合适的图片格式


目前主流的图片格式有jpg、png、gif。查了写资料,gif是大部分人不推荐使用的,jpg和png则是大家公认的比较好的图片格式。看下图。在压缩率一样的情况下,jpg的色彩明显要比gif和png要鲜艳好多。

也因此 《10 Must Know Image Optimization Tips》的作者认为,Jpg格式的图片是第一选择gif格式的图片就算了,不要用了。png格式的图片要注意区分下是png-8还是png-24. png-8能使用,png-24文档大,就不要用了。


>>>>

5.产品图片上载&编辑


图片上载一共有四种方法。关上Shopify前台的产品添加页面,到Images板块,如下表所示图所示,点击右上角的Upload Image,弹出对话框,选择本地图片之后进行上载。一次能上载多张图片。也能使用Drop files to Upload功能,直接选中本地需要上载的产品图片,拖放在Shopify前台Images板块区域进行上载。

当且仅当Images板块区域至少有一张图片的时候,板块的右上角按钮就会由Upload Image变为Add image from URL和Add images两个按钮。

Add images和之前的Upload images功能无异。Add image from URL则能通过URL将你放在提供服务的网站上的图片复制到Shopify上. 如下表所示图,点击Add image from URL之后,会弹出对话框要求你输入图片的Direct URL (注意URL的结尾肯定是以图片格式.jpg 或者.png 或者.gif结尾的,否则会上载失败)输入URL之后点击Add image, 就能了. (此方法仅仅是个备用方法,有需要的话能使用,在上载速度上并没有比下面两种方法有多快)

通过批量上载表格进行产品上载的时候捎带着进行图片的上载了。那个在这儿就不赘述,在说到批量上载方法的时候再说。

产品图片上载成功之后,就能对图片进行排序,预览,编辑,添加Alt 或者删除操作了。对图片的操作都会自动保存并实时显示在网站前台,无需再点击保存按钮进行保存操作。

Images板块的第一张大图是产品页面的主图Main Image了,如果你想使用其他图片做主图,只需要用鼠标将该图片拖拽到主图的位置就能了。其他图片也能使用鼠标随意拖动进行排序。

将鼠标移动到需要编辑的图片上之后,在图片下方会显示四个编辑按钮。预览是在当前弹出新的放大的窗口展示图片。点击编辑按钮能对图片进行裁剪,缩放,旋转,调色,调光,添加文本等等操作,功能上还是蛮强大的,具体功能就不在这儿赘述了,大家有天数自己探索吧。

点击ALT就弹出来一个编辑图片ALT的对话框了,在文本框中添加Image Alt Text然后点击Done按钮进行保存就能了. 最后一个垃圾桶图标按钮是删除键了。

>>>>

6.图片的要求

shopify支持的图片格式包

JPEG/JPG

Progressive JPEG

PNG

GIF

如果你上载的图片格式不是以上类型的图片,Shopify会自动将你上载的图片格式转换为以上类型的图片,大部分其他格式的图片都会转化为JPEG,SVG格式的图片会被自动转化为PNG格式的文档。

以上几种类型的产品图片,在不同的使用环境中各有优势,Shopify官方的建议如下表所示:


JPEG / JPG格式的图片

JPEG/JPG格式的图片适合用于显示色彩相对丰富复杂的静止图像,例如拍照的相片图片格式通常为JPG格式的文档。JPEG/JPG格式的图片色彩丰富,同时能在保证图片质量的大前提下保证图片的显示效果,是对图片的无损压缩,这样既保证了图片的显示效果,对图片的无损压缩减小的文档的大小从而保证了网站的关上速度。

因此,JPEG/JPG格式的图片适用于 产品图片,网站的Banner图片,轮播图片,网站页面和网志该文里面的图片。


PNG格式的图片

PNG格式的图片是图形图标文档的理想格式,同时也支持透明度功能,因此在网站的里的Logo图片,以及社交图标文档等等图片应用建议选择PNG格式的图片。


Shopify对图片的自动压缩

为了提高网站的关上速度,减少网站页面的读取天数,同时将更多的图片存储在特定数量的磁盘中,Shopify会在特定的条件下对满足特定要求的图片进行压缩。图片压缩之后可能会导致图像质量的改变。压缩之后的图片的分辨率和你上载的图片的分辨率以及图片尺寸有关系。通常被压缩之后的图片的分辨率DPI为


JPEG:65-90之间

PNG:90

GIF:不会被压缩

图片具体分辨率设置能使用PS查看与调整(快捷键Ctrl+Alt+I)



对JPEG格式的文档而言,压缩之后的图片的分辨率和你上载的图片的分辨率以及图片的尺寸有关系。

原图分辨率图片尺寸压缩之后的分辨率86/更高分辨率宽/高大于等于1024px8565 – 85宽/高大于等于1024pxOriginal quality64/更低分辨率宽/高大于等于1024px6576/更高分辨率宽和高都小于1024px7565 – 75宽和高都小于1024pxOriginal quality64/更低分辨率宽和高都小于1024px

65


>>>>

7.图片文档限制

上载到Shopify网站的图片在网站的像素尺寸和压缩率各方面都有限制,超过以下任意限制在上载文档的时候会显示出错。


图片像素各方面的限制为2000万像素, (图片长与宽像素的乘积)

压缩率各方面的限制为20M

>>>>

8.有关大尺寸图片在不同设备终端的显示问题

大部分的Shopify主题(例如Boundless,Brooklyn,Venture)支持使用全屏的Slideshow图片或者Banner图片,在上载这些图片之前,你需要首先了解这些图片在不同设备上的显示问题,因为Shopify是一个自适应的系统,会自动调整图片的显示尺寸以适应不同屏幕的大小,在笔记本电脑上能全屏显示的图片,当用户使用智能手机访问时显示的图片可能只是原图的一部分。

因此为了保证你的图片能够在任意大小的屏幕上有最佳的显示效果,在制作大图时需要注意以下几点:


尽量的将你想要展示给顾客的重要图片信息显示在图片中间,以防止在笔记本电脑上能正常显示的图片在智能手机上访问时被截掉。

用于Banner或者Slideshow的图片在上载到Shopify上之前,请不要添加任何文本信息,以防止在智能手机上访问时文本别截掉。你能在图片上载之后使用Shopify系统为图片添加文本信息,这些文本是独立于图片的,是自适应的,不会被截掉。

图片不应该过于复杂,以防止你在后期添加文本的时候文本显示效果太差难以阅读,如果确实无法避免使用太过复杂的图片,能在图片上载之后使用Shopify的图片Overlay功能,在图片上方蒙上一层能调整透明度和颜色的涂层,以凸显文本的显示。




    ▼ 更多精彩推荐,请关注他们 ▼




版权保护: 本文由 shopify教程 原创,转载请保留链接: http://www.shopify123.cn/News/3169.html