谈谈 Web 图片浏览体验与优化

时间: 2018-12-25阅读: 1880标签: 图片

图片,在一张网页上起到了相当大的作用。一个充满艺术的网站,它们的排版往往十分简洁、大方,整张网页的美感全体现在了一张背景图和产品图=== 而在浏览这样的网页时,其响应速度决定了用户体验。如果你正在打开一个自己比较感兴趣的网站,却发现它加载了数十秒,你是不是感觉很不爽甚至想关掉它?如果是我,我着实是会关闭的。为了让更多朋友了解重视这个问题,所以在这篇博文里,我就把自己积累的小小图片优化经验分享出来,给大家参考学习。


速度与呈现

加载速度,永远是建立在 “带宽/文件大小” 之下的。如果你的带宽很小,而这张图片很大,那么你加载它的速度自然会很慢。如果你的带宽很大,而这张图却很小,那自然是顺的一批啦!所以我们一旦要把图片添加到网页上,绝不是就应该把图片的文件大小做到更小呢?


质量与失真

从平常的角度来看,文件尺寸越小意味着图片的分辨率或质量会更低。用设计的术语来讲这叫做 “失真” - 就是图片失去了真实的原有的还原度。下面的这张图片,可以让大家感受的更加直观一些。


我们可以看到,在左侧的图片放大之后,每个相邻颜色的像素从小块变成了一个大块,意味着其颜色信息变少了,自然它的大小也就随之下降了。而我们在制作网站中,大家肯定不会喜欢看到这样失真的图片吧~ 所以我们要在合适的条件下使用合适的图片格式和压缩比例。这样我们的网站既能在良好速度的前提下保证图片的观感不会太差强人意。


常用图片格式

目前在 Web 领域中比较常用的图片格式有 JPGPNGSVG

  • JPG:有损的格式。适合存储非透明背景的图片,还原度看压缩程度
  • PNG:透明图层的格式。适合存储动漫类的图片,还原度可以更好
  • SVG:矢量图格式。由于为点线构成,占用空间最小

但大家可能会注意到,是不是少了一个谷歌的 WEBP 格式呢?其实 WEBP 格式的容量相对于 JPG 更小,但相对于 JPG,它在浏览器上的兼容性比较低,没有被广泛采用。所以我们还是回到这三种格式的怀抱吧!

总的来说,如果我们需要上传照片,或是有背景的图片,那么我们就选择 JPG 格式。有透明/半透明背景的动漫图片,选择 PNG 格式。简单的矢量图形则使用 SVG 格式。


处理与压缩

在 PS 里面有一项功能,可以说是专门为我们 Web 开发人员所设计,它叫做 “存储为 Web 所用格式”。我们可以在 “文件” 菜单里面找到它。打开窗口之后,我们在右侧可以看到对图片的一些设置。由于 JPG 和 PNG 格式的性质不同,因此右侧的设置并不相同。


JPG

我把比较常用的功能画成了两个框。其中橙色框内设置图片的 压缩比例(品质)、存储格式、是否多条路径下载,下面的蓝色框则是设置图片的 分辨率。关于 “多路径下载” 的讲解,可以移步浏览 “渲染体验” 章节。


在品质上,数值越高画面清晰度越高,同时占用的空间越大。
在分辨率上,数值越高画面越大,同时占用的空间也越大。

我们在网上发布文章的时候,其实分辨率设置在 1920*1080 以内是最合适的了,毕竟页面显示的区域也就这么大,太大的图片也影响了加载速度。而压缩程度上我一般选择 50 到 60 左右足矣。除非你做的是壁纸站,需要用户看到更高的图片质量,那就可以不对图片进行优化了。


PNG

而 PNG 图片分为了两种。PNG8 和 PNG24,前者的保存质量很低(2 色到 256 色),还原度差,因此后者更加被广泛使用。


在 PNG24 模式下则没有了 JPG 的品质设定,并且 PNG 的透明度也是可以选择开启或关闭的。如果你将一张 JPG 图片存储为 PNG24,它可能会比原来大好几倍以上!


接下来是那个 “不受欢迎” 的 PNG8。在这种模式下,我们可以选择图片的 色彩数量,因此 PNG8 比 PNG24 会更加失真,但是这样做其容量也有很大的降低。相信大家会想到另外一种图片格式:GIF,它也是低色彩的图片存储格式。

因为 PNG8 颜色少的这个特性,原图的半透明内容会被分成全透明和不透明的像素,导致出现 毛边和锯齿,所以我们需要设置杂边颜色。假如你要在纯白色(#FFF)的网页背景下添加 PNG8 图片,就要把杂边颜色改成#FFF,这样我们插入图片之后就会发现这张图 “保持了原来的透明度”。而如果你采用了别的颜色作为网页背景,和杂边颜色不匹配,这个毛边也就暴露无遗了。

难道 PNG24 就没有办法再压缩大小了吗?有。一些第三方工具可以给 PNG24 做压缩,其中保罗我比较熟悉的是 TinyPNG

图片压缩的差不多了,但是它在我网页上加载还是不够快,怎么办?难道用户体验没有办法提升了吗?

别着急,还有一招没有说呢,它就是我前面一直没有提到的一个特性。这个特性使得图片不再像传统那样一行一行加载出来了。


渲染体验

不知道大家有没有见过一些网站的图片是从模糊慢慢变清晰的。原因是浏览器解析这些图片的算法不同,而加入这个细节也会对网页的用户体验有一定的提升。

在 JPG 格式下,它被称作 “连续”,在 PNG 格式下,它被称作 “交错”。只要你导出图片的时候勾选了这个功能,意味着你的图片即便加载缓慢,也能挽救一部分浏览者。因为从马赛克逐渐变清晰的过程中,会使得浏览者对这张图片充满好奇心。


其他方法

  1. CDN(适合土豪)

使用 CDN 分发图片内容,即便你的图片没有优化,也能以较快的速度展现在浏览者面前。优势非常明显,其缺点就是大量的需要 Money~

  1. 图床(适合所有人)

图床绝大多数都自带了 CDN,而且市面上的免费图床特别多,有 SM.MS新浪微博相册 等等。优势在于稳定存储,速度较快。其缺点就是地址非常长且没有规则,需要手动记录。

  1. 采用 base64 编码嵌入 html/css

这个方法比较适合较小的图片(小图标)或是验证码,这样也能有效减少访问服务器的次数。图片内容将会随着网页加载而展现。Duri.me 提供了这个功能,同时我们也能用 php 内置函数 base64_encode 来实现这个效果。

html:

<img src="data:image..."/>

css:

.image{ background: url("data:image...") }
  1. 采用图片懒加载

可以随着页面的拖动而加载图片,可略微减少服务器的并发。用户在加载图片的过程中还能看到有意思的加载动画。不过这个类型的插件绝大多数采用 JQ 编写,如果你的站点没有使用 JQ 开发,则略显臃肿了... 其优点是可以略微减小一秒内的同时并发,缺点是一般需要 JQ 等库才可以实现。

  1. 生成中等质量的缩略图

这个是当下最常见的方式,将原图处理成各种尺寸的缩略图,并且和原图分开存储。其缺点就是文件特别多,同时给占用空间翻倍。特别是在 WordPress 搭建的博客上,缩略图也占用了很大一部分空间。最好的例子莫非就是淘宝、京东这样的电商网站了。缩略图既保证了速度也保证了质量。关于缩略图的生成,可以参考我写的 《生成网页缩略图的方法》 这篇文章。


总结

为了提升网页浏览的用户体验,我们可以使用更快的图片托管平台(CDN、图床),采用合理的图片格式、分辨率、压缩程度来优化图片内容。


来源:https://paugram.com/essay/talking-web-images.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1697

html2canvas 生成的图片变模糊解决方案

背景图片和二维码还有用户微信头像生成一张图片,可供用户下载。打开页面的时候就是一张图可以保存,html2canvas插件即可实现效果,效果是实现了,但是很郁闷,图片模糊了。。。。

css怎么让背景图片平铺?

平铺选项是在网页设计中能够经常使用到的一个选项,例如网页中常用的渐变式背景。采用传统方式制作渐变式背景,往往需要宽度为背景进行平铺。

原生js 生成海报图_利用canvas合成图片的实现方法

目前浏览器对html5的支持越来越好,我们现在不用服务器端,直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图

jpg、gif、png、svg、bmp、WebP图像格式的区别以及应用场景

jpg:非常适合作为储存像素色彩丰富的图片、例如照片等等,png:分为 png-8 以及 png-24 两种格式,gif:非常适合用来表现图标、 UI接口、线条插画、文字等部分的输出,也可用来展示小的动画。

HTML5 实现图片预览和查看原图

html5从一开始就给开发者很多的期待,提供众多新的API,不用再想以前一样,为了实现某个功能写很多的代码。在以前,如果要实现图片预览会怎么做呢,因为为了安全的原因,web端的js是不能读取文件的本地真实路径的

vue引入图片

通过在vue文件引入scss样式文件;如果scss文件有引入背景图片,这里不能使用相对路径了,需要使用~开头的方式,如果 URL 以 ~ 开头,其后的任何内容都会作为一个模块请求被解析。

前端开发中对图片的优化技巧有哪些?

除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,设计本身是否需要用那么多图片?还是说可以更简洁?

解码 PNG 图片

解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。图片的二进制数据可以从 <canvas> , <img> ,Object URLs,Image URLs, Blob 对象上获取到。参见浏览器图像转换手册。

性感与色情有多远_你不知道的图片鉴黄那些事

图片鉴黄服务市场容量巨大,作为移动互联网行业最为热门的创业领域,移动社交类App每天生产大量图片,并有无数色情图片混杂其中,所以高效准确地鉴别和剔除淫秽色情信息成为一项十分艰巨的任务。此外,移动直播的大热也导致图片鉴黄需求大增,尤其对于中小开发团队而言

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

当你的网站使用了大量图片时候,如果一次性全部加载,那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题,它可以实现图片的延迟加载【懒加载】

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!