图片优化之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>

图片优化之Base64解决方案相关推荐

前端优化-图片打包处理base64的原因
为什么要将图片打包成base64格式首先我们知道在前端技术中每一张图片的加载都会进行一次http请求,而每次http请求都是需要时间的,所以当网页中图片资源很多的时候,如果不进行base64转译,就 ...
Android 超清大尺寸图片压缩转Base64中卡顿/速度优化问题整理（在子线程压缩Bitmap卡的主线程进度条走不动了。。。）
最近遇到需求是前后端传输图片使用的是Base64,但是前端(Android 端)图片很大(尺寸很大4480 × 2520,质量也很大7-10M),需要压缩到一定尺寸(1280 × 960,当然还可以压 ...
浅析用Base64编码的图片优化网页加载速度
想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片.如果图片很多的话,就会产生大量的http请求,从而影响页面的加载速度.所以现在有一种 ...
前端性能优化（图片优化）
从输入URL到页面加载完成的过程:首先通过DNS(域名解析)把URL解析为对应的IP地址,然后与该IP地址确定的服务器建立起TCP网络连接.随后向服务器发送HTTP请求,服务器处理完HTTP请求后把目 ...
前端的图片优化的6种方案
前端的图片优化的6种方案 1.使用base64编码代替图片场景:适用于图片大小小于2KB,页面上引用图片总数不多的情况原理:将图片转换为base64编码字符串inline到页面或css中优势:减 ...
前端性能优化之图片优化
图片优化的价值为什么要做图片优化?图片优化的收益有多大? Google官方的最佳实践中关于图片优化有下面这样一段描述: 对于网页来说,在所下载的字节数中,图片往往会占很大比例.因此,优化图片通常可以 ...
html本地路径图片转成base64,canvas-toDataURL()将图片转为dataURL（base64）
将图片转为base64的好处将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地 ...
图片优化之下一代图片格式WebP和AVIF
点击上方"LiveVideoStack"关注我们本文最初由 Karanjeet Singh 在 Adobe Tech Blog上发表.已获作者授权翻译和发布. 原文网址: htt ...
前端如何实现音乐盒胶盘的转动_郑州Web前端入门教程之如何实现图片优化？
统计数据显示,图片内容已经占据互联网内容总量的62%,因此想要优化网站性能,图片绝对是优化的热点和重点.图片优化是Web前端工程师必须要掌握的知识点,在接下来的郑州Web前端入门教程就给大家讲解一下如 ...

图片优化之Base64解决方案

优点

生成Base64方法

图片优化之Base64解决方案相关推荐

最新文章

热门文章