总所周知H5全称HTMl5，而HTML基本是用来书写网站的一种语言。一个网站里到底是由哪些东西组成的呢，基本分为三大类：
第一大类是文字类、第二大类是表单类、而我们今天的主要内容是来谈谈第三大类图片类。
想要在网站上放上一张图片可不是用代码能实现的必须由外界引入，代码模块则是输入一段URL地址栏来加载图片。话说加载一张图片常见的方式有两种，一是使用插入实体图片img标签 ，二是使用背景图的方式来实现。两种方式都可以在网站上显示图片，我们就需要去了解它们的区别。第一种是实体图片 它占文档流 位置调动起来比较麻烦需要通过外边距和定位来调整位置。第二种是使用背景图片的方式，这种方式可以使文字在图片上方去显示，并且可以通过背景图定位属性来调整其位置。通常制作我们都会选择背景图来制作图标标准等，因为随着互联网的发展，我们对网页的要求越来越高。一个网站不单要美观要有多元化的功能还要考虑网页加载速度问题。说白了我们加载一个网页和下载一个网页是没多大分别的，文件的大小就成为了我们打开页面速度的突破口。于是有了一个叫做精灵图的技术单身了，它是运用PS将多张小图标背景整合在一起的一种技术，人们发现将多张图片放在一起可以比原来零碎的图片大小远远来的要小，这样我们就可以放在一张图上然后通过背景图定位来方便的调整背景图片的位置，这样的一种技术我们称之为精灵图技术。但它也有自己的弊端，就是增加了开发人员的负担。我们需要换位思考如果你是老板，有这样一种技术可以使用户打开自己的网站速度大大的提升而唯一的弊端是增加了自己员工的负担，我相信每个boss的决定都应该是一样的。
但今天还要给大家介绍一种图片显示的技术，图片整合技术固然的好，但在与图片切换和换色换图方面略显不足，需要精确的去计算。所以在这里我要给大家介绍第三种网页图片是新技术——文字图片技术。这种技术起初是为了统一所有网页文字的字体诞生的，使用户可以使用服务器字体，但人们发现服务器的字体就可以自定义字体形状，只要加载自定义的字体库就可以做到这样我们只需要打一个文字就能显示一个图标图片，甚至可以改变文字颜色来改变图片颜色通过文字大小调节来调整图片大小，这样使我们使用图片变的更加方便。但是网页就好像受了诅咒一样，所有方便的东西都有其弊端，文字图片的弊端在于它需要著作字体，这又牵涉到了设计的一项新工作。好在现在网上有很多别人做好的免费图库供我们选择，有就用没有就还是运用图片整合技术。
来源：千锋HTML5