图片优化之Base64解决方案
2018-09-14 本文已影响101人
捷搜索
本文来自于自家博客站 捷搜索 ，其中内容部分来源于 斗捷网络 。
今天给大家讲述图片优化之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>
