在网页中嵌入图片

在网页中加入一张图片很简单,只需要插入一个<img>标签就可以了。对于大多数图片来说,使用<img>标签很方便,但它有两个小问题:

  • 需要上传一张图片,可能需要额外的图床,管理起来相对麻烦;
  • 对于网速比较慢的用户来说,需要多开一个连接下载图片,有时候会下载不到,影响用户体验。

所以,一些小图片,与其放在图床上,还不如直接嵌在网页里。图片本身就小(比如小于32k),下载速度很快,而且省去了建立连接的时间,方便快捷。唯一不好的地方是无法设置图片缓存,因此不能对重复出现的图片做这种优化。

怎么把图片直接嵌在网页里?只需要使用Data URI标记就可以了,它形如<img src="data:image/png;base64,xxxx"/>。其中xxx是图片的base64编码,image/png表示图片是png格式,你也可以使用其它格式。示例如下,图片是本页地址的二维码,查看源代码就可以看到它的base64形式。

QR Code

这种方式在主流的浏览器(IE、Chrome、Firefox)中都支持,放心使用。


1 条评论 添加

发表评论

电子邮件地址不会被公开。 必填项已用*标注