本文來自于自家博客站 捷搜索 ，其中內(nèi)容部分來源于 斗捷網(wǎng)絡 。
今天給大家講述圖片優(yōu)化之Base64圖片的使用，對網(wǎng)站優(yōu)化有過思考和行動的人都知道，圖片優(yōu)化占比實屬重中之重。之前也介紹過WebP格式圖片的優(yōu)勢及使用，Webp圖在保證質(zhì)量的情況下能把體積壓縮到最小，比PNG、JPG等其他格式圖壓縮后的圖片體積都要小，但是有一點，之前也提到過，體積比較小的圖片（10K以下的樣子）轉(zhuǎn)化成Webp反而體積變大了，這樣的圖片就沒必要轉(zhuǎn)化成Webp了，那么這些小圖就可以使用我們今天的主角Base64了。
而圖片的 base64 編碼可能相對一些人而言比較陌生，Base64是網(wǎng)絡上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一，Base64就是一種基于64個可打印字符來表示二進制數(shù)據(jù)的方法。當然這樣的介紹我們并不懂，在本文主要讓你知道什么是圖片的 base64 編碼，為什么我們要用它，我們?nèi)绾问褂貌⑶曳奖愕氖褂盟?/p>
優(yōu)點
1.減少請求
一般的圖片，每一個圖片都要向服務器請求一次，而Base64是隨著 HTML 的下載同時下載到本地，那就意味著無論有多少張圖片都不用向服務器再次請求，那么就給服務器減少了一定的壓力，頁面的加載速度也會相對變快。
2.不用儲存
圖片生成Base64后，Base64碼就代表這張圖片，同時也不會依賴于這張圖片，這張刪除了也無所謂，直接就使用這個Base64碼就可以了，圖片也不用存儲到服務器上，有沒有這張圖片對網(wǎng)站沒有什么影響了，那么給服務器也能省卻一定的存儲空間。
3.積少成多
雖然是一張小小的圖片，不會給性能帶來多大的變化，但是如果網(wǎng)站里有好多這樣的圖片呢，那么無疑給網(wǎng)站性能帶來很大的優(yōu)化。嗖嗖的！
生成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>圖片轉(zhuǎn)成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>
