天天看點

data:image/jpeg;base64 php,利用Data URL(data:image/jpg;base64,)加速網頁加載的方法

先來看下下邊這段代碼:

data:image/jpeg;base64 php,利用Data URL(data:image/jpg;base64,)加速網頁加載的方法

JQAlAAACi5SPqcvtDyGYIFpF690i8xUw3qJBwUlSadmcLqYmGQu6KDIeM13beGzYWWy3DlB4IYaM

k+Dso2RWkFCfLPcRvFbZxFLUDTt21BW56TyjRep1e20+i+eYMR145W2eefj+6VFmgTQi+ECVY8iG

xcg35phGo/iDFwlTyXWphwlm1imGRdcnuqhHeop6UAAAIfkEBQoAAgAsEAACAAQACwAAAgWMj6nL

XAAh+QQFCgACACwVAAUACgALAAACFZQvgRi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwXABEA

DAADAAACBYyPqcsFACH5BAUKAAIALBUAFQAKAAsAAAITlGKZwWoMHYxqtmplxlNT7ixGAQAh+QQF

CgACACwQABgABAALAAACBYyPqctcACH5BAUKAAIALAUAFQAKAAsAAAIVlC+BGL3Z3IlxUmUuhtR2

LzHhsiEFACH5BAUKAAIALAEAEQAMAAMAAAIFjI+pywUAIfkEBQoAAgAsBQAFAAoACwAAAhOUYJnA

agwdjGq2amXGU1PuLEYBACH5BAUKAAIALBAAAgAEAAsAAAIFhI+py1wAIfkEBQoAAgAsFQAFAAoA

CwAAAhWUL4AIvdnciXFSZS6G1HYvMeGyIQUAIfkEBQoAAgAsFwARAAwAAwAAAgWEj6nLBQAh+QQF

CgACACwVABUACgALAAACE5RgmcBqDB2MarZqZcZTU+4sRgEAIfkEBQoAAgAsEAAYAAQACwAAAgWE

j6nLXAAh+QQFCgACACwFABUACgALAAACFZQvgAi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwB

ABEADAADAAACBYSPqcsFADs=

“>

其實“data:image/gif;base64,R0lGODlhJ……” 就是一張圖檔的Data URL,就是利用base64編碼把圖檔資料翻譯成标準ASCII字元。

等同于:

data:image/jpeg;base64 php,利用Data URL(data:image/jpg;base64,)加速網頁加載的方法

顯示結果:

data:image/jpeg;base64 php,利用Data URL(data:image/jpg;base64,)加速網頁加載的方法

Data URL它現将圖檔轉換成base64編碼,以文本的形象随着檔案加載。

再由浏覽器在本地直接繪制圖檔,不是從伺服器加載,是以節省了HTTP連接配接,起到加速網頁的作用。

文法:

data:image/jpg;    聲明資料協定及類型名稱

base64,               編碼形式為base64

/9j/4AAQSkZ……    base64編碼結果

最後附上Data URL的生成方法(PHP):

//php讀取和儲存base64編碼的圖檔内容

header('Content-type:text/html;charset=utf-8');

//讀取圖檔檔案,轉換成base64編碼格式

//$image_file = './loading.gif';

$image_file = 'http://www.lrxin.com/images/loading.gif';

$image_info = getimagesize($image_file);

$base64_image_content = "data:{$image_info['mime']};base64," . chunk_split(base64_encode(file_get_contents($image_file)));

?>

data:image/jpeg;base64 php,利用Data URL(data:image/jpg;base64,)加速網頁加載的方法

需要注意:本方法适合于小圖檔,大圖檔就不要考慮了,另外IE8以下浏覽器不支援這種方法。

用這種方法會加重用戶端的CPU和記憶體負擔,總之有利有弊。

IE8 之前的浏覽器不支援 Data URL

簡單的說,data類型的Url大緻有下面幾種形式。

data:,

data:text/plain,

data:text/html,

data:text/html;base64,

data:text/plain;charset=UTF-8;base64,

data:text/css,

data:text/css;base64,

data:text/javascript,

data:text/javascript;base64,

data:image/gif;base64,

data:image/png;base64,

data:image/jpeg;base64,

data:image/x-icon;base64,