<div id="wnzr0"><tr id="wnzr0"><object id="wnzr0"></object></tr></div>
<em id="wnzr0"></em><sup id="wnzr0"></sup>

    <dl id="wnzr0"><ins id="wnzr0"><thead id="wnzr0"></thead></ins></dl>

    <em id="wnzr0"></em><dl id="wnzr0"></dl>

    <dl id="wnzr0"></dl>
    <progress id="wnzr0"><tr id="wnzr0"></tr></progress>

        NEWS

        当前位置:首页 > 锐美资讯 > 后台操作

        网站建设图片如何优化有利于搜索引擎抓取和用户体验?

        发布者:ruimei88    时间:2018-05-04 10:03:56    人气:

          图片的优化是网站建设中的一个特殊的问题,优化网站图片需要考虑的是两个方面,一个的搜索引擎,另一个就是网站访客,所以对于网上说的只需要给图片加标签的说法,本人并不是完全认同。所以,对于网站建设中图片的优化处理,本人有不同的见解。成都网站建设锐美网络为大家来详细讲述一下网站建设图片如何优化这个看起来小却不小的问题。


        网站建设图片如何优化

          首先,我们讲图片优化的搜索引擎识别


          图片识别是图片优化的重要部分,因为图片的内容,搜索引擎很难鉴别,主要是通过图片的alt标签来实现,因此在网站建设中需要把需要给搜索引擎抓取的图片添加alt标签;在网页内容中,如后台编辑器里面,需要编辑者手动添加alt标签。当然您没有必要给每张图片都加上alt属性,尤其是那些小于75px的装饰图片。


          除了图片的alt标签以外还要注意的就是在代码中药注意backgroud属性的使用,图片如果使用这个属性,搜索引擎是不会抓取该图片的,主要用于背景图片,网站中不重要的装饰图片可以使用css写到样式表里面,不让搜索引擎抓取。而那些具有一定价值的图片,如banner则需要想办法让搜索引擎识别并抓取。


          第二,我们讨论图片优化的用户体验问题


          (1)注意图片大小的处理,加快图片加载速度


          如果您发现网站的图片是从上至下缓慢加载的,那么这至少说明一个问题,网页的图片太大了。图片过大的危害是用户需要漫长的?#21364;?#25165;能够看到网站图片的内容。我们需要做的就是对图片进行压缩处理,一般认为一张600px*400px的图片,最大不超过50kb,1920px*600px的图片不大于500kb。压缩过程使用PS工具就可以实现,不过需要注意的是图片压缩是保证图片清晰度的前提下进行压缩的,否则图片不清晰,用户体验一样差。


          (2)?#21482;?#31471;图片大小的处理


          可能平时我们都使用电脑,并没有注意?#21482;?#32593;站。问题在哪里呢?实际上还是图片大小的问题。图片大小有两个概念,一个是显示大小,一个是存储大小。?#21482;?#19978;显示的图片虽然小,但是他可能是和PC端的图片大小是同一张,那么PC网页的大小和?#21482;?#32593;页的大小差距就一样了,可能的情况就是PC打开快速,而?#21482;?#25171;开缓慢,这个问题尤其在那些所谓的响应式网站中特别严重。因此,对于那些?#21482;鶳C同后台的网站,都需要对图片进行?#38469;?#22788;理,实现?#21482;?#31471;PC端图片大小不一样,从而减少?#21482;?#39029;面的大小,加快?#21482;?#32593;站的打开速?#21462;?/span>



          (3)网站建设中水印的处理


          我们在网站上的图片,为了防止盗图,我们可能都会给图片添加水印。不过,您是否见过很多人把水印添加?#35762;?#21697;图片中央,或者整张图满满的水印呢?这样的用户体验真的好?因此,我们建议,在图片添加水印中还是使用规范化的水印添加,比如做一个统一大小的水印模板,处理图片的时候将其用上,把水印做到图片的角落位置,推荐左下角,站外引用时,某些网站会在右下角添加水印,添加在左下角可以避免覆盖,看起来更舒服。


          还有一种给图片添加水印的方式,可能成本会有那么一点,那就是把logo做?#35762;?#21697;上,咋们直?#20248;某?#20135;品上的logo,这样的方式可能会让访客感觉更真实。要是产?#35775;?#26377;logo呢?你完全可以制作一块专门用于拍照的牌子,和产品放在一起,效果也一样。其他的,比如校服、公司标识,公司领导人,诸如此类,其实都是隐藏“水印?#20445;?#21035;人一般是不会盗你图的。


          (4)注意图片的存储格式


          图片的存储格式我并不是说什么jpg,什么png的。我只是告诉您,您有没有发现某些网站的图片是从上至下加载的,而某些网站的图片是直接显?#23601;?#25972;的,只是先模糊,然后逐渐清晰。这就是图片存储格式中渐进式存储(连续)和优化的差异。图片保存格式为优化,当网页加载缓慢时就会出现从上至下的加载情况,而渐进式加载是直接显?#23601;?#25972;的图片,从模糊然后变清晰。一般认为渐进式存储,用户体验更理想些,不过渐进式存储对于IE浏览器支持不好,会出现空白的情况。不过在当今大多数浏览器都支持H5的情况下,采用渐进式存储应当是主流。


        QQ截图20180323114147.jpg


          关于图片处理,本人就讲述到这里,那么平时在网页中添加图片多大比较好呢?建议大小宽度400px-600px,宽高比4:3比较好,添加编辑图片是一定要添加alt标签,一定要添加alt标签,一定要添加alt标签,你问?#20197;?#20040;写标签?图片是什么您就写什么就可以了啊。


          本文由锐美网络成都网站建设公司原创(http://www.qyfh.tw/News/houtai/418.html),未经允许,禁止转载。


        上一条: 怎么让搜索结果中显示logo图标,如何在网页快照的出现网站缩略图? 下一条: 如何写好网站首页标题?网站首页标题有利于排名的正确写法
        版权所有:成都锐美云商网络科技有限公司 侵权必究 川公网安备 51010402000103号 蜀ICP备16009388号-2

        锐美网络!专注成都网站建设,提供企业网络营销解决方案

        盈禾国际
        <div id="wnzr0"><tr id="wnzr0"><object id="wnzr0"></object></tr></div>
        <em id="wnzr0"></em><sup id="wnzr0"></sup>

          <dl id="wnzr0"><ins id="wnzr0"><thead id="wnzr0"></thead></ins></dl>

          <em id="wnzr0"></em><dl id="wnzr0"></dl>

          <dl id="wnzr0"></dl>
          <progress id="wnzr0"><tr id="wnzr0"></tr></progress>
              <div id="wnzr0"><tr id="wnzr0"><object id="wnzr0"></object></tr></div>
              <em id="wnzr0"></em><sup id="wnzr0"></sup>

                <dl id="wnzr0"><ins id="wnzr0"><thead id="wnzr0"></thead></ins></dl>

                <em id="wnzr0"></em><dl id="wnzr0"></dl>

                <dl id="wnzr0"></dl>
                <progress id="wnzr0"><tr id="wnzr0"></tr></progress>
                    一句解特码彩图 北京11选5中奖结果 特码网站高手解 百人牛牛赢话费手机版 黑龙江11选5任选5码最大遗漏 2014年73期二肖中特 重庆百变王牌走势图百宝彩 江苏福彩7乐彩中奖规则 2233红姐心水论坛 朴克诈金花怎么玩 买总进球数点球算吗 福彩幸运一中奖规则 云南快乐10分玩法介绍 北京快乐8大小单双 零点棋牌下载