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

JustYY.com 小赖子的英国生活和资讯

9 years ago

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

HTML 插入内链图片的语法是: Share on X

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

比如下面的清纯美女图就是完全内链 INLINE到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));