把小图片内链到 HTML里 用于加快读取速度

在HTML网页或者是HTA程序里, 你可以显示图片却不用引用外部的图片. 原理就是 IMG 标签支持内链图片 base64 格式. 任何二进制文件都是由 8位一个字节一个字节组成的, 但是可打印的字符只是用到了7位 ASCII 1-127. 如果使用base 64 format 来表示图片那么 3个字节 (3×8) 实际上是会用 4个字节(4×6)来表示.

HTML 插入内链图片的语法是: Click To Tweet

<img src=’data:image/jpeg;base64,DATA-DATA-DATA….’>

比如下面的清纯美女图就是完全内链 INLINE到HTML代码中

Z 把小图片内链到 HTML里用于加快读取速度互联网程序设计网站信息与统计软件资料

支持的图片类型有 image/jpeg, image/png, image/bmp, 和 image/gif.

方便转换的API

准备了一个API可以方便转换网上的图片为需要的文本数据:

https://helloacm.com/api/image-to-base64/?url=https://justyy.com/YY.png

会返回一串BASE64字符串:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAA中间很多省略了YII=

可以选择这个免费的图床 https://uploadbeta.com 上传图片然后就可以把图片的URL做为参数传到上面的API中.

什么时候使用?

1. 当图片较小时
2. 图片不需要时常更新
3. 服务器支持gzip压缩 HTML. 用这种方法会无形中增加图片大小1/3 并且不支持缓存(如果是以图片文件存在的话浏览器能缓存)

PHP 源代码

  $url = '';
  if (isset($_GET['url'])) {
    $url = trim($_GET['url']); 
  }
  $data = '';
  if ($url) {
    $size = getimagesize($url);  
    switch ($size['mime']) { 
        case "image/gif": 
            $data .= "data:image/gif;base64,";
            break; 
        case "image/jpeg": 
            $data .= "data:image/jpeg;base64,"; 
            break; 
        case "image/png": 
            $data .= "data:image/png;base64,"; 
            break; 
        case "image/bmp": 
            $data .= "data:image/bmp;base64,"; 
            break; 
    } 
    if ($data) {    
      $data .= base64_encode(file_get_contents($url));
    } 
  }
  header("Access-Control-Allow-Origin: *");
  header('Content-Type: application/json');
  die(trim($data));

  $url = '';
  if (isset($_GET['url'])) {
    $url = trim($_GET['url']); 
  }
  $data = '';
  if ($url) {
    $size = getimagesize($url);  
    switch ($size['mime']) { 
        case "image/gif": 
            $data .= "data:image/gif;base64,";
            break; 
        case "image/jpeg": 
            $data .= "data:image/jpeg;base64,"; 
            break; 
        case "image/png": 
            $data .= "data:image/png;base64,"; 
            break; 
        case "image/bmp": 
            $data .= "data:image/bmp;base64,"; 
            break; 
    } 
    if ($data) {    
      $data .= base64_encode(file_get_contents($url));
    } 
  }
  header("Access-Control-Allow-Origin: *");
  header('Content-Type: application/json');
  die(trim($data));

参考:

1. http://www.techerator.com/2011/12/how-to-embed-images-directly-into-your-html/

2. https://rot47.net/base64encoder.html

3. https://steakovercooked.com/src/online_encode/

英文: https://helloacm.com/embed-images-in-html-source/

GD Star Rating
loading...

本文一共 304 个汉字, 你数一下对不对.

把小图片内链到 HTML里用于加快读取速度. (AMP 移动加速版本)
上一篇: 推荐一款 CHROME 插件 - Wappalyzer
下一篇: Schema 主题下的非安全元素 (Insecure HTTPS)

赞赏我的几个理由.

¥ 打赏支持

扫描二维码，分享本文到微信朋友圈

6bb5373443ffe1caba1930d311bffd4f 把小图片内链到 HTML里用于加快读取速度互联网程序设计网站信息与统计软件资料

5 条评论

shrek

Google pagespeed 其中有一项就是这个,有了pagespeed wpsupercache 基本可以下岗了

shrek

另外通过这两天访问,这个收费主题好像并不太友好,起码外观是这样,比如这篇就有字符串溢出div了

- JustYY.com 小赖子的英国生活和资讯
  
  啥是溢出 DIV?
  
  - shrek
    
    我说的不专业就是内容超出div了,你可以用手机看一下这个页面
    
    - JustYY.com 小赖子的英国生活和资讯.
      
      GOOGLE 认为是手机友好的你用的是什么手机?
      https://www.google.co.uk/webmasters/tools/mobile-friendly/?url=https%3A%2F%2Fjustyy.com%2Farchives%2F2313

方便转换的API

什么时候使用?

PHP 源代码

参考:

相关文章：

5 条评论

评论