惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园 - 司徒正美
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
G
Google Developers Blog
T
Threat Research - Cisco Blogs
Cyberwarzone
Cyberwarzone
罗磊的独立博客
S
Security Affairs
D
Docker
Microsoft Azure Blog
Microsoft Azure Blog
G
GRAHAM CLULEY
W
WeLiveSecurity
博客园 - Franky
C
Check Point Blog
The Last Watchdog
The Last Watchdog
F
Full Disclosure
Security Latest
Security Latest
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
AWS News Blog
AWS News Blog
Application and Cybersecurity Blog
Application and Cybersecurity Blog
T
Troy Hunt's Blog
S
Secure Thoughts
Security Archives - TechRepublic
Security Archives - TechRepublic
P
Privacy & Cybersecurity Law Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
P
Privacy International News Feed
S
Schneier on Security
C
Cyber Attacks, Cyber Crime and Cyber Security
T
Tenable Blog
aimingoo的专栏
aimingoo的专栏
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Recent Announcements
Recent Announcements
IT之家
IT之家
D
DataBreaches.Net
U
Unit 42
博客园 - 聂微东
H
Hacker News: Front Page
GbyAI
GbyAI
T
The Exploit Database - CXSecurity.com
N
News and Events Feed by Topic
Simon Willison's Weblog
Simon Willison's Weblog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
TaoSecurity Blog
TaoSecurity Blog
Google Online Security Blog
Google Online Security Blog
T
Threatpost
博客园 - 叶小钗
V
V2EX
Hugging Face - Blog
Hugging Face - Blog
K
Kaspersky official blog

月光博客

AI编程从零开始:环境配置到开发调试-月光博客 母亲被保健品诈骗-月光博客 向身体低头,向岁月妥协:我的高血压“还债日记” -月光博客 月光博客电子书:《信息安全指南》 谷歌发布2025年度搜索排行榜 中国2025社会热点大事记 2025年十大流行语发布 7天3次,骗子骗走我母亲95万元 “技术男”设三重安全墙,母亲95万存款还是被骗走了 电信诈骗后的复盘:母亲的95万元,是怎么从手机银行里消失的 母亲被电信诈骗95万元的全过程 阿根廷警察被谷歌街景相机拍到裸照 网信办开展“清朗·整治恶意挑动负面情绪问题”专项行动 翟欣欣敲诈勒索案一审获刑12年 《绝命毒师》影评:力工觉醒后的梭哈至死 《人工智能生成合成内容标识办法》正式施行 用AI分析你的财务信息 腾讯子公司实习HR怒怼求职者后被开除 OpenAI发布最强模型GPT-5,免费向所有用户开放 用AI解构你的日记 用AI分析你的游戏偏好 用AI分析你的观影偏好 用AI分析你的听歌偏好 《白鹿原》人物分析:乱世浮沉中的人性剖析 乌托邦的捷径:让AI治理“失败国家” 苹果AI的“路径错误”:为什么它在大模型时代掉队了? 《暗黑破坏神3》第35赛季开荒指南 我对特朗普的看法 欧·亨利十大经典小说鉴赏 HBO电视剧《最后生还者》第二季影评 播客自动化更新分发教程 《围城》人物分析:知识分子的时代困局 NotebookLM音频概览支持中文 《暗黑破坏神3》国服回归 《暗黑破坏神3》国服赛季开荒指南 《网络数据安全管理条例》正式发布实施 契约之下的自由:社会契约论 如何去除文章的AI味道 电影《好东西》影评 我的价值观:义务论和效益论 《魔兽世界》正式服PVP教程 电影《哪吒2》影评 中医理论不是科学理论 DeepSeek与主流AI模型对比评测 TikTok停止在美国服务 我的三观(世界观、价值观、人生观) 《无限暖暖》游戏评测 2024年财经年度总结 月光博客2024年推荐阅读文章 IMDb公布2024年热门电影和电视剧 2024年十大流行语发布 谷歌发布2024年度搜索排行榜 中国2024社会热点大事记 Google Adsense税务居住地证明申请教程 极狐GitLab回应前员工实名举报公司高管:恶意诽谤造谣 升级FTTR千兆光纤带宽 字节跳动起诉前实习生索赔800万 看完历届奥斯卡最佳影片后的体验 李子柒已经正式改名并恢复更新 苹果历年新春短片 “姜萍事件”调查结果公布 胡锡进社交平台恢复更新 上海女子沙白自杀的伦理道德分析 京东与杨笠一起玩火 字节跳动大模型训练被实习生攻击,涉事者已被辞退 《加勒比海盗》系列电影 《夺宝奇兵》系列电影时间线 《侏罗纪公园》系列电影时间线 《终结者》系列电影时间线 华为禁止用户从外部手动安装安卓应用(APK文件) 《炉石传说》国服回归一片混乱 官媒辟谣苹果手机被远程引爆 小米回应摄像头里出现陌生男子说话 环球人物:民族大义不是流量密码,盲目排外没有土壤 《异形》系列电影时间线 看完IMDb250后的体验 暴雪《炉石传说》国服开启预约 网易DD参与代打《魔兽世界》事件的深入分析 福建男子四年前“翻墙”浏览境外网站被行政处罚 《魔兽世界》正式服开服两周游戏体验 暴雪游戏足迹查询:查看暴雪游戏的数据 用AI分析你的推特社交网络数据 胡锡进停更三个月 国家网络身份认证公共服务管理办法向社会公开征求意见 苹果将部分产能转回中国 Windows全球大范围蓝屏 电影《V字仇杀队》影评 微软中国员工禁用安卓手机:只能用iPhone 《魔兽世界》怀旧服“巫妖王之怒”游戏体验 百度旗下萝卜快跑已在多个城市开放载人测试 我为什么不喜欢华为这家企业 胡锡进:强烈谴责苏州袭击日本人的凶手 20美元在美国超市的购买力 华为紧急辟谣“是国内最大的牛肉进口商” 苹果公司公布2024年Apple设计大奖获奖名单 自动生成电影剧本:人工智能技术的崭新里程碑 电影《芳华》人物分析 Steam账号被盗号的解决方法 中文互联网内容正在逐步消失 马斯克:推特域名已全部转移到X
图片优化须知的8个小技巧
投稿 · 2013-09-04 · via 月光博客

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

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

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

我们要思考一下,访客的搜索习惯是什么?会搜索哪些关键词?最好可以再看一下谷歌统计里面的关键词数据,看看有无遗漏。基本上来说,访客更倾向于搜索品牌词+产品系列的词组组合和变化,那么alt标签的结构化规则就出来了,可以写为:alt=”{品牌词}{产品系列}-{产品型号}”。对于产品图片的描述来说,不建议写过多冗余内容,保持数据结构化,做到关键词辨识度高,关键词信息丰富就可以了,千万不要做关键词堆积。

2. 图片拍摄角度问题

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

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

  • alt={品牌词}{产品系列}-{产品型号}-正面
  • alt={品牌词}{产品系列}-{产品型号}-背面
  • alt={品牌词}{产品系列}-{产品型号}-侧面

保持主干“{品牌词}{产品系列}-{产品型号}”不变,可以让搜索引擎充分确认当前图片系列或是页面就是关于那个关键词,从而让这些图片被图片搜索引擎搜索到的几率大大增加。单枪匹马一定倒下。

3. 关于大图的显示问题

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

当然,还有一些人会把大图切成一张张小图做拼接,这样做可以让图片快速显示,但同时一张图片切成小图之后,服务器的请求数会增加,从而会影响网页加载速度。所以,如果图片的体积实在过大的话,建议为图片专门配置新服务器。

4. 给图片减减肥

先看看这些数据,

  • 大部分台式机或是笔记本用户不会等待超过3秒的网站加载速度
  • …在移动设备上不会等待超过5秒钟
  • 亚马逊发现如果他们的网站加载速度慢了1秒钟,他们一年将损失16亿美元
  • 搜索引擎将网站加载速度列入了排名算法之中

如果你大量的网站图片非常臃肿,这将严重影响网站加载速度,如果超过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)不同格式的图片显示效果,经过测试可以看到,JPEG 是获胜者,在同样的体积下,GIFs和PNGs必须以牺牲图片质量为代价。不过话又说回来,如果对于非常小的图片来说(比如小于5K),PNG是比较好的选择,相比GIF,PNG可以在体积很小的情况下依然不会让图片失真。

当我们选择图片格式时,如下一些tips供大家参考,

  • 对于电商网站来说,产品图片的质量要求极高,JPEGs毫无疑问是首选,他们有相对高质量的图片显示且不会占用太大的体积。
  • 绝对不要用GIFs来当做产品大图。不然的话文件尺寸会非常大,也没有很好的办法去压缩它(一压缩就失真)。可以用GIFs做动画或是装饰性小图。
  • PNG可以作为JPEGs和GIFS的替代,如果你想把产品图片做成PNG格式,尽量用PNG-8而非PNG-24。PNGs同时也擅长处理简单地装饰图而只需很小的体积,PNG将会变得越来越流行。

顺便提一句,大部分的图片编辑软件可以转换以上三种形式的图片格式。

6. 正确看待缩略图

大部分电商网站都有缩略图展示,它可以让访客迅速的扫描到尽可能多的商品样式而不需要再去点击一个额外的页面。 

缩略图很棒,但是要小心,他们可能是你网站的速度杀手。他们通常会出现在关键的购物流程之中,若因此影响了购物流程的流畅性,额… 那你就可能又损失了一个顾客。关于缩略图,我个人有如下两点建议:

  • 尽可能压缩缩略图体积,缩略图的图片不要过高的追求显示质量,当用户点击到下一层详情页面的时候再给他一张高质量的图片。
  • 尽量不要为缩略图设置alt标签,通常我们并不希望搜索引擎索引的是缩略图而应是产品详情页的高质量原图。

7. 使用图片地图

如果你的网站用JS做图片效果来更好的提升用户体验,你是否担心图片是否还能收录?当然通常来说蜘蛛是不会爬取不显示在源代码里面的图片文件的,但是谷歌对于这点已经很有经验了,通过图片地图的提交,即把图片地址一个个老老实实地列出来,搜索引擎就可以爬行了。 

对于图片地图,我就不多说了,因为谷歌有许多指导文档来帮助你提升图片的搜索排名,看这里

8. 留心装饰性图片

非产品类的图片比如背景图、按钮图,边框图等都可算作装饰图,作为一个优化者,你需要仔细去检查这些图片的体积是否过大,是否会影响网站载入速度。

这里有一些关于如何压缩装饰图的建议:

  • 如果只是一些边框类的、或是简单的样式图片,使用PNG-8或者GIFs,你可以创建非常好看的图片并且只占几百bytes的体积。
  • 如果可能的话,尽量使用css来创建一些特殊效果,而非图片。
  • 不建议为网站设置背景图片,如果一定要有的话,在保证清晰度的前提下最大程度去压缩体积。你还可以把背景图当中镂空或保持透明来压缩体积。

好了,今天关于图片优化我就分享到这里,大家有无更好地建议?期待您的留言,咱们一起探讨共同进步。

来源:投稿,作者: Fimen,原文链接

图片优化须知的8个小技巧