你所不知道的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，程序员互动联盟，可以与大牛在线随时讨论自己感兴趣的话题，让自己用最少的时间学到最多的东西，我在程序员互动联盟期待您的加入