澳门新葡亰网址下载除了高清应景,图片与用户体验的关系还深着呢

by admin on 2020年3月5日

大家有没有发现,智能手机的照片文件变得越来越大——这些文件会占用大量空间,并且有需要很长时间才能加载的可能性,有时甚至无法加载。

JPEG

对于图片,一般分光栅图和矢量图

这两种图的对比也是很明显的

澳门新葡亰网址下载 1

image

光栅图:是基于 pixel像素构成的图像。JPEG、PNG,web等都属于此类

矢量图:使用点,线和多边形等几何形状来构图,具有高分辨率和缩放功能.
SVG就是一种矢量图

原文出处: speckyboy – Nicole
Amsler   译文出处:IXDC   

为提高上传效率,Facebook 的软件团队为 Android 和 Apple iOS
应用程序提供了一个名为 Spectrum
的图像处理库。官方表示,他们使用
Spectrum,提高了应用程序中大规模图像上传的可靠性和质量。

JPEG

JPEG可能是世界上使用最广泛的图像格式。如前所述,通过HTTP
Archive的网站统计显示的图像中有45%是JPEG。诸如JPEG之类的格式最适合于具有多个颜色区域的照片或图像。

大多数优化工具将允许您设置您满意的压缩级别;较高的压缩率会减小文件大小,但会引入伪影,光晕或块状降级。

澳门新葡亰网址下载 2

image

随着我们从最佳质量转移到最低质量,JPEG压缩伪影可能会增加。请注意,一个工具中的图像质量分数可能与另一个工具中的质量分数大不相同

澳门新葡亰网址下载 3

自11月首次向公众推出时,Spectrum 已推出测试版(v0.9)。Facebook 现已在
GitHub 上正式推出1.0.0版软件(Spectrum 1.0.0),向开发者社区开放。

JPEG压缩模式

JPEG图像格式有许多不同的压缩模式。

三种流行的模式是基线(顺序),逐行JPEG(PJPEG)和无损。

基线JPEG(大多数图像编辑和优化工具的默认设置)以相对简单的方式进行编码和解码:从上到下。

澳门新葡亰网址下载 4

image

当基准JPEG加载速度较慢或点状连接时,用户会在图像加载时看到图像顶部的更多图像。无损JPEG是相似的,但具有较小的压缩比。

基线JPEG从上到下加载,而渐进式JPEG从模糊加载到尖锐。

澳门新葡亰网址下载 5

image

这里有一个demo清楚的演示了区别

PJPEG的优点

澳门新葡亰网址下载 6

image

PJPEG在加载时提供图像的低分辨率“预览”的能力提高了感知性能 –
与自适应图像相比,用户可以感觉到图像加载更快。在较慢的3G连接上,这允许用户只在接收到文件的一部分时(粗略地)看到图像中的内容,这可以比基线JPEG提供的图像的从上到下的显示更令人愉快.

2015年,Facebook切换到PJPEG(为他们的iOS应用程序),能够比以前快15%显示优质图像,
而且使用的流量减少10%

PJPEG可以提高压缩率,相比基准/简单的JPEG,对于10KB以上的图像消耗的带宽要少2-10%。他们更高的压缩比是由于对JPEG中的每个扫描都应用了专用的霍夫曼编码。

使用了PJPEG的网站有facebook,twiiter,yelp.

PJPEG的缺点
PJPEG的解码速度比基准JPEG要慢 –
有时候是3倍。在具有强大CPU的台式机上,这不是一个问题,而是资源有限的动力不足的移动设备。显示不完整的图层需要多次对图像进行解码。
PJPEG也不总是更小,对于非常小的图像(如缩略图),PJPEG可能比其基线对应的更大,但是对于这样的小缩略图,渐进式渲染可能不会提供太多的价值.

这意味着在决定是否发布PJPEG时,您需要进行实验,找到文件大小,网络延迟和CPU使用的适当平衡。

一些用户可能会认为渐进式加载是一个缺点,因为图像是否完成加载,很难判断。由于每个受众可能会有很大差异,因此请评估对您自己的用户有意义的内容

如何创建 PJPEG图像

像ImageMagick,libjpeg,jpegtran,jpeg-recompress和imagemin等工具和库支持导出PJPEG

澳门新葡亰网址下载 7

GitHub Logo

也可以通过gulp 工具及gulp-imagemin插件

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('images', function () {
    return gulp.src('images/*.jpg')
        .pipe(imagemin({
            progressive: true

        }))
        .pipe(gulp.dest('dist'));
});

随着图片和视频在网站和APP上所占比重的持续提高,页面加载时间也变得越来越长了,从用户体验的角度来说,这是个很明显的减分项,值得所有公司关注。财政时报(The
Fiscal Times)的一篇文章曾援引互联网数据测量公司HTTP
Archive的报告指出,现在的网页平均大小已经达到2.1 MB,而在几年前还只是1.5
MB。这种增长的主要原因之一便是内容的增加,比如视频和炫丽的图片,这些本来是为了给网站带来更多的流量而设计的。

澳门新葡亰网址下载 8

JPEG Chroma subsampling

Chroma (or color) subsampling

我们的眼睛更容易失去一个图像(色度)的颜色细节,而不是亮度. Chroma
subsampling是一种压缩形式,它降低了信号中颜色的精度,有利于亮度。

这在某些情况下减少了15-17%的文件大小,而不会对图像质量产生不利影响,并且可以用于JPEG图像,还可以减少图像内存使用量。

澳门新葡亰网址下载 9

GitHub Logo

由于对比度是形成我们在图像中看到的形状的原因,所以定义它的亮度是非常重要的。

旧的或过滤的黑白照片可能不包含颜色,但由于亮度的原因,它们可以与颜色对应的一样细致。色度(色度)对视觉感知的影响较小

澳门新葡亰网址下载 10

GitHub Logo

JPEG支持许多不同的子采样类型:无,水平和垂直

讨论子采样时讨论了许多常见的样本。通常是4:4:4,4:2:2和4:2:0。但是这些代表什么呢?假设子样本的格式为A:B:C。
A是一行中的像素数目,对于JPEG,通常是4.B代表第一行中的颜色数量,C代表第二行中的颜色数量。

4:4:4没有压缩,所以颜色和亮度完全运输。
4:2:2水平采样为半采样,垂直采样为全采样。
4:2:0采样颜色从第一行像素的一半中删除,并忽略第二行

一些很好的一般规则:二次抽样( – 抽样2×2)是照片。
no-subsampling(-sample
1×1)最适合屏幕截图,横幅和按钮。最后有妥协(2×1)。

通过减少色度分量中的像素,可以显着减小色彩分量的大小,最终减小字节大小。

澳门新葡亰网址下载 11

GitHub Logo

以质量80为一个JPEG的Chrome子采样配置。

色度子采样对于大多数类型的图像是值得考虑的。
不过有一些值得注意的例外:由于二次采样依赖于我们眼中的局限性,因此对于颜色细节可能与亮度(例如医学图像)同样重要的图像进行压缩并不是很好。

包含字体的图像也会受到影响,因为较差的文本二次采样会降低其可读性。更加锋利的边缘更难以用JPEG压缩,因为它旨在更好地处理具有更柔和过渡的摄影场景

澳门新葡亰网址下载 12

GitHub Logo

了解JPEG时,建议在处理包含文本的图像时使用4:4:4(1×1)的子采样。

Chroma子采样的确切方法在JPEG规范中没有规定,所以不同的解码器处理它的方式不同。MozJPEG和libjpeg-turbo使用相同的缩放方法。老版本的libjpeg使用了一种不同的方法来增加颜色中的艺术性

当使用“Save for web”功能时,Photoshop会自动设置色度子采样。
当图像质量设置在51-100之间时,根本不使用子采样(4:4:4)。
质量低于此值时,将使用4:2:0子采样。
这是将质量从51切换到50时,可以观察到更大文件尺寸缩小的原因之一

以下是网络上图片格式的当前状态:
有很多碎片。我们经常需要有条件地为不同的浏览器提供不同的格式。

澳门新葡亰网址下载 13

GitHub Logo

JPEG 2000 (2000)
JPEG XR (2009)
WebP
FLIF
HEIF and BPG
BPG (2015)
HEIF (2015)

不同的现代图像格式(和优化器)用于演示目标文件大小为26KB的可能性。我们可以使用SSIM(结构相似性)或Butteraugli来比较质量,我们将在后面详细介绍。

浏览器支持是碎片化的,如果你想利用上面的任何一个,你可能需要有条件地为每个目标浏览器提供回退。

您还可以使用.jpg扩展名(或任何其他)来提供图像格式(例如WebP,JPEG
2000),因为浏览器可以呈现图像,从而可以决定媒体类型。这允许服务器端内容类型协商来决定发送哪个图像而根本不需要改变HTML。像Instart
Logic这样的服务在向客户提供图像时使用这种方法。

接下来,让我们讨论一下当您不能有条件地提供不同的图像格式的选项:优化JPEG编码器

澳门新葡亰网址下载 14

它是如何工作的?

Optimizing JPEG encoders

现代JPEG编码器试图产生更小,更高保真度的JPEG文件,同时保持与现有浏览器和图像处理应用程序的兼容性。他们避免了在生态系统中引入新的图像格式或变化的需求,从而使压缩增益成为可能。两个这样的编码器是MozJPEG和Guetzli。

  • General web assets: MozJPEG
  • Quality is your key concern and you don’t mind long encode times:
    use Guetzli
  • If you need configurability:JPEGRecompress (which uses MozJPEG under
    the hood)
  • JPEGMini. It’s similar to Guetzli – chooses best quality
    automatically. It’s not as technically sophisticated as Guetzli, but
    it’s faster, and aims at quality range more suitable for the web.
  • ImageOptim API (with free online interface here) – it’s unique in
    its handling of color. You can choose color quality separately from
    overall quality. It automatically chooses chroma subsampling level
    to preserve high-res colors in screenshots, but avoid waste bytes on
    smooth colors in natural photos.

MozJPEG
Mozilla以MozJPEG的形式提供了一个现代化的JPEG编码器,它宣称最多可以削减10%的JPEG文件。使用MozJPEG压缩文件的工作跨浏览器,其一些功能包括逐行扫描优化,网格量化,还有一些不错的量化表预设可以帮助创建更平滑的高DPI图像。

在ImageOptim中都支持MozJPEG,并且有一个相对可靠的可配置imagemin插件。下面是一个使用Gulp的示例实现:

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

gulp.task('mozjpeg', () =>
    gulp.src('src/*.jpg')
    .pipe(imagemin([imageminMozjpeg({
        quality: 85

    })]))
    .pipe(gulp.dest('dist'))
);

MozJPEG:不同品质文件大小和视觉相似度评分的比较

澳门新葡亰网址下载 15

GitHub Logo

我使用jpeg-archive项目中的jpeg-compress来计算源图像的SSIM(结构相似性)分数,SSIM是一种测量两幅图像之间相似度的方法,其中SSIM分数是一幅图像的质量测量值,如果另一幅图像被认为是“完美的”。

我的经验,MozJPEG是一个很好的选择压缩图像的网页在高视觉质量,同时减少文件大小,对于中小尺寸的图像,我发现MozJPEG(质量=
80-85)可以节省30-40%的文件大小,同时保持可接受的SSIM,在jpeg-turbo上提高5-6%,它的编码成本比基线JPEG要慢,但是你可能不会觉得这是问题。

Guetzli

Guetzli是一个很有希望的,来自Google的感知型JPEG编码器,它试图找到最小的JPEG,人眼都难以区分。它执行一系列实验,为最终的JPEG生成一个提案,解释每个提案的心理视觉错误。其中,它将选择得分最高的提案作为最终输出。

为了测量图像之间的差异,Guetzli使用了Butteraugli,一种基于人类感知测量图像差异的模型(下面讨论)。

Guetzli可以考虑其他JPEG编码器不具备的一些视觉属性。
例如,所看到的绿光量与对蓝光的敏感度之间存在一定的关系,因此绿光附近的蓝光的变化可以被精确地编码一点。

Guetzli声称与其他压缩机相比,给定Butteraugli分数的图像数据大小减少了20-30%。使用Guetzli的一个很大的警告是,它是非常,非常缓慢,目前只适用于静态内容。从README中,我们可以注意到Guetzli需要大量的内存

  • 它可能需要1分钟+每百万像素200MB
    RAM.当您将图像作为静态网站的构建过程的一部分进行优化时,它可能是理想选择,但在按需执行时则不太适合。

ImageOptim等工具支持Guetzli优化

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminGuetzli = require('imagemin-guetzli');

gulp.task('guetzli', () =>
    gulp.src('src/*.jpg')
    .pipe(imagemin([
        imageminGuetzli({
            quality: 85
        })
    ]))
    .pipe(gulp.dest('dist'))

);

澳门新葡亰网址下载 16

GitHub Logo

用Guetzli压缩图像是非常耗时的,为了更大的图像,这是值得的。我已经看到了很多例子,它保存了高达40%的文件大小,同时保持视觉保真度。这使得它完美的归档照片。
在中小尺寸的图像上,我仍然看到了一些节省(在10-15KB的范围内),但是它们不太明显。
Guetzli可以在压缩的同时在较小的图像上引入更多的液化形变

MozJPEG与Guetzli相比如何?

  • Guetzli被调整为更高质量的图像(butteraugli据说是最好的q = 90
    +,MozJPEG的甜蜜点在q = 75左右)
  • Guetzli的压缩速度要慢得多(都产生标准的JPEG,因此解码速度和往常一样快)
  • MozJPEG不会自动选择质量设置,但您可以使用外部工具(例如, JPEG归档

Butteraugli
Butteraugli是Google的一个项目,它估计一个人可能注意到两个图像的视觉图像质量下降(心理视觉相似性)

从上图可以看到,图片占了近63%的比重(2087 KB中占了1312
KB),排名第二的是视频,占比10%(208 KB)。

首先,它通过转码(更改数据文件格式)来减小文件大小。这减少了数据消耗,并加快了上传速度。另外,它与其他现有的本机图像压缩库(如
MozJpeg)集成并压缩图像,创建一个更小但几乎与原始质量一样好的图像。

网站上的图片可不是好不好看这么简单的,公司不仅需要为其支付昂贵的带宽费,还可能增加网站访问者等待网页加载的时间。每一次的加载等待都会降低网站的整体转化率,影响最终的收益。

MozJpeg 是 Mozilla
研究团队于2014年推出的JPEG编码器,可以将文件大小减少10-15%,以便上传。

如果网站存在加载性能的问题,除了代码问题,别一个可能的问题就是图片了。本文我们就来说说如何通过优化图片来提升用户访问体验,降低带宽与存储成本。

据该公司称,Spectrum
的声明式应用程序编程接口(API)允许开发人员专注于所需的输出属性而不是单个步骤。

来看看图像管理过程中最常见的那些错误,以及如何避免他们。

此外,该公司称 Spectrum
在裁剪和旋转JPEG图像时更喜欢无损方法,在调整大小时“优化了解码器采样和像素完美大小调整之间的相互作用”。

没使用更有效、更现代的图像格式

据报道,Facebook 大约在18个月前开始开发
Spectrum,并逐渐将其整合到自己的应用程序中。

尽管谷歌推出了旨在加快图片加载速度的WebP图像格式,微软也有比JPEG更好的JPEG-XR,与JPEG文件同等大小的情况下,图像质量是后者的两倍,同等质量下只需前者一半的体积。但开发人员好像对此并不感冒。原因可能是平时缺乏对这些细节的关注,或者难以在不同的浏览器和设备上实现适配,不得不放弃。于是,我们只好继续用着JPG和PNG这些常用格式,而不是利用更现代的图像格式来优化自己的网站。

(文/开源中国)    

解决方式:将图像转换成WebP或JPEG-XR这些现代图像格式吧,同时通过特定浏览器检测每个图像的打开效率,更甚者可以为不同浏览器提供不同版本的图像格式,在图像的视觉质量与文件大小之间取得平衡。


16.9 kb JPG

6.9 kb WebP

使用GIF格式来播放短视频
现在几乎所有的新闻网站、媒体网站和社交分享网站都会有大量的GIF图像,使用起来非常方便,效果也很好,但它的问题在于文件太大了,特别是在移动设备上,会导致高额的带宽成本和更高的CPU利用率。

解决方式:如果是面向Chrome浏览器用户,可以使用动态WebP格式,另一种方法是将GIF文件进行有损压缩。但这两个都不是太好的选择。

所以可以把GIF文件转换成MP4或者WebM视频格式,嵌入剪辑标签或HTML5视频标签而不是图像标签。在现在绝大多数的浏览器中都不会有什么问题,网站看起来完全相同但加载更快。通过采取这些步骤,你将能够大幅减少文件大小,减少页面加载时间,提高用户体验和降低带宽成本。


6.3 mb GIF

311 kb MP4

注:两边的动图均为压缩gif,因为微信有大小及格式的限制,此为模拟效果

为所有用户提供2X (Retina屏)图像

如今的移动设备和笔记本电脑都是高像素比(DPR)的。因为想让你的网站在所有设备上看起来都有很好的显示效果,所以你可能会全部使用双分辨率的图像,许多开发人员也倾向于为所有用户提供同样大小的图片。但是,对于非Retina用户来说,他们加载的是高分辨率的图像,却只能享受一半的分辨率。这无疑延长了页面加载时间,也增加了不必要的带宽成本。

解决方式:通过检测用户设备,提供不同的图像版本给用户。


DPR 1.0 – 100×100 – 4.6 kb

DPR 2.0 – 200×200 – 12.1 kb

奢侈的浏览器端尺寸调整功能
很多走捷径的开发人员喜欢使用浏览器端提供的图像缩放功能而不是在服务器端调整图片尺寸。在如今的浏览器中这两者最终的显示效果是完全相同的,你根本看不出差别,但所费的流量就不是那么回事儿了。网站访问者浪费宝贵的时间从服务端下载一个大图,在浏览器上看起来却只有那么一点。老版浏览器更不用说了。

解决方式:确保图片的尺寸完全符合网站需要的大小。即使是相同的图像也应该被制成不同大小的缩略图以适应不同的页面,千万不要统一用一个大图并依赖浏览器来调整大小。澳门新葡亰网址下载 17

没有必要的高质量jpeg文件

jpeg真正彻底地改变了网络。长久以来,这种有损压缩格式让web开发人员能够以更小的带宽呈现更高分辨率的图像。但是许多开发人员和设计师并没有去对JPEG进行压缩实验,其实是可以做到在不明显损失图像质量的前提下显著减少文件大小的。

当用85%质量的JPEG图像看上去完全合格的时候,我们就没必要用95%质量的图像,那样不会带来什么体验的提升,反而会消耗带宽和削弱访客体验。

解决方式:不要害怕使用低质量的JPEG进行实验。对某些网站来说,使用50%质量的JPEG更具性价比。虽然更高质量的jpeg更好看,但质量的改善并不总是总能带来额外的收益。


95% JPEG – 34 kb

80% JPEG – 17 kb

错误的图像文件类型

JPEG,PNG和GIF是现在最常见的图像格式,但是每一个都有不同的角色,如果你用错了,浪费的是用户的时间和你的钱。

一个常见的错误是使用PNG格式来保存照片。我们都认为,PNG嘛,无损压缩格式,最能保留照片的细节和质量了吧,话虽没错,但很多时候没必要。相同质量的JPEG比PNG文件小很多。

解决方式:永远记住什么图像格式适用于什么内容。PNG主要用于计算机生成图像(图表、商标等)或当你需要透明图像的时候。


PNG – 110 kb

JPEG – 15 kb


提供未经优化的图像

PNG是一种无损压缩格式,它可以用免费的压缩工具压缩50%但质量仍然不会降低多少。不幸的是,许多开发人员和web设计人员跳过这一步,不去优化图像。

解决方式:PNGCrush和OptiPNG是两个开源图像优化工具,如果你不使用这些,也有其他的一些工具,比如雅虎的smush.it网站。澳门新葡亰网址下载 18

忘记剥离图像元数据

现在很多网站都允许用户上传照片。比如旅行的照片,这些照片都是用现代相机照的,里面带着大量的元数据。在大多数情况下,最好是把这些元数据剥离出来,但开发人员很少花时间去这么做,导致图像需要更多的带宽和更长的加载时间。

解决方式:剥离用户上传的图片的元数据,如果需要这些元数据,你可以把它们放在有用的地方,但不必作为图像的一部分。

好了!

虽然不全面,但本文概述了最常见的几个问题,可以很容易地搞定,避免消耗过多的带宽,也为网站访问者提供一个更好的体验。

2 赞 收藏
评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图