首页 > 建站资源 > 网站运营 > 8个电商网站图片优化小技巧分享

8个电商网站图片优化小技巧分享

时间:2013-09-28    作者:Fimen   来源:开源中国

如果你运营在线商城又或是大型电商网站,图片优化是你必须要掌握的。不仅仅是从吸引潜在消费者,还是增加图片搜索流量,又或是提升网站加载速度,图片优化扮演者非常关键的角色。但说到图片优化,很多传统意义上的SEO人会说,图片要加alt标签,图片要压缩…这样的粗线条显然是不行的。今天我就和大家深入分享一下图片优化必须了解的8个知识点。

1. 用结构化数据写产品图片ALT

我们很容易使用照相机默认的图片编号当做图片们的命名,这样的话对于搜索引擎来说,可能就没有办法辨识图片的内容,从而我们就失去了从图片搜索那块儿带来的流量,这是非常可惜的,特别是当你的产品有数以万计的话。通常我们可以制定结构化数据规则让技术人员设计程序批量替换图片的alt属性,而无需我们手工操作。

让我们拿一张图来说事儿,我个人比较喜欢的手表牌子——AP,

ap

点击上面的图片来源可以看到这款表的具体型号,为“爱彼-皇家橡树离岸型系列 26378IO.OO 男士机械表”,这个时候我们就可以思考,访客的搜索习惯是什么?会搜索哪些关键词?在这个例子里面,AP手表爱好者会搜索如下短语:

  • ap皇家橡树
  • 爱彼皇家橡树
  • 爱彼橡树离岸
  • 爱彼离岸

当然最好可以再看一下谷歌统计里面的关键词数据,看看有无遗漏。基本上来说,访客更倾向于搜索品牌词+产品系列的词组组合和变化,那么alt标签的结构化规则就出来了,可以写为:alt=”{品牌词}{产品系列}-{产品型号}”,即为“爱彼AP-皇家橡树离岸系列-26378IO.OO”,对于产品图片的描述来说,不建议写过多冗余内容,保持数据结构化,做到关键词辨识度高,关键词信息丰富就可以了,千万不要做关键词堆积。

2. 图片拍摄角度问题

基本上拍摄产品照片不会只拍一个角度,我们回到之前的ap手表,访客肯定不会满足于只有一张正面照,多角度的去展示手表的美才能更好的吸引访客在你的网站上停留更多的时间,才可以去激发起他们的购买欲望,所以自然需要拍摄手表的正面,手表的后盖,手表的侧面,手表表盘的细节等等,这个时候如何写alt标签?

最好的方法也是保持alt标签的结构化,继承主图的格式,千万不要去给这些图片一个全新的写法,正确的写法如下,

  • 爱彼AP-皇家橡树离岸系列-26378IO.OO-正面
  • 爱彼AP-皇家橡树离岸系列-26378IO.OO-后盖
  • 爱彼AP-皇家橡树离岸系列-26378IO.OO-侧面
  • 爱彼AP-皇家橡树离岸系列-26378IO.OO-表盘

保持主干“爱彼AP-皇家橡树离岸系列-26378IO.OO”不变,可以让搜索引擎充分确认当前图片系列或是页面就是关于那个关键词,从而让这些图片被图片搜索引擎搜索到的几率大大增加。单枪匹马一定倒下。

3. 关于大图的显示问题

如果你希望提供更大的图片让用户爽一下,这个思路很好,但要非常小心,不建议将大图直接放在网页上然后用css将图片缩小,虽然你看上去图片变小了,但是图片的尺寸还是实实在在存在的,这会影响加载速度。相反,你可以先放一张较小的图片,然后提供查看大图功能的选项,不管是点击弹出大图还是另外新页面显示,都ok。

当然,还有一些人会把大图切成一张张小图做拼接,这样做可以让图片快速显示,但同时一张图片切成小图之后,服务器的请求数会增加,从而会影响网页加载速度。所以,如果图片的体积实在过大的话,建议为图片专门配置新服务器。对于外置服务器的选择,目前我个人比较推荐又拍,只是需要你花一点银子。

4. 给图片减减肥

先看看这些数据,

如果你大量的网站图片非常臃肿,这将严重影响网站加载速度,如果超过10秒钟,那你等着和你的客户说byebye把。

所以该怎么做?这篇文章或许能帮助你。

图片文件应该多大?

有些理论说图片的大小应该保持在70kb以下,不过这个有时候是很困难的,特别对于大图片来说几乎是不可能的,除非你不求清晰度。我个人倒是觉得,不要用一个标准去限制每一张图片的大小,关键在于,我们有没有去执行,有没有看到我这篇博文后去真正压缩图片,这才是关键。

5. 用对图片格式

目前有三种非常流行的图片格式,他们是JPEG,GIF,和PNG。让我们来看看他们有何不同,

  • JPEG (或者说 .jpg) 是最常用的图片压缩格式,支持最高级别的压缩。通常,对于显示要求比较高的图片来说,JPEG格式展示的图片效果较GIF和PNG有明显的优势。
  • GIFs (.gif) 的图片显示质量要比JPEGs逊色很多,通常用作非常简单的图片展示,比如素材或者装饰性图案,gif也可以用来制作动画。gif不适合用作高显示质量的图片。
  • PNG图片是比gif更好的选择,因为PNG图片支持的色彩要比GIFs多。此外,和JPEG一样,PNG反复保存也不会影响图片质量,而且对于小图来说,PNG占用的体积极小,PNG完美支持透明背景,所以一般logo或一般装饰性图案都会选择PHG格式。注意PNG-24图片体积要超3倍地大于同样情况下的PNG-8版本,对待PNG你要十分小心,看仔细了。

如下是一个例子,通过对比相同体积下(都是24kb)不同格式的图片显示效果:

png-vs-jpeg-vs-gif-image-formats

你可以很清楚的看到,JPEG 很显然是获胜者,在同样的体积下,GIFs和PNGs必须以牺牲图片质量为代价。不过话又说回来,如果对于非常小的图片来说(比如小于5K),PNG是比较好的选择,相比GIF,PNG可以在体积很小的情况下依然不会让图片失真。

相关推荐
Web前端开发中的图片优化技巧分享
电商网站的图片搜索引擎排名优化技巧分享
读图时代:图片的威力绝不仅是缓解视觉疲劳
百度图片优化教程 如何提高百度图片搜索收录排序
处理网页图片最常见的10个错误及解决方案
实例解读聊天缩略图背后的故事:你不曾注意的那些细节
谷歌用人工智能模拟人脑压缩图片 效果超JPEG
深入了解PNG图片格式特点及在IE中的怪异表现
如果这种图片格式能普及,16GB 的iPhone也够用了
16条PS网页设计经验技巧分享
dubble:暗箱式的图片分享社区
魔漫相机:还在街边画漫画?快转行吧!
这款“照相+漫画制作”应用如何爆红网络?
魔漫相机抢占18个国家的App Store免费排行榜冠军宝座
神话Instagram在Snapcha前暗淡 扮美防失宠
国内图片应用昙花一现:难成生态 仍是工具
魔漫相机任晓倩:最火爆App背后的女人
魔漫相机经验与启示:为何爆发 为何不暴跌
Litely:要用“滤镜”来挑战Instagram
Camera360:如何让小白照出高水平照片?
黯然离华 Adobe中国公司究竟做错了什么?
遭裁员工怎么看Adobe研发撤离中国?
小扎赚发了 10亿买的Instagram如今值350亿
25岁的Photoshop如何适应新时代?
9个月用户数破亿 美拍是如何变“爆款”的?
突然来了400万用户 就8个人的足记怎么办?
谷歌旗下专业图片编辑Snapseed获重大更新
他才是美图的真正创立者
Adobe终于为安卓推出一系列移动设计软件
Fotor:如何打造出一个有“逼格”必下的修图APP
用这个算法,再普通的照片都能变成毕加索、梵高的画作
黄油相机:加些文字,让图片装的了文艺做得了逗比
吴欣鸿分享:美图看中的 00 后是怎样一个群体?
辉煌五年:Instagram创始人揭秘成功的秘诀

精彩推荐

热门教程