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

相关文章

来自专栏Coco的专栏

【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

1335
来自专栏前端笔记

【 前端相关 网页组件 】纯CSS3实现 “图片轮播” 效果

使用纯CSS3代码实现简单的图片轮播 image.png 原理介绍 跑马灯图 : image.png 灯图原理 : image.png 基本思路 1.基本...

2838
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门

将元素高度设置为0, 使用内边距将盒子撑开,给盒子使用overflow:hidden; 将文字隐藏。

432
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定...

3056
来自专栏IMWeb前端团队

移动端web开发入门笔记

移动端web开发基本上分为三种: 移动端网页开发 传统的页面开发,可以参考手机腾讯网。 移动端web app开发 简单来说就是在开发中使用一些浏览器私有的方法...

1989
来自专栏Coco的专栏

滚动视差?CSS 不在话下

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的...

1927
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。

41010
来自专栏腾讯AlloyTeam的专栏

移动端输入框填坑系列(一)

输入在移动端是一个很常用的功能,那么输入框必然是一个很重要的部分。然而,移动端输入框总会遇到各种各样的问题,无论是样式还是ios和android两端体验不一致都...

1.2K0
来自专栏HTML5学堂

CSS3实现loading图

HTML5学堂:学习CSS3,重要的并不是那几个命令,而是如何应用CSS3的知识实现网站中的效果,换句话说,“只有想不到,没有做不到”。在这个效果当中,主要用到...

3504
来自专栏Coding迪斯尼

VUE+WebPack游戏设计:实现盒子爆破效果和界面美化

1253

扫描关注云+社区