自给自足,轻松将图片图片内嵌到HTML

翅膀的初衷

发表于2015-03-25 14:45:33

自给自足,轻松将图片图片内嵌到HTML

1.为什么要将图片内嵌到HTML?

针对于这个问题,我们有如下几种答案

1)能减少并发请求,适合且合理的使用,能提高网站的访问速度

2)便于分享,完全可以将需要的图片,样式,JS与内容放到一个HTML页中,而不会有零零碎碎的大量文件。

3)在某些网站发表文章时,不需要第三方图床也可以发表图片。

2.如何将图片内嵌到HTML?

我们的这种用法,被称做Data URI scheme,它是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。

格式如下:

data:类型;base64,BASE64字符串

类型支持 text/plain,text/css,text/javascript,image/gif,image/png,image/jpeg,image/x-icon

支持在CSS的background或者img的src中使用Data URI scheme,如:

    <div style="width:161px; height:60px; background:url(data:image/gif;base64,数据) no-repeat"></div>
    <img src="data:image/gif;base64,数据" />

效果如下:

3.如何将图片转换为BASE64字符串

网上有很多转换工具,不过即然我们文章标题叫自给自足,那么肯定会提供自己的解决方案。假如你会C#,那么你只需要使用下面二行代码就可以做到。PHP也有类似的函数。

byte[] bs = System.IO.File.ReadAllBytes(@"d:\www.jiniannet.com.gif");
Response.Write(Convert.ToBase64String(bs));

4.它有何坏处

1)可能会使你的HTML或者CSS文件过大

2)img使用Data URI scheme,图片文件无法被缓存