当前位置: 首页 > Web前端 > CSS

图片优化的8个小窍门

时间:2023-03-30 19:26:17 CSS

如果你经营网上商城或大型电商网站,图片优化是你必须要掌握的。不仅从吸引潜在客户,到增加图片搜索流量,或者提高网站加载速度,图片优化都扮演着非常重要的角色。但是说到图片优化,很多传统意义上的SEO人都会说图片要加alt标签,图片要压缩……这么粗的线条显然是不能接受的。今天和大家深度分享一下图片优化必须了解的8个知识点。使用结构化数据编写产品图片ALT,我们可以方便的使用相机默认图片编号作为图片名称。这样的话,对于搜索引擎来说,可能就没有办法识别图片的内容了,然后我们就失去了从图片上搜索的能力,这对于孩子带来的流量来说是一个遗憾,尤其是当你的产品有几十个的时候数以千计。一般我们可以制定结构化的数据规则,让技术人员设计程序批量替换图片的alt特征,不需要我们手动操作。我们要考虑,访问者的搜索习惯是什么?将寻找哪些关键字?最好看看GoogleStatistics里面的关键词数据,看看有没有损失。基本上,访问者更倾向于寻找品牌词+产品系列的短语组合和变化,那么alt标签的结构规则就出来了,可以写成:alt="{品牌词}{产品系列}-{产品型号}”。对于商品图片的描述,不建议写过多冗余内容,保持数据结构化,做到关键词识别度高,关键词信息丰富。不要积累关键字。拍照角度的问题基本上,拍产品照片不会只拍一个角度,参观者也不会满足于只拍一张正面照。只有从多个角度展示图片,才能更好地吸引访问者在您的网站上停留更多时间,为了能够激起他们的购买欲望,所以很自然地要对物体的正面、背面、侧面、细节等进行拍照。这时候alt标签怎么写呢?  最好的方法是坚持alt标签的结构并继承主图的布局。不要给这些图像一种新的书写方式。正确的写法如下,alt={brandword}{productseries}-{Productmodel}-frontalt={brandword}{productseries}-{productmodel}-reversealt={brandword}{productseries}-{productmodel}-sideside  stickbackbone"{brandword}{Productseries}-{Productmodel}"保持不变,可以让搜索引擎充分确认当前图片系列或页面就是关于那个关键词,然后大大增加这些图片被图片搜索引擎搜索到的几率。单打独斗,必败。关于大图的显示问题,如果你想提供更大的图片让用户感觉更好,这个想法很好,但是你必须非常小心。不建议直接在网页上放大图然后用css缩小图片,即使你看起来图片变小了,但是图片的比例还是存在的,会影响加载速度。反之,可以先放小图,然后提供查看大图功能的选项,无论是点击弹出大图还是显示另一个新页面,都可以。当然有些人会把大图裁剪成小图进行拼接,这样可以让图片快速出现,但是将一张图片裁剪成小图后,服务器的请求量会增加,从而影响网页的加载速度.因此,如果图片尺寸实在太大,建议为图片配置一个新的服务器。缩减图像首先查看统计数据,大多数台式机或笔记本电脑用户不希望网站加载超过3秒......在移动设备上他们等待的时间不会超过5秒亚马逊发现他们的网站加载速度是否慢1秒,他们每年将损失16亿美元搜索引擎在其排名算法中包括网站加载速度等待与您的客户说再见。图像文件应该有多大?有些理论说图片的大小应该保持在70kb以下,但这有时很难,尤其是大图片,几乎是不可能的,除非你不求清晰。我个人认为,与其用一个标准来限制每张图片的大小,关键是我们有没有实现,看了我的博文有没有真正压缩过图片。这是关键。使用正确的图片格式有三种非常流行的图片格式,它们是JPEG、GIF和PNG。让我们看看它们有何不同,JPEG(或.jpg)是最常用的图像压缩格式并支持一流的压缩。一般对于显示要求比较高的图片,JPEG格式显示的图片效果比GIF和PNG有明显的优势。GIF(.gif)的图像显示质量比JPEG差很多。一般用于非常简单的图片展示,比如素材或者装饰图片,gif也可以用来制作动画。gif不适用于高显示质量的图片。PNG图像是比gif更好的选择,因为PNG图像比GIF支持更多的颜色。另外,和JPEG一样,PNG多次保存不会影响图片质量,而且对于小图片,PNG占用的体积非常小,而且PNG完美支持透明背景,所以一般的logo或者普通的装饰图片都会选择PHG格式。请注意,在相同环境下,PNG-24图像大小是PNG-8版本的三倍多。在处理PNG时必须非常小心,并且要小心。通过比较相同尺寸(均为24kb)下不同格式的图片显示效果,通过测试可以看出JPEG胜出。在相同尺寸下,GIF和PNG必须牺牲图像质量。不过话说回来,如果是非常小的图片(比如小于5K),PNG是更好的选择。与GIF相比,PNG虽然体积小,但仍然不会使图片变形。当我们选择图像格式时,这里有一些提示供我们参考。对于电子商务网站来说,产品图片的质量要求极高,JPEG格式无疑是首选。它们具有相对高质量的图像显示并且不会占用太多的体积。切勿将GIF用作大型产品图片。否则文件会很大,而且没有好的压缩方法(一压缩就变形了)。GIF可用于动画或装饰缩略图。PNG可用作JPEG和GIFS的替代品。如果要将产品图片制作成PNG格式,请尝试使用PNG-8而不是PNG-24。PNG还擅长处理尺寸很小的简单装饰,PNG会越来越受欢迎。顺便说一句,大多数图像编辑软件都可以转换上述三种方法的图像格式。正确对待缩略图大多数电子商务网站都有缩略图显示,可以让访问者快速扫描尽可能多的产品样式,而无需点击其他页面。缩略图很棒,但要小心,它们可能会成为网站速度的杀手。他们通常出现在关键的购物过程中。如果影响了购物过程的顺畅,呃……那你可能又会失去一个顾客。关于缩略图,我个人有以下两个建议:尽量压缩缩略图的大小,不要对缩略图追求太高的显示质量,在用户点击下一张时给用户一个高质量的图片详细程度页面图片。尽量不要为缩略图设置alt标签。通常,我们不希望搜索引擎索引缩略图,而是索引产品详细信息页面上的高质量原始图像。使用图片贴图如果你的网站使用JS做图片效果来更好的提升用户体验,你还在为图片是否还能被收录而烦恼吗?当然,一般来说蜘蛛是不会抓取源代码中没有显示的图片文件的,但是谷歌在这方面已经有很多经验了。通过提交图片地图,图片地址一一如实罗列,搜索引擎可以抓取。图片地图我就不多说了,因为谷歌有很多教程可以帮助你提高图片搜索排名,看这里。注意装饰图片背景图片、按钮图片、边框图片等非产品图片都可以算作装饰图片。作为优化师,需要仔细检查这些图片的大小是否过大,是否会影响网站的加载速度。这里有一些关于如何压缩装饰图片的建议:如果只是一些类似框架的,或者格式简单的图片,使用PNG-8或GIF,你可以制作出非常漂亮的图片,而且只占用几百字节。如果可能的话,尽量使用css来制作一些特效而不是图片。不建议为网站设置背景图片。如有必要,在保证清晰度的情况下,尽量压缩音量。您还可以将背景图像挖空或保持透明以压缩体积。好了,今天就把图片优化分享到这里,大家有什么更好的建议吗?静候您的留言,我们共同探讨,共同进步。