【专业领域】你所不知道的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标签中的宽高属性来修改;

原文发布于微信公众号 - 程序员互动联盟(coder_online)

原文发表时间:2015-04-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

Xcelsius(水晶易表)系列13——选择器应用(图标与图片背景)

今天继续分享关于选择器的用法——使用图标配合背景完美模拟个性选择器。 今天的内容几乎没有任何新东西,所使用到的部件仍然是之前用到过的常用痛几天——条形图、柱形图...

31260
来自专栏知晓程序

「大众点评点餐」小程序开发经验 03:事件联动

李超,美团点评前端开发工程师,2 年 web 开发经验,现在是美团点评点餐团队的一员。

15040
来自专栏数据小魔方

Xcelsius系列的1——初识动态仪表盘

今天是Xcelsius系列的第一篇——初识动态仪表盘。 该案例将会讲解一个简单的电信公司月度业务分析数据模型,通过本案例你可以简单的了解水晶易表中的图表部件(柱...

32250
来自专栏吴小龙同學

Android 8.0 自适应图标

857100
来自专栏IMWeb前端团队

移动端重构实战系列6——icon与图片

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

20350
来自专栏Python中文社区

高阶爬虫实战:破解极验滑动验证码

今天给大家带来的是极验验证码的selenium破解之法,是不是有点小激动呢,小伙伴们等不及了,让我们赶紧直入主题吧。

75560
来自专栏进击的君君的前端之路

CSS3简介

10740
来自专栏腾讯社交用户体验设计

你离高效制作动画只差一篇文章的距离

18120
来自专栏hrscy

Unity地形基础

![Uploading 2016-05-02_20-09-56_318489.png . . .]](http://upload-images.jianshu....

60720
来自专栏杨俊标的专栏

CSS 路径动画工具的诞生

每当重构页面的时候,除了设计师精致的设计稿,还需要在页面这个蛋糕上放上一个樱桃,无论蛋糕多么美味,但樱桃的点缀却更容易吸引住顾客的目光,对,就是那些细微的动画....

67700

扫码关注云+社区

领取腾讯云代金券