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

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

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

总的来说,图片的使用分为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.图片预加载

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

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

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

(0)

相关推荐

  • 利用javascript解决图片缩放及其优化的代码

    一个客户跟我联系说,刚给他做的网站,显示不正常,我顿时一紧张,这是我独立完成的第一个项目,于是赶紧打开他的网站看了看,没看出什么不正常来.我又问他怎么不正常,他说和交接项目时的效果不一样,晕,交接时要是不正常,项目肯定交接不了啊,干脆让他截个图过来.果然不正常,是他刚上传的一张图片把显示内容的窗口撑开了.查看代码,明明写好了max-width,怎么还会出现这种情况.突然发现他发来的图上,那个浏览器看着不顺眼,像是古老的而神圣的IE6!经过确认,果然是它,又是它!我真是疏忽,没给他在IE6下测试就

  • Android关于Glide的使用(高斯模糊、加载监听、圆角图片)

    高斯模糊.加载监听.圆角图片这些相信大家都很熟悉,那如何实现这些效果,请大家参考本文进行学习. 1.引用 compile 'com.github.bumptech.glide:glide:3.7.0' 2.加载图片 2.1 基本加载 Glide.with(context)     .load(url)     .into(imageView); 2.2 设置加载中和加载失败的情况 Glide.with(context) .load(url) .placeholder(R.drawable.loa

  • Android 中对于图片的内存优化方法

    1. 对图片本身进行操作 尽量不要使用 setImageBitmap.setImageResource. BitmapFactory.decodeResource 来设置一张大图,因为这些方法在完成 decode 后,最终都是通过 Java 层的 createBitmap 来完成的,需要消耗更多内存.因此,改用先通过 BitmapFactory.decodeStream 方法,创建出一个 bitmap,再将其设为 ImageView 的 source,decodeStream 最大的秘密在于其直

  • php中10个不同等级压缩优化图片操作示例

    本文实例分析了php中10个不同等级压缩优化图片操作.分享给大家供大家参考,具体如下: 今天找到一个php写的压缩图片程序,可以分10个等级(0-9)来压缩,0等级时压缩比率不是很大,图片不会失真:随着压缩等级不断增大,图片会变得越来越不清晰,通常压缩后图片大小可以减少到原来的50%,压缩比还是挺大的. 如下是php压缩图片程序 <?php Header("Content-type: image/PNG");/*告诉IE浏览器你做的程序是张图片*/ $image = @image

  • ListView异步加载图片实现思路(优化篇)

    在APP应用中,listview的异步加载图片方式能够带来很好的用户体验,同时也是考量程序性能的一个重要指标.关于listview的异步加载,网上其实很多示例了,中心思想都差不多,不过很多版本或是有bug,或是有性能问题有待优化.有鉴于此,本人在网上找了个相对理想的版本并在此基础上进行改造,下面就让在下阐述其原理以探索个中奥秘,与诸君共赏- 贴张效果图先: 异步加载图片基本思想: 1.先从内存缓存中获取图片显示(内存缓冲) 2.获取不到的话从SD卡里获取(SD卡缓冲) 3.都获取不到的话从网络下

  • android内存优化之图片优化

    对图片本身进行操作.尽量不要使用setImageBitmap.setImageResource.BitmapFactory.decodeResource来设置一张大图,因为这些方法在完成decode后,最终都是通过java层的createBitmap来完成的,需要消耗更多内存.因此,改用先通过BitmapFactory.decodeStream方法,创建出一个bitmap,再将其设为ImageView的source,decodeStream最大的秘密在于其直接调用JNI>>nativeDeco

  • jQuery lazyLoad图片延迟加载插件的优化改造方法分享

    jQuery lazyLoad.js插件 是一款基于jquery框架,可以"实现"图片延迟加载的插件.请注意,我用了双引号,因为从我自己实际调试的结论来说呢,并不会延迟加载,而是先下载,然后通过改变<img>的src属性来隐藏原来的图片. 我们先来看看他的代码吧! 复制代码 代码如下: <script type="text/javascript" src="/static/jssrc/lazyload.js"></s

  • javascript瀑布流式图片懒加载实例解析与优化

    之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒加载实例>再来看看图片"懒加载"的一些知识. 图片"懒加载"的主旨: 按照需要加载图片,也就是说需要显示的时候再加载图片显示,减少一次性加载的网络带宽开销. 先来看一段代码: var conf = { 'loadfirst': true, 'loadimg': t

  • Bootstrap优化站点资源、响应式图片、传送带使用详解3

    优化Bootstrap站点资源.完成Bootstrap响应式图片.让传送带支持手势,具体内容如下 A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap]2.作品展示站点 中的资源.特别的,来看一看我们能控制的.影响页面速度的重要因素 -- 文件大小,包括图片.CSS和 JavaScript 文件.只要简单几步,我们就可以给这些文件"瘦身",

  • 总结Android App内存优化之图片优化

    前言 在Android设备内存动不动就上G的情况下,的确没有必要去太在意APP对Android系统内存的消耗,但在实际工作中我做的是教育类的小学APP,APP中的按钮.背景.动画变换基本上全是图片,在2K屏上(分辨率2048*1536)一张背景图片就会占用内存12M,来回切换几次内存占用就会增涨到上百兆,为了在不影响APP的视觉效果的前提下,有必要通过各种手段来降低APP对内存的消耗. 通过DDMS的APP内存占用查看工具分析发现,APP中占用内存最多的是图片,每个Activity中图片占用内存

  • php使用高斯算法实现图片的模糊处理功能示例

    本文实例讲述了php使用高斯算法实现图片的模糊处理功能.分享给大家供大家参考,具体如下: <?php class image_blur{ function gaussian_blur($srcImg,$savepath=null,$savename=null,$blurFactor=3){ $gdImageResource=$this->image_create_from_ext($srcImg); $srcImgObj=$this->blur($gdImageResource,$blu

  • Bootstrap图片轮播组件Carousel使用方法详解

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目. 图片轮播组件是一个在网页中很常见的技术,但是如果直接编写的话,需

随机推荐