页面图片加载慢解决方案

最新推荐文章于 2024-07-19 18:04:08 发布

cl11992

最新推荐文章于 2024-07-19 18:04:08 发布

阅读量1.3w

点赞数 2

分类专栏： CSS 浏览器前端文章标签：前端 css 解决方案 base64

本文链接：https://blog.csdn.net/cl11992/article/details/85210444

版权

浏览器同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

一、问题：

页面图片加载很慢或访问图片路径，服务器返回图片慢

二、解决方案

方案一、压缩图片

如果当前图片为png格式，你可以转化成jpg格式，图片体积会小很多，这样可能问题会直接解决

方案二、使用base64替换图片

<img src=“http://www.aimks.com/images/wg.png”/>

替换一个写法

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEU
gAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZS
BJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR
0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1C
KSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjz
MVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处呢，就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。