图片该如何优化来提高网站性能

概述

图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话,图片大小有时高达几十兆。

因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩的,使用加载时间保持在可接受的水平。

在我的网站上,我注意到我的主页的页面大小 超过了1.1MB,图片占了约88%,我还注意到我提供的图像比它们需要的大(在分辨率方面),显然,还有很多改进的空间。

我开始阅读 Addy Osmani 的优秀Essential Image Optimization电子书,并开始在我的网站上按照他们的建议做了一些图片的优化。,然后再对响应式图像进行了一些研究并应用了它。

这使得页面大小减少到445kb,约62%!

什么是图像压缩

压缩图像就是在图片保持在可接受的清晰度范围内同时减少文件大小,我使用imagemin来压缩站点上的图像。

要使用imagemin,确保你已经安装了 Node.js,然后打开一个终端窗口,cd进入项目,并运行以下命令:

npm install imagemin

然后创建一个名为imagemin.js的新文件,写入下面的内容:

const imagemin = require('imagemin');
const PNGImages = 'assets/images/*.png';
const JPEGImages = 'assets/images/*.jpg';
const output = 'build/images';

你可以根据自己的需要更改PNGImages、JPEGImages和output的值,以符合你的项目结构。

此外要执行图片压缩,还需要根据要压缩的图像类型安装对应的插件。

JPEG/JPG

JPG 的优点

JPG 最大的特点是有损压缩。这种高效的压缩算法使它成为了一种非常轻巧的图片格式。另一方面,即使被称为“有损”压缩,JPG的压缩方式仍然是一种高质量的压缩方式:当我们把图片体积压缩至原有体积的 50% 以下时,JPG 仍然可以保持住 60% 的品质。此外,JPG 格式以 24 位存储单个图,可以呈现多达 1600 万种颜色,足以应对大多数场景下对色彩的要求,这一点决定了它压缩前后的质量损耗并不容易被我们人类的肉眼所察觉——前提是你用对了业务场景。

JPG 使用场景

JPG 适用于呈现色彩丰富的图片,在我们日常开发中,JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。

JPG 的缺陷

有损压缩在上文所展示的轮播图上确实很难露出马脚,但当它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时,人为压缩导致的图片模糊会相当明显。

此外,JPEG 图像不支持透明度处理,透明图片需要召唤 PNG 来呈现。

使用 MozJPEG 压缩 jpeg

这里使用 Mozilla 的MozJPEG工具,该工具可以通过imagemin-mozjpeg作为 Imagemin 插件使用。你可以通过运行以下命令来安装它:

npm install imagemin-mozjpeg

然后将以下内容添加到的imagemin.js中:

const imageminMozjpeg = require('imagemin-mozjpeg');
const optimiseJPEGImages = () =>
  imagemin([JPEGImages], output, {
    plugins: [
      imageminMozjpeg({
        quality: 70,
      }),
    ]
  });
optimiseJPEGImages()
  .catch(error => console.log(error));

可以通过在终端中运行node imagemin.js来运行脚本。这将处理所有JPEG图像,并将优化后的版本放build/images文件夹中。

我发现将quality设置为 70 在大多数情况下可以产生足够清晰的图像,但你的项目需求可能不同,可以自行设置合适的值。

默认情况下,MozJPEG生成渐进式 jpeg,这会导致图像从低分辨率逐渐加载到高分辨率,直到图片完全加载为止。由于它们的编码方式,它们也比原始的 jpeg 略小。

你可以使用 Sindre Sorhus 提供的这个命令行工具来检查JPEG图像是否是渐进式的。

Addy Osmani 已经很好地总结了使用渐进式 jpeg 的优缺点。对我来说,我觉得利大于弊,所以我坚持使用默认设置。

如果你更喜欢使用原始的jpeg,可以在options对象中将progressive设置为 false。另外,请确保imagemin-mozjpeg版本的变化,请重新查看对应文档。

PNG (PNG-8 与 PNG-24)

PNG 的优缺点

PNG(可移植网络图形格式)是一种无损压缩的高保真的图片格式。8 和 24,这里都是二进制数的位数。按照我们前置知识里提到的对应关系,8 位的 PNG 最多支持 256 种颜色,而 24 位的可以呈现约 1600 万种颜色。

PNG 图片具有比 JPG 更强的色彩表现力,对线条的处理更加细腻,对透明度有良好的支持。它弥补了上文我们提到的 JPG 的局限性,唯一的缺点就是 体积太大。

PNG 应用场景

前面我们提到,复杂的、色彩层次丰富的图片,用 PNG 来处理的话,成本会比较高,我们一般会交给 JPG 去存储。

考虑到 PNG 在处理线条和颜色对比度方面的优势,我们主要用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等。

使用 pngquant 优化 PNG 图像

pngquant是我优化PNG图像的首选工具,你可以通过imagemin-pngquant使用它:

npm install imagemin-pngquant

然后将以下内容添加到imagemin.js文件中:

const imageminPngquant = require('imagemin-pngquant');
const optimisePNGImages = () =>
  imagemin([PNGImages], output, {
    plugins: [
      imageminPngquant({ quality: '65-80' })
    ],
  });
optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .catch(error => console.log(error));

我发现将quality设置为65-80可以在文件大小和图像质量之间较好的折衷方案。

有了这些设置,我可以得到一个屏幕截图,我的网站从 913kb 到 187kb,没有任何明显的视觉损失,惊人的79% 的降幅!

WebP

WebP 的优点

WebP 像 JPEG 一样对细节丰富的图片信手拈来,像 PNG 一样支持透明,像 GIF 一样可以显示动态图片——它集多种图片文件格式的优点于一身。
WebP 的官方介绍对这一点有着更权威的阐述:

与 PNG 相比,WebP 无损图像的尺寸缩小了 26%。在等效的 SSIM 质量指数下,WebP 有损图像比同类 JPEG 图像小25-34%。 无损 WebP 支持透明度(也称为 alpha 通道),仅需 22% 的额外字节。对于有损 RGB 压缩可接受的情况,有损 WebP 也支持透明度,与 PNG 相比,通常提供 3 倍的文件大小。

将 WebP 图像提供给支持它们的浏览器

WebP是谷歌引入的一种相对较新的格式,它的目标是通过以无损和有损格式编码图像来提供更小的文件大小,使其成为 JPEG 和 PNG 的一个很好的替代方案。

WebP 图像的清晰度通常可以与 JPEG 和 PNG相提并论,而且文件大小要小得多。例如,当我将屏幕截图从上面转换到 WebP 时,我得到了一个 88kb 的文件,其质量与 913kb 的原始图像相当,减少了90% !

就我个人而言,我认为视觉效果是可以比较的,而且节省下来的大小是不容忽视的。

既然我们已经认识到在可能的情况下使用WebP格式是有价值的,那么很重要的一点是—它不能完全替代 JPEG 和 PNG,因为浏览器对 WebP 支持并不普遍。

在撰写本文时,Firefox、Safari 和 Edge 都是不支持WebP的浏览器。

然而,根据caniuse.com的数据,全球超过70%的用户使用支持WebP的浏览器。这意味着,通过使用 WebP 图像,可以为大约 70% 的客户提供更快的 web 页面及更好的体验。

安装它,运行以下命令:

npm install imagemin-webp

然后将以下内容添加到你的imagemin.js文件中:

const imageminWebp = require('imagemin-webp');
const convertPNGToWebp = () =>
  imagemin([PNGImages], output, {
    use: [
      imageminWebp({
        quality: 85,
      }),
    ]
  });
const convertJPGToWebp = () =>
  imagemin([JPGImages], output, {
    use: [
      imageminWebp({
        quality: 75,
      }),
    ]
  });
optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .then(() => convertPNGToWebp())
  .then(() => convertJPGToWebp())
  .catch(error => console.log(error));

我发现,将quality设置为85会生成质量与 PNG 相当但小得多的 WebP 图像。对于 jpeg,我发现将quality设置为75可以在视觉和文件大小之间取得很好的平衡。

提供html格式的WebP图像

一旦有了 WebP 图像,可以使用以下标记将它们提供给可以使用它们的浏览器,同时向不兼容 WebP 的浏览器使用 png 或者 jpeg。

<picture>
    <source srcset="sample_image.webp" type="image/webp">
    <source srcset="sample_image.jpg" type="image/jpg">
    <img src="sample_image.jpg" alt="">
</picture>

使用此标记,理解image/webp媒体类型的浏览器将下载 Webp 图片并显示它,而其他浏览器将下载 JPEG 图片。

任何不支持<picture>的浏览器都将跳过所有source标签,并加载底部img标签。因此,我们通过提供对所有浏览器类的支持,逐步增强了我们的页面。

请注意,在所有情况下,img 标记都是实际呈现给页面的内容,因此它确实是语法的必需部分。 如果省略 img 标记,则不会渲染任何图像。

<picture> 标签和其中定义的所有source都在那里,以便浏览器可以选择要使用的图片的路径。 选择源图像后,其 URL 将传给 img 标记,这就是显示的内容。

这意味着你无需设置<picture>或source标记的样式,因为浏览器不会渲染这些标记。 因此,你可以像以前一样继续使用img标签进行样式设置。

以上就是图片该如何优化来提高网站性能的详细内容,更多关于优化图片提高网站性能的资料请关注我们其它相关文章!

(0)

相关推荐

  • JavaScript关于提高网站性能的几点建议(一)

    近在学习<高性能网站建设指南>这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看. 性能黄金法则(Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片.脚本.样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上   --Steve Sounders 1 文件合并(减少HTTP请求数量) CSS Sprites   利用css s

  • 通过循环优化 JavaScript 程序

    前言 对于提高 JavaScript 程序的性能这个问题,最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句.本文将会帮你解决这个问题. 我们将看到 JavaScript 中主要的循环类型,以及如何针对它们进行高效编码. 现在开始! 循环性能 谈到循环性能,争论的焦点始终会集中到关于应该使用哪种循环,哪个是速度最快.性能最好的?事实上,在 JavaScript 提供的四种循环类型中,只有一种比其他循环慢得多 --  for-in 循环. 对循环类型的选择应基于你的需求而不是性能问

  • JS 网站性能优化笔记

    1. 除去JavaScript注释 除了注释,其他所有的 // or /* */ 注释都可以安全删除,因为它们对于最终使用者来说没有任何意义. 2. 除去JavaScript中的空白区域 如:x = x + 1;  可以简短得写成:x=x+1;  . 3. 进行代码优化 简单的方法如除去暗示的(implied)分号,某些情形下的变量声明或者空回车语句都可以进一步减少脚本代码.一些简略的表达方式也会产生很好的优化,例如: x=x+1; 可以写成: x++; 不过得小心谨慎,不然代码很容易出错. 4

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

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

  • 网站性能提高实战经验点滴记录

    DB: 1.数据库可以适当设计一些冗余字段来减少联合查询 2.经常查询的字段要建立索引 3.查询内容尽量简洁, 比如cakephp中的查询尽量设置$this->recursive=-1,并指定fields. 4.数据库用单独的服务器,有条件的常用查询数据单独分库 5.把session等数据放在Memcache而不是数据库中既能满足多服务器之间共享也能降低数据库的负载. 参考如下文章: http://www.linuxjournal.com/article/7451?page=0,1 6.Bad

  • 浅析JavaScript异步代码优化

    前言 在实际编码中,我们经常会遇到Javascript代码异步执行的场景,比如ajax的调用.定时器的使用等,在这样的场景下也经常会出现这样那样匪夷所思的bug或者糟糕的代码片段,那么处理好你的Javascript异步代码成为了异步编程至关重要的前提.下面我们从问题出发,一步步完善你的异步代码. 异步问题 1. 回调地狱 首先,我们来看下异步编程中最常见的一种问题,便是回调地狱.它的出现是由于异步代码执行时间的不确定性及代码间的依赖关系引发的,比如: // 一个动画结束后,执行下一个动画,下一个

  • js尾调用优化的实现

    尾调用(Tail Call)是函数式编程的一个重要概念,本文介绍它的含义和用法. 一.什么是尾调用? 尾调用的概念非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数. function f(x){ return g(x); } 上面代码中,函数f的最后一步是调用函数g,这就叫尾调用. 以下两种情况,都不属于尾调用. // 情况一 function f(x){ let y = g(x); return y; } // 情况二 function f(x){ return g(x)

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

    前言: 最近新到一个团队,才意识到基础的薄弱,牛人遍地,还是好好学习,天天向上. 一直都觉得网站优化的重点是图片,图片的使用也是博大精深.有必要总结一下图片的日常使用以及优化手法- 总的来说,图片的使用分为background和img两种,而优化方向来说分为减少请求,减少大小和清晰度 三个方面 一. background和img的区别: 日常开发中使用的场景区别: img是内容部分的东西,background-image是修饰性的东西. 加载方式的区别: 在网页加载的过程中,以css背景图存在的

  • JavaScript提高网站性能优化的建议(二)

    在javascript关于提高网站性能的几点建议(一)中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve Sounders的另外一本书<高性能网站建设进阶指南>之后,从JavaScript性能的角度进行总结概括,诸君共勉. JavaScript性能是实现高性能Web应用程序的关键 --Steve Sounders 1 利用js作用域链 作用域链(scope chain) 当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为

  • Javascript前端优化代码

    if 判断的优化 JavaScript条件语句在我们平时的开发中是不可避免要用到的,但是很多时候我们的代码写的并不好,一连串的if-else或者多重嵌套判断都会使得代码很臃肿,下面举例进行优化. 需求:现在有 4 个产品,分别是手机.电脑.电视机.游戏机,当然每个产品显示的价格不一样. 1.最简单的方法:if 判断 let commodity = { phone: '手机', computer: '电脑', television: '电视', gameBoy: '游戏机', } function

随机推荐