您的位置:广州网站优化 > 怎么给网站图片做优化?SEO网站图片优化方法
时间:2019-10-08 11:25:55 刘伯温四肖中特选料: 刘伯温四肖中特选料:广州网站SEO

timg5379.gif

 

许多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制作一些图片排列,使得页面更美化。