图片优化之Base64解决方案_jsbarcode base64图片质量设置-优快云博客

本文来自于自家博客站捷搜索，其中内容部分来源于斗捷网络。

今天给大家讲述图片优化之Base64图片的使用，对网站优化有过思考和行动的人都知道，图片优化占比实属重中之重。之前也介绍过WebP格式图片的优势及使用，Webp图在保证质量的情况下能把体积压缩到最小，比PNG、JPG等其他格式图压缩后的图片体积都要小，但是有一点，之前也提到过，体积比较小的图片（10K以下的样子）转化成Webp反而体积变大了，这样的图片就没必要转化成Webp了，那么这些小图就可以使用我们今天的主角Base64了。

而图片的 base64 编码可能相对一些人而言比较陌生，Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。当然这样的介绍我们并不懂，在本文主要让你知道什么是图片的 base64 编码，为什么我们要用它，我们如何使用并且方便的使用它。

优点

1.减少请求

一般的图片，每一个图片都要向服务器请求一次，而Base64是随着 HTML 的下载同时下载到本地，那就意味着无论有多少张图片都不用向服务器再次请求，那么就给服务器减少了一定的压力，页面的加载速度也会相对变快。

2.不用储存

图片生成Base64后，Base64码就代表这张图片，同时也不会依赖于这张图片，这张删除了也无所谓，直接就使用这个Base64码就可以了，图片也不用存储到服务器上，有没有这张图片对网站没有什么影响了，那么给服务器也能省却一定的存储空间。

3.积少成多

虽然是一张小小的图片，不会给性能带来多大的变化，但是如果网站里有好多这样的图片呢，那么无疑给网站性能带来很大的优化。嗖嗖的！

生成Base64方法

1.php生成方案

<?php
$image_file = './msg.png';
$image_info = getimagesize($image_file);
$image_data = fread(fopen($image_file, 'r'), filesize($image_file));
$base64_image = 'data:' . $image_info['mime'] . ';base64,' . chunk_split(base64_encode($image_data));
echo $base64_image;
?>

2.js生成方案

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片转成base64码</title>
</head>
<body>
<input accept="image/*" name="img" id="ImgFile" type="file">
<textarea id="ImgBase64" name="img_base64" style=" width:820px"></textarea>
<script type="text/javascript">
    document.getElementById("ImgFile").onchange = function () {
        var file = this.files[0];
        r = new FileReader();  //本地预览
        r.onload = function(){
            document.getElementById('ImgBase64').value = r.result;
        }
        r.readAsDataURL(file);    //Base64
    }
</script>
</body>
</html>