0571-88730320

首页> SEO资讯>

介绍几种图像优化技术来提高网站的性能

发布时间:2021-01-03 10:40:00

图像是web上基本的内容类型之一。他们说一幅画胜过千言万语。但是如果你不小心的话,图像有时会大到几十兆字节。

因此,虽然网络图像需要清晰明亮,但可以缩小其大小并进行压缩,加载时间可以保持在可接受的水平。我开始阅读Addy Osmani的优秀基本图像优化电子书,并开始根据他们的建议在我的网站上做一些图像优化。然后,对响应图像进行了研究和应用。

这将页面大小减小到445kb,约为62%!压缩图像就是在保持图像在可接受的定义范围内的同时减小文件大小。我使用imagemin压缩站点上的图像。

您可以更改pngimages、jpegimages和output的值以适合您的项目结构。另外,要执行图像压缩,需要根据要压缩的图像类型安装相应的插件。JPG的特点是有损压缩。这种快捷的压缩算法使其成为一种非常轻量级的图像格式。另一方面,即使被称为“有损”压缩,JPG的压缩方法仍然是一种高质量的压缩方法:当我们将图像体积压缩到原始体积的50%以下时,JPG仍然可以保持60%的质量。另外,JPG格式以24位存储单个图像,多可显示1600万种颜色,这足以满足大多数场景的颜色要求。这就决定了压缩前后的质量损失不容易被我们的肉眼发现——如果你使用正确的商业场景。

Jpg适合于呈现彩像。在我们的日常开发中,JPG图像通常以大背景图像、旋转木马图像或横幅图像的形式出现。

有损压缩在上面所示的旋转木马图像上很难表现出来,但是当它处理矢量图形、logo等线条感强、色彩对比度强的图像时,人为压缩造成的图像模糊会非常明显。

另外,JPEG图像不支持透明处理,透明图像需要用PNG表示。这里我们使用Mozilla的mozjpeg工具,它可以通过imagemin mozjpeg用作imagemin插件。可以通过运行以下命令进行安装:我发现在大多数情况下,将“质量”设置为70可以生成足够清晰的图像,但是您的项目要求可能不同,您可以自己设置适当的值。

默认情况下,mozjpeg生成渐进式JPEG,这会导致图像从低分辨率逐渐加载到高分辨率,直到图像完全加载。由于它们的编码方式,它们也比原来的JPEG小一些。您可以使用sindresorhus提供的这个命令行工具来检查JPEG图像是否是渐进式的。Addy Osmani总结了使用渐进式JPEG的优缺点。对我来说,我认为优点大于缺点,所以我坚持使用默认设置。

如果您喜欢使用原始JPEG,可以在options对象中将progressive设置为false。此外,请确保imagemin mozjpeg的版本已更改。请审阅相应的文件。每个人都说简历上没有项目可以写,所以我给你找了一个项目,还给了你一个建筑教程。Png(portablenetworkgraphicsformat)是一种高保真图像格式的无损压缩。8和24,这是二进制数的位。根据我们之前所知的对应关系,8位png多可以支持256种颜色,而24位png可以显示大约1600万种颜色。

与JPG相比,Png具有更强的透明性和对图像线条的处理能力。它弥补了上述JPG的局限性。缺点是太大了。如前所述,如果我们使用PNG来处理复杂和彩色的图像,成本会相对较高,我们通常会将其留给JPG存储。考虑到PNG在处理线条和色彩对比度方面的优势,我们主要用它来呈现小logo、简单色彩和强烈对比度的图像或背景。ngquant是我优化PNG图像的工具。您可以通过imagemin pnquant使用它:

我发现将质量设置为65-80是文件大小和图像质量之间的一个很好的折衷。了这些设置,我可以得到我的网站从913kb到187kb的截图,没有任何明显的视觉损失,惊人的79%的下降!JPEG一样,webp易于使用,具有丰富的细节。与PNG一样,webp支持透明性。像GIF一样,它可以显示动态图像。它结合了各种图像文件格式的优点。对于这一点,webp的官方介绍有一个更有名的说法:

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

webp图像的清晰度一般可以与JPEG和PNG媲美,而且文件大小要小得多。例如,当我将屏幕截图从上面转换为webp时,我得到了一个88kb的文件,其质量与原始913kb图像相同,减少了90%!就我而言,我觉得视觉效果是可比的,而且节省的尺寸也不容忽视。

既然我们已经意识到了尽可能使用webp格式的价值,重要的是它不能完全取代JPEG和PNG,因为webp支持在浏览器中并不常见。在撰写本文时,Firefox、Safari和edge都是不支持webp的浏览器。

安装并运行以下命令:

我发现将“质量”设置为85会生成质量相当但比PNG小得多的webp图像。对于JPEG,我发现将质量设置为75可以很好地平衡视觉和文件大小。一旦有了webp图像,就可以使用以下标记将其提供给可以使用它们的浏览器,并将PNG或JPEG用于与webp不兼容的浏览器。有了这个标签,了解image/webp媒体类型的浏览器将下载并显示webp图像,而其他浏览器将下载JPEG图像。任何不支持图片的浏览器都将跳过所有源标记并加载底部的img标记。因此,我们通过提供对所有浏览器类的支持来逐步增强我们的页面。

请注意,在所有情况下,IMG标记都是实际呈现给页面的内容,因此它实际上是语法的必需部分。如果省略IMG标志,则不渲染图像。图片标记和其中定义的所有源都在那里,这样浏览器就可以选择要使用的图片的路径。选择源图像后,它的URL被传递到IMG标记,即显示的内容。这意味着您不需要设置图片或源标记的样式,因为浏览器不会呈现它们。因此,您可以继续使用IMG标记进行样式设置。正如你在网页上看到的那样,优化图像的过程并不复杂。通过减少页面加载时间,可以为客户带来更好的用户体验。希望本文能对大家有所帮助,共同进步!

技巧精选

热门推荐

Copyright © 2015-2020 keniu.net