网页图片的SEO交互怎么优化？
2024-04-26 13:28:27
供稿：网友
许多SEOer都认为网站优化就是单纯依靠内容优化，但其实一个优秀的网站，网站中的每一个元素都是有优化的必要性的，如：框架优化、导航优化、代码优化、CSS优化、JS优化、图片优化等。 网页图片的SEO交互怎么优化 1、图片放大功能 该算法的思想是利用两幅图片，一幅是鼠标移动的小图片，另一幅是大图片，来动态地获取鼠标的位置，并在小图片上按比例地移动大图片，使得其中的一部分可以以DIV方式显示以实现放大效果。 html代码： <div> <div> <div id="middlePicRemark"> <img id="imgGoodsPic" alt="" src="images/20141009154623153.jpg" style="width:950px; height:950px; display:block;position: relative"></div> <div id="middlePicBox"> <span id="BigViewImage" style="outline-style: none; cursor: crosshair; display: block; position: relative; height: 396px; width: 396px;"><img id="" style="width: 396px; height: 396px; position: absolute; top: 0px; left: 0px;" src="images/20141009154623153.jpg"> <div style='height:166.32px;width: 214.240837696335px;border-width: 1px;visibility: hidden;position: absolute;'> </div></span> </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="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=""/> <span>数量正在加载中...</span> <p>文字说明正在加载中...</p> <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制作一些图片排列，使得页面更美化。
