详解网站中图片日常使用以及优化手法


Posted in Javascript onJanuary 09, 2017

前言: 最近新到一个团队,才意识到基础的薄弱,牛人遍地,还是好好学习,天天向上。

一直都觉得网站优化的重点是图片,图片的使用也是博大精深。有必要总结一下图片的日常使用以及优化手法~

总的来说,图片的使用分为background和img两种,而优化方向来说分为减少请求,减少大小和清晰度 三个方面

一. background和img的区别:

日常开发中使用的场景区别:

img是内容部分的东西,background-image是修饰性的东西。

加载方式的区别:

在网页加载的过程中,以css背景图存在的图片background-image会等到结构加载完成(网页的内容全部显示以后)才开始加载,

而html中的标签img是网页结构(内容)的一部分会在加载结构的过程中加载,换句话讲,网页会先加载标签img的内容,再加载背景图片background-image,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。

二. 平时使用图片有以下几种方式:

1. 图片内联 (base 64)          减少http请求

2. 图片雪碧图(多张图片合并)  减少http请求

3. webp     在压缩方面比 JPEG 格式更优越,并能节省大量的服务器带宽资源和数据空间。与 JPEG 相同,WebP 也是一种有损压缩,主要优势在于高效率。在质量相同的情况下,WebP 格式图像的体积要比 JPEG 格式图像小 40%。

4. svg  

三. 日常图片展示主要有以下三种形式

1.普通图片

顾名思义,非常普通的图片,不需要因为屏幕扩张或者缩小改变宽度以及高度, 以京东手机网站为例,常见于以下布局

不管在任何手机下面,该图片都是以100*100的形式展示,对于这种图片,可以直接给一个宽度100,高度100,处理起来也非常简单粗暴

详解网站中图片日常使用以及优化手法

2.图片的宽高比

此种常见于响应式网站,以下为京东手机网站举例

在iphone5 及320*568的手机上,该图片显示的宽度和高度分别如下

详解网站中图片日常使用以及优化手法

在iphone6 即375*667的手机上,该图片显示的宽度和高度分别如下

详解网站中图片日常使用以及优化手法

不难看出,上面的宽高比实际上为同一个数值,这样既可以保证该图片适配屏幕,又不让图片变形,因为这种场景,也产生了以下需求

1.列表是响应式的,在不同浏览器下要自适应宽度高度

2.图片在自适应中,图片的长宽比要保持不变

在实际开发中,我们通常会设置图片的宽度为百分比来满足自适应,不设置高度来满足长宽比不变,但是这样又会出现一种问题,在图片没有加载出来的时候,浏览器是无法计算出图片的实际尺寸的,当图片加载出来后,再把容器撑高,造成页面抖动 

优化方案:

1. 首先,按照往例,先上一个知识点

块级元素(div,p)的padding设置为百分比的时候,是按照父级块的宽度来定的,所以由padding(padding-top/padding-bottom)来撑开容器高度,而不是height,保证了容器的宽高比例。图片在绝对定位于块级元素(div,p)下面即可。

代码实现:

.placeholder{
 height: 0;
 padding-bottom: 56.25%; /* 16:9 */
 position: relative;
 width: 100%;
}
.placeholder .img{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}

3.背景图片

background这个属性花样很多,也很杂,常见的有以下几种

  1. background-color  
  2. background-position 
  3. background-size
  4. background-repeat
  5. background-attachment
  6. background-image

在定义背景属性的时候,可以分开对单个属性进行赋值,通常建议使用下面这个属性,而不是分别使用单个属性,因为需要键入的字母也更少。

body{ 
 background: #00FF00 url(bgimage.gif) no-repeat fixed top;
 // background: color url() repeat attachment position
 }

1. background-position 属性  这个属性设置背景原图像的位置

常见使用的值:顺序方面,首先是 x 轴,其次是 y 轴,

详解网站中图片日常使用以及优化手法

2.background-repeat   比较简单,设置背景图片是否重复

3.background-size       在响应式布局中背景图片上用得比较多的一个属性

兼容性:

  • 安卓4.3- 不支持将background,所以必须单独申明这个样式   [所以background-size一般不写进background中,而是单独 background-size:]
  • 安卓4.3- 不支持contain

常见属性: auto ,cover,contain, 100%

详解网站中图片日常使用以及优化手法

详解网站中图片日常使用以及优化手法

从上图可以看到,contain其实等同于background-size: 100% auto;cover等同background-size: auto 100%。

但是,如果背景图像是一张纵向的图(高>宽),那么cover应该等同于background-size: 100% auto;contain等同background-size: auto 100%。

在实际开发中,最常用到的值是cover,如果容器已经有了宽高(当然这里的宽高是指可以随着机型变化的),比如全屏,我们就直接用cover了;而如果容器没有宽高,那就又回到了第二个问题(图片的宽高比),我们可以使用图片或者把设置背景图的这个容器设置成我们图片的宽高比,那样再使用cover或contain都可以。

四. 优化方法:

1. 减少请求

将图片变成base64内联图片, 合并成雪碧图,

以上2种方法在目前一些流行的自动化构建工具都会自动帮忙生成,使用非常方便

适用对象: 不经常改变的icon小图标

2. 减少大小

压缩图片,使用webp格式图片

3.提高清晰度

由于目前的手机高清度越来越高,日常开发中使用2倍图,3倍图的方法

常见优化方法:

1.图片懒加载

优点:通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。

懒加载有多种场景,但原理都是一样的。以下举例滚动懒加载。

原理:将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一个1×1的全透明的占位图片来代替,当然占位图片也可以是其他的图片。

github源码: https://github.com/beidan/lazeLoadImg

2.图片预加载

基于用户行为的预加载就是,虽然在用户看不到的时候加载了,但是,用户却有更大或者说很大的概率会看到此图。

后续再对这个进行详细的说明~ 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 对Select的操作备忘记录
Jul 04 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
js正则相关知识点专题
May 10 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
jQuery实现表格元素动态创建功能
Jan 09 #Javascript
input输入密码变黑点密文的实现方法
Jan 09 #Javascript
微信小程序 css使用技巧总结
Jan 09 #Javascript
详解Jquery Easyui的验证扩展
Jan 09 #Javascript
Javascript blur与click冲突解决办法
Jan 09 #Javascript
简单实现jQuery级联菜单
Jan 09 #Javascript
prototype与__proto__区别详细介绍
Jan 09 #Javascript
You might like
php array的学习笔记
2012/05/16 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
CI框架中数据库操作函数$this->db->where()相关用法总结
2016/05/17 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python梯度下降法的简单示例
2018/08/31 Python
python 读取数据库并绘图的实例
2019/12/03 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
暑假实习求职信范文
2013/09/22 职场文书
酒店服务实习自我鉴定
2013/09/22 职场文书
销售部主管岗位职责
2013/12/18 职场文书
单位领导证婚词
2014/01/14 职场文书
电气个人求职信范文
2014/02/04 职场文书
中学教师个人总结
2015/02/10 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server