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


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 相关文章推荐
javascript 面向对象编程基础 多态
Aug 21 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
Javascript的&&和||的另类用法
Jul 23 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
ES6基础之默认参数值
Feb 21 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
JS window对象简单操作完整示例
Jan 14 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
PHP基础学习小结
2011/04/17 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
js创建对象的方式总结
2015/01/10 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python实现数据写入excel表格
2018/03/25 Python
利用Python如何生成便签图片详解
2018/07/09 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
python tkinter控件布局项目实例
2019/11/04 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
自主招生自荐信范文
2013/12/04 职场文书
双创工作实施方案
2014/03/26 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
2019军训心得体会
2019/06/27 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技