【专业领域】你所不知道的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 条评论
登录 后参与评论

相关文章

来自专栏Material Design组件

Human Interface Guidelines — Navigation

1453
来自专栏数据小魔方

数据地图系列1|热力地图(手工DIY)

今天要跟大家分享数据地图第一讲——热力地图(手工DIY)! 昨天的推送已经跟大家分享过如何获取、导入矢量地图素材,今天教大家怎么编辑矢量素材,进而制作出一幅数据...

3567
来自专栏苍云横渡学习笔记

【JavaSE(四)】Java面向对象(中)

1574
来自专栏AILearning

TensorFlow架构

我们设计了TensorFlow进行大规模的分布式训练和推理,但它也足够灵活,以支持新机器学习模型和系统级优化的实验。 本文档描述了使得这种组合规模和灵活性成...

3457
来自专栏腾讯移动品质中心TMQ的专栏

测试建模 :从尔康的鼻孔说开来,重要的用例写三遍

看完本文你会了解以下内容 1. 什么是SUT模型 2. 测试建模在工作中究竟是怎样一个过程 3. 从业务流程到测试用例我们忽略了什么 4. 测试建模会有哪些产出...

1795
来自专栏MixLab科技+设计实验室

UI2Code 之 利用 antd.sketchapp 生成训练数据

封面由ARKie智能设计助手生成 Ant Design 最近发布了 antd.sketchapp : 使用 skpm 构建工具,基于 React Sketch....

3217
来自专栏ytkah

通过图片定位给一张图片添加多个链接

  我们在建站的时候使用图片素材能为整个网站增色不少,但是太多的边框按钮图片会增加请求次数,从而降低网站加载速度,这时我们可以考虑将多个小图片元素集合到一张图片...

1963
来自专栏FreeBuf

一种绕过限制下载论文的思路

注:本文下面的内容仅讨论绕过思路,作为技术交流之用。大家下载论文还是应该通过正规渠道,付费下载,尊重各位站长的劳动成果。敏感图片和代码中涉及站点的内容均已打码。

1252
来自专栏拂晓风起

createjs入门

1003
来自专栏IMWeb前端团队

chrome开发者工具-Timeline

最近发现,许多前端开发人员(包括作者我哈),对chrome的开发者工具中的使用并不是特别深入,而本文时对chrome开发者工具Timeline的一个...

1896

扫码关注云+社区