你所不知道的html5与html中的那些事（五）——web图像

 

文章简介：

      如今的页面，通常都离不开图像，而怎么作才能让咱们的页面中的图像加载的又快又好呢？在优化页面速度的时候还有什么事是你所不知道的呢？

    下面看看今天我为你们带来了哪些关于web图像的你所平时不必定关心的事与一些有建设性的建议吧：

1)关于web页面中的图像你须要关注的关键点有那些？

2)web页面中图像的格式选择须要注意什么？

3)<img>标签的用法细节小结?

第一个问题

关于web页面中的图像你须要关注的关键点有那些？
 

                                                                             示例图

      像示例图中的图片同样，平时咱们写页面都会用到图片，而你在看图片的时候看的是图片的什么呢（不要说只看到上图中的S型曲线的美女哦）？你在用图片的时候是否是怎么去考虑它的用法呢？有没有想过这个图片对你的页面来讲是否是最优的状态？

而当你选择一些图片的时候你是从那几个方面去考虑的呢？

        下面咱们就说一下关于运用图片的时候你应该须要注意的一些关键点：

        1.图片的格式

               这个可能你们都知道可是不必定知道何时去用什么样的格式最优，下一个问题中会详细说明；

        2.图片的颜色

               这个你们可能也了解一些，就是关于图片的颜色值显示的问题，计算机的显示屏能够显示数以个百万计的颜色，可是图片的颜色的会根据它的格式不一样而所能够表示的颜色值也有不一样；例如：PNG-8只拥有256种颜色；

        3.图片的尺寸和分辨率

               这个在纸上是没有的分辨率的概念的，想要多大的图像就用多大的尺寸，而在显示屏幕上尺寸的因素就不是一个了，还与屏幕的分辨率有关；

        4.图片的加载速度

                这个对用户来讲真的是过重要了，若是说一个页面点开超过三秒尚未图片显示的话，用户对这个网站的体验评价就会大的将低；

 面加载的速度对直接的要素就是图片的大小了，赿大加载的时间赿长；

        5.图片的透明度

                通常的在给用户一个好的用户交互体验的时候有一个有透明度的图片要比没有透明度的好，好比：一些图标大多时候用的都是有透明度的；    

        6.图片的动画

                这个效果是在纸上你就远看不见的（小时候的那种翻页的就不说了），这一类的图像能够是gif格式的图片，可是如今为了提高速度通常都用flash,css，javaScript来建立动画，可是最近用flash的也赿来赿少了（苹果对HTML的推进的问题），因此如今主要对动画的建立主要就是css与javascript;

第二个问题   

web页面中图像的格式选择须要注意什么？

     关于web页面中的图片的格式如今大多数的浏览器或者是屏幕阅读器都支持一下三种格式：png\jpg\gif;

     这三个格式的选择但是大有门道的，要学会正确选择这三个格式，就须要先了解这个三个格式的特色;

     png ：经常使用的png格式的图片分为png-8与png-24，一般这个格式用来保存大量纯色的图案或是标志类的文件，对于连续重复的图案他的压缩效果好一些，并且他支持图片的透明度（alpha）见上面的图标；png的压缩为无损的压缩；

     jpg:适用于彩色的照片，由于他包含大量的颜色并进行了合理的压缩，使文件变得比较小，可是他是有损心事的压缩，一些像素点压缩以后不可以被还原；可是对于页面来讲牺牲一些像素点是值得的由于能够提高速度；

     如：示例图中的美女，他就是用的jpg格式的图片，进行的合理的压缩，加载的速度很快，效果也仍是能够接受的；

     gif:他的最大的特色就是能够作成动态的图片，就是小动画，示例图中的左右箭头就是gif格式的；他也支持透明，可是不像png同样支持半透明；因此在一些比较复杂的图的时候就须要用png来作透明效果而不是gif，以避免产生锯齿的效果；

      知道了他们的特性以后就能够因地制宜的选择合理的格式来封装图片文件了，这里你能够用ps来作一下简单的处理；对了，还有一个很是重要的来较快浏览器图片加载速度的方法；就是能够把一个图片分红几个部分来保存以后用css在组装起来，而保存的那几个部分能够根据图片文件的内容来选择对应的文件的格式保存，以达到在可控范围内，速度最优；

 第三个问题   

  <img>标签的用法细节小结?

    只要作过页面开发的人都知道只要是向页面中加载图片，标准的用法就是用<img>标签（如今作一些效果用的都是css+div）；关于img的用法在这里我就不说了，下面就是简单的说总结一下在用这个标签的时候咱们须要注意的问题：

    1.经过IMG来加载的图片必定不要太大，那样会很是的影响你的页面的速度以及用户的体验因此将图片进行必要的压缩是必须的（须要访问的图片必定要放在服务器上这样访问者才能够访问的到；）

    2.为你的img标签提供文本解释，由于一些网速很差的地方会用浏览器选择关掉图像显示的功能，若是你不作文本解释那么在不显示图像的时候你的网站就没有意义了；文本提示标准的用法就是用alt属性；理论上说解释的文字没有长度的限制，可是通常的浏览器不会自动换行，因此呢为了用户体验最好控制在50个字符之内；

   3.在HTML5规定IMG标签必定要用ALT属性，这个必定要记住哦，不习惯给IMG标签加ALT属性的须要注意了；

   4.关于图像的尺寸的问题，虽然能够制定IMG标签的宽高来修改原图片的显示大小，可是在浏览器请求的时候图像的大小不会变，因此建议就是页面须要多大的图片就给多大的图片不要经过IMG标签中的宽高属性来修改；    

好了今天就说到这里吧，不知道对读到这篇文章的您有什么帮助没有？相信经过这篇文章您对web页面的图像选择必定有了一个新的认识；

下篇文章我会讲一些HTML5 与连接相关的东西哦，相信必定会有你不知道的事情。 感谢您的阅读，期待下次与您见面；

身为一名IT技术人员磨练本身的技术是必不可少的，关注微信号coder_online，程序员互动联盟，能够与大牛在线随时讨论本身感兴趣的话题，让本身用最少的时间学到最多的东西，我在程序员互动联盟期待您的加入