圖片優化之Base64解決方案
阿新 • • 發佈：2018-12-09
本文來自於自家部落格站 捷搜尋 ，其中內容部分來源於 鬥捷網路 。
今天給大家講述圖片優化之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>