data-original标签如何优化？能加alt标签吗？

最近在一个网站上发现了data-original标签，无法给图片进行标签优化，觉得很可惜，所以，建议把这个标签改成src，便于搜索引擎更好的爬行抓取图片内容，提升图片的收录几率。那么这两个标签到底有啥区别呢？我们一起看下案例。

案例说明：

代码1：<img alt="鹿泽笔记"src="/img/2025010201.jpg"  style="width:750px;height:610px;"/>
代码2：<img alt="鹿泽笔记" data-original="/img/2025010201.jpg"  style="width:750px;height:1423px;"/>

解答：

data-original 标签，基于jQuery的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。

注意事项：

需要真正实现图片延迟加载，必须将图片地址写在data-original属性中。若src与data-original相同，则只是一个特效而已，并不达到延迟加载的功能。

使用方法：

载入JavaScript文件

<scriptsrc="jquery.js"></script>
<scriptsrc="jquery.lazyload.js"></script>

修改HTML代码中需要延迟加载的IMG标签：

将图片地址写在data-original属性中，而src属性中的图片换成占位符的图片（例如1×1像素的灰色图片或者loading的gif图片）

添加class=”lazy”用于区别哪些图片需要延时加载，当然也可以换成别的关键词，修改的同时记得修改调用时的jQuery选择器。

添加width和height属性有助于在图片未加载时占满所需要的空间。

<imgclass="lazy"src="grey.gif"data-original="example.jpg"width="640"heigh="480">

调用LazyLoad

$('img.lazy').lazyload();

👋 感谢您的观看！