前端图片优化方案

在知乎上看见的一个回答(图片较多的网站,如淘宝京东、美丽说花瓣、QQ空间、百度图片等都采用哪些技术优化图片展示?),自己做一些测试以及添加一些自己的理解整理成章。

1.使用base64编码代替图片

Base64目前主要用于HTML5、移动开发等不考虑IE6的场景中。图片大小不宜超过2KB,不然编码出来的会很长。

使用方法:

<img src="base64编码后的字符串">

或者CSS中

background-image: url(ase64编码后的字符串);

2.使用css sprite合并图片

在线css sprite:http://css.spritegen.com/

图片不宜太大

3.图片延迟加载

在我的项目中,使用的是angular框架,用的第三方插件me-lazy-load.js对界面多图进行懒加载。

使用方法:

<img lazy-src="img/login.jpg" animate-visible="true" animate-speed="0.5s" alt="用户登录">

4.使用css、svg、canvas或iconfont代替图片

CSS可以使用为元素before、after实现简单的绘图

如图:

ul.create-nav>li span:after, ul.create-nav>li span:before {
    content: " ";
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 20px 5px 20px 25px;
    border-color: transparent;
    pointer-events: none;
}
ul.create-nav>li span:before {
    position: absolute;
    left: 0;
    border-left-color: #F3F3F4;
}
ul.create-nav>li span:after {
    position: absolute;
    right: -20px;
    z-index: 1;
    border-left-color: #D7D7D7;
}

5.加载对应尺寸

这是针对不同终端,加载符合屏幕大小的不同尺寸的图片,主要针对移动端。

6. 预加载

待续...

7.更好的图片格式

待续...

时间: 2024-10-28 22:55:13

前端图片优化方案的相关文章

RecyclerView使用 及 滑动时加载图片优化方案

RecyclerView使用 及 滑动时加载图片优化方案 简述 本篇博文主要给大家分享关于RecyclerView控件的使用及通过继承RecyclerView来实现滑动时加载图片的优化方案,也同样能解决防止图片乱序的问题,之前有在网上有看到大神对Android中ListView异步加载图片乱序问题进行过分析,并深入剖析原理后分别给出了3种对应的解决方案:一 .使用findViewWithTag.二.使用弱引用关联.三.使用Volley框架提供的NetworkImageView. 看了之后思索了很

前端性能优化方案索引

作者:HaoyCn 网址:http://segmentfault.com/a/1190000003821219 陆续整理和不断更新网络上给出的前端性能的优化方案. 这里只是做一个总概括式的索引,每一个方案都十分值得推敲和细说. 1 请求和响应 缓存控制 请求头里,可以发送 If-Modified-Since 以及 If-None-Match 等信息,来询问服务端请求内容是否有更新,如果没有更新,可返回304,告诉浏览器使用缓存,避免重新下载资源.Pragma 和 Cache-Control 等也

前端性能优化方案

前端开发性能优化方案 在JS中尽量减少闭包的使用(原因:闭包会产生不释放的栈内存) A:循环给元素做事件绑定的时候,尽可能的把后期需要的信息(例如索引)存储到元素的自定义属性上,而不是创建闭包存储 B:可以在最外层形成一个闭包,把一些后续需要的公共信息进行存储,而不是每一个方法都创建闭包(例如单例模式) C:尽可能的手动释放不被占用的内存 ... 尽量合并CSS和JS文件(把需要引入的CSS合并为一个,JS也是合并为一个),原理是在减少HTTP请求次数,尽可能的把合并后的代码进行压缩,减小HTT

CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

前端页面优化方案

前端页面优化主要有2方面: 1.页面级别 一.减少http请求次数,每个请求都是有成本,请求多了数据显示慢,影响页面渲染. 实现方法:1.合理设置http缓存  将请求的内容缓存在本地,下次用时不用再去请求.2.合并页面所用的CSS图片,使加载图片的次数减少. 二.将JS文件置于文档底部,使其不影响页面的渲染(js阻塞会影响页面的渲染),而且尽量不要用内联JS,如果用尽量异步执行它. 三.CSS前置,将CSS文件尽量放置在head中,使其不影响页面渲染. 四:尽量减少JS文件和CSS文件的个数,

前端性能优化方案都有哪些?

前端是庞大的,包括 HTML. CSS. Javascript.Image .Flash等等各种各样的资源.前端优化是复杂的,针对方方面面的资源都有不同的方式.那么,前端优化的目的是什么 ? 1. 从用户角度而言,优化能够让页面加载得更快.对用户的操作响应得更及时,能够给用户提供更为友好的体验. 2. 从服务商角度而言,优化能够减少页面请求数.或者减小请求所占带宽,能够节省可观的资源. 总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用. 前端优化的途径有很多,按粒度大致可以分

前端js优化方案(连续更新)

最近在读<高性能javascript>,在这里记录一下读后的一些感受,顺便加上自己的一些理解,如果有兴趣的话可以关注的我的博客http://www.bloggeng.com/,我会不定期发布一些前端教程还有前端干货,话不多说,进入我们的正题 一.js优化之加载 1.script标签放在底部,不要放在head标签: 2.尽量减少js文件数量 3.给script标签添加一个defer属性,defer属性指明所含的脚本不会修改DOM,因此代码能安全地延迟执行. <script type=&qu

前端资源优化方案理解

写这个的起源是知乎上的一个答案,有兴趣可以看一下https://www.zhihu.com/question/20790576 配置超长时间的本地缓存 —— 节省带宽,提高性能 采用内容摘要作为缓存更新依据 —— 精确的缓存控制 静态资源CDN部署 —— 优化网络请求 资源发布路径实现非覆盖式发布 —— 平滑升级 这个图挺好的我就盗图啦~~ 1.利用304本地缓存 如果每次用户访问页面都要加载,很浪费呀,于是我们可以用304缓存呀 304这个状态码的含义是“服务器端没有更新”,也就是说客户端的文

web前端图片优化的问题

可借鉴参考更多优化知识参考 https://www.jianshu.com/p/b55e951e9f03 https://www.cnblogs.com/zhuzhenwei918/p/6935426.html?utm_source=itdadao&utm_medium=referral 原文地址:https://www.cnblogs.com/-ting/p/12003811.html