收藏本站更换配色

网站外链,外链发布,seo外链,免费发外链,描文本外链,外链制作,外链优化,软文推广

发布文章

SEO外链 / SEO教学 / 网页图片的SEO交互怎么优化？

收藏文章楼主

网页图片的SEO交互怎么优化？

版块：SEO教学类型：普通作者：SEO教学分享查看：7619 回复：0 获赞：0 时间：2021-09-27 10:15:42

许多SEOer都认为网站优化就是单纯依靠内容优化，但其实一个优秀的网站，网站中的每一个元素都是有优化的必要性的，如：框架优化、导航优化、代码优化、CSS优化、JS优化、图片优化等。

网页图片的SEO交互怎么优化

1、图片放大功能

该算法的思想是利用两幅图片，一幅是鼠标移动的小图片，另一幅是大图片，来动态地获取鼠标的位置，并在小图片上按比例地移动大图片，使得其中的一部分可以以DIV方式显示以实现放大效果。

html代码：

<div>

</div>

</div>

2、图集使用：JS图片切换

通过计时器使得图片每间隔几秒可以自动切换，也可以通过鼠标的点击控制播放的图片。

html代码：

<!DOCTYPE HTML>

<html>

<head>

<title>图片自动切换</title>

window.onload=function(){

var oDiv=document.getElementById("box");

var oImg=oDiv.getElementsByTagName("img")[0];

var oSpan=oDiv.getElementsByTagName("span")[0];

var oP=oDiv.getElementsByTagName("p")[0];

var oUl=oDiv.getElementsByTagName("ul")[0];

var oLi=oUl.getElementsByTagName("li");

var arrUrl=['1.png','2.png','3.png','4.png'];

var arrText=['图片一','图片二','图片三','图片四'];

var num=0;

//初始化

function fnTab(){

oImg.src=arrUrl[num];

oSpan.innerHTML=1+num+'/'+arrUrl.length;

oP.innerHTML=arrText[num];

for(var i=0;i<oLi.length;i++){

oLi[i].className=''

}

oLi[num].className='active'

}

fnTab();

//计时

var timer=null;

function show(){

num++;

num%=arrText.length; //计算播放哪张图片

fnTab();

}

function autoPlay(){

timer=setInterval(show,2000); //图片播放间隔为2秒

}

setTimeout(autoPlay,2000); //2秒后自动播放

function stopPlay(){

clearTimeout(timer);

}

oDiv.onmouseover = stopPlay;

oDiv.onmouseout = autoPlay;

for(var i=0;i<oLi.length;i++){

oLi[i].index=i;

oLi[i].onclick=function (){

num=this.index;

fnTab();

};

}

};

</script>

</head>

<body>

数量正在加载中...

文字说明正在加载中...

<ul>

</ul>

</div>

</body>

</html>

3、选择适当的图片宽度大小(即响应图片)

无论是电脑还是手机，都有很多不同大小的图偏需要展现，如果做做的是响应性的网站，那么你就更加需要考虑图片的大小尺寸问题。

移动端有太多的屏幕分辨率和大小，因此可能需要加载不同大小的图像，从而节省了对站点的访问和页面呈现的效率。

4、使用CSSSprites减少HTTP的网络资源请求

CSSSprites是一种网页图像处理方法，其中一个页面所涉及的所有散乱的图像或图标都包含在一个大图片中，因此只需要加载这个图片，而不是很多图片，这减少了许多HTTP请求。

5、站点图片属性值的添加

网站图片上的属性值(ALT和TITLE)也是图片优化中重要的一点，搜索引擎识别图片的途径首先就是从图片的ALT属性值抓取的，ALT属性值就相当于这个图片的标题、解释说明。

6、CSS和CSS3制作简单的图标和动画

随着技术的发展，CSS3可以实现的效果越来越多，比如箭头图标，三角形，梯形等图标，或者一些阴影效果，渐变的效果，可以用CSS制作一些图片排列，使得页面更美化。

阅读本文的人还可以阅读：

网页内容是写给谁看的？写网页内容需要注意些什么？

MIP是什么？怎样实现MIP？

如何优化网站产品页面

过度优化是什么？如何避免优化过度？

SEO教学：https://www.jxmseo.com/list-86-1.html

本文转载于网络，如有侵权请联系删除

全站外链： TEC传感器 | 猫掌外链

免责声明

1、小猪外链里发表的文章仅代表作者本人的观点，与本网站立场无关。
2、小猪外链网资源分享仅为个人学习、交流之用，同时向原著作者表达敬意。
3、小猪外链网仅提供信息存储空间服务，小猪外链网信息均来源于用户自行发布，不承担任何法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，可以按照《小猪外链网文章侵权处理流程》进行处理，同时向原著作者表达敬意。
4、内容由网友自主上传，如有侵权、违规请联系邮箱616859395@qq.com进行处理。

如果觉得本文还不错请点个赞或者打赏点金币哦~

拒绝伸手党，拿走请回复，尊重楼主，尊重你我他~

回复列表

默认热门正序倒序

许多SEOer都认为网站优化就是单纯依靠内容优化，但其实一个优秀的网站，网站中的每一个元素都是有优化的必要性的，如：框架优化、导航优化、代码优化、CSS优化、JS优化、图片优化等。 网页图片的SEO交互怎么优化1、图片放大功能该算法的思想是利用两幅图片，一幅是鼠标移动的小图片，另一幅是大图片，来动态地获取鼠标的位置，并在小图片上按比例地移动大图片，使得其中的一部分可以以DIV方式显示以实现放大效果。html代码：  <div>         <div>                    <div id="middlePicRemark">  <img id="imgGoodsPic" alt="" src="https://www.seowhy.com/images/20141009154623153.jpg" style="width:950px; height:950px; display:block;position: relative"></div>                     <div id="middlePicBox">                    <img id="" style="width: 396px; height: 396px; position: absolute; top: 0px; left: 0px;" src="https://www.seowhy.com/images/20141009154623153.jpg">                  <div style='height:166.32px;width: 214.240837696335px;border-width: 1px;visibility: hidden;position: absolute;'>  </div>                        </div> 2、图集使用：JS图片切换通过计时器使得图片每间隔几秒可以自动切换，也可以通过鼠标的点击控制播放的图片。html代码：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>图片自动切换</title><link rel="stylesheet" type="text/css" href="https://www.seowhy.com/qiehuan2.css"> <script>window.onload=function(){    var oDiv=document.getElementById("box");    var oImg=oDiv.getElementsByTagName("img")[0];    var oSpan=oDiv.getElementsByTagName("span")[0];    var oP=oDiv.getElementsByTagName("p")[0];    var oUl=oDiv.getElementsByTagName("ul")[0];    var oLi=oUl.getElementsByTagName("li");     var arrUrl=['1.png','2.png','3.png','4.png'];    var arrText=['图片一','图片二','图片三','图片四'];    var num=0;     //初始化    function fnTab(){        oImg.src=arrUrl[num];        oSpan.innerHTML=1+num+'/'+arrUrl.length;        oP.innerHTML=arrText[num];        for(var i=0;i<oLi.length;i++){            oLi[i].className=''        }        oLi[num].className='active'    }    fnTab();     //计时    var timer=null;    function show(){        num++;        num%=arrText.length; //计算播放哪张图片        fnTab();    }     function autoPlay(){        timer=setInterval(show,2000); //图片播放间隔为2秒    }     setTimeout(autoPlay,2000); //2秒后自动播放     function stopPlay(){        clearTimeout(timer);    }    oDiv.onmouseover = stopPlay;     oDiv.onmouseout = autoPlay;     for(var i=0;i<oLi.length;i++){        oLi[i].index=i;        oLi[i].onclick=function (){            num=this.index;            fnTab();        };    } };</script></head> <body><div id="box"><img src=""/>数量正在加载中...文字说明正在加载中...<ul><li></li><li></li><li></li><li></li></ul></div></body></html> 3、选择适当的图片宽度大小(即响应图片)无论是电脑还是手机，都有很多不同大小的图偏需要展现，如果做做的是响应性的网站，那么你就更加需要考虑图片的大小尺寸问题。移动端有太多的屏幕分辨率和大小，因此可能需要加载不同大小的图像，从而节省了对站点的访问和页面呈现的效率。 4、使用CSSSprites减少HTTP的网络资源请求CSSSprites是一种网页图像处理方法，其中一个页面所涉及的所有散乱的图像或图标都包含在一个大图片中，因此只需要加载这个图片，而不是很多图片，这减少了许多HTTP请求。 5、站点图片属性值的添加网站图片上的属性值(ALT和TITLE)也是图片优化中重要的一点，搜索引擎识别图片的途径首先就是从图片的ALT属性值抓取的，ALT属性值就相当于这个图片的标题、解释说明。 6、CSS和CSS3制作简单的图标和动画随着技术的发展，CSS3可以实现的效果越来越多，比如箭头图标，三角形，梯形等图标，或者一些阴影效果，渐变的效果，可以用CSS制作一些图片排列，使得页面更美化。 阅读本文的人还可以阅读：网页内容是写给谁看的？写网页内容需要注意些什么？ MIP是什么？怎样实现MIP？ 如何优化网站产品页面 过度优化是什么？如何避免优化过度？ 
 <a target="_blank" href="https://www.jxmseo.com/list-86-1.html" rel="nofollow" title="SEO教学">SEO教学</a>：https://www.jxmseo.com/list-86-1.html
本文转载于网络，如有侵权请联系删除

首 1 尾