首页- 百度SEO资源- 图像优化将网站大小减少62%

图像优化将网站大小减少62%

发布时间:2021-01-02 17:00:00

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

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

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

您可以更改pngimages、jpegimages和output的值以适合您的项目结构。

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

JPG的特点是有损压缩。这种快捷的压缩算法使它成为一种非常轻量级的图像格式。另一方面,即使称之为有损压缩,JPG压缩仍然是一种高质量的压缩方法:当我们将图像体积压缩到原始体积的50%以下时,JPG仍然可以保持60%的质量。此外,JPG格式将单个图像存储在24位,可以呈现多达1600万种颜色,这足以满足大多数场景中的颜色要求。这就决定了压缩前后的质量损失是不容易被我们的人眼发现的——只要您使用正确的业务场景。

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

有损压缩确实很难在上述车轮地图上显示马蹄形,但当它处理具有强烈线感和强烈色彩对比度的图像如矢量图形和标志时,人工压缩造成的图像模糊会相当明显。

此外,JPEG图像不支持透明处理。透明图像需要通过调用PNG来呈现。这里我们使用Mozilla的mozjpeg工具,它可以通过imageminmozjpeg作为imagemin插件。您可以通过运行以下命令安装它:我发现在大多数情况下,将quality设置为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万色左右。

Png图像比JPG有更强的色彩表现力,线条处理更精细,对透明度有很好的支持。它弥补了上述JPG的局限性。缺点是它太大了。如前所述,当PNG用于处理复杂的彩像时,成本会相对较高,一般会交给JPG存储。考虑到PNG在处理线条和颜色对比度方面的优势,我们主要使用它来呈现小logo、简单的颜色和强烈对比的图片或背景。

Pngquant是我优化PNG图像的工具。您可以通过imagemin pngquant使用它:我发现将质量设置为65-80在文件大小和图像质量之间提供了一个很好的折衷方案。有了这些设置,我可以得到我的网站从913kb到187kb的截图,没有任何明显的视觉损失,惊人的下降79%!

像JPEG一样,webp易于处理细节图片,像PNG一样透明,动态图片可以像GIF一样显示——它集成了多种图像文件格式的优点。webp的正式推出在这一点上有着更有名的阐述:

与PNG相比,webp无损图像的大小减少了26%。在等效SSIM质量指数下,webp有损图像比同一JPEG图像小25-34%。无损webp支持透明(也称为alpha通道),只需要22%的额外字节。对于可接受的有损RGB压缩,有损webp还支持透明性,通常提供的文件大小是PNG的三倍。

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

webp图像的清晰度可以与JPEG和PNG相比,文件的大小要小得多。例如,当我将上面的截图转换为webp时,我得到了一个88kb的文件,其质量与913kb的原始图像相同,减少了90%!

既然我们已经认识到在可能的情况下使用webp格式的价值,那么需要注意的是,它不能完全替代JPEG和PNG,因为浏览器对webp的支持不是通用的。在撰写本文时,Firefox、Safari和edge都是不支持webp的浏览器。

安装并运行以下命令:

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

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

部署代码后可能存在的错误无法实时知道。为了在以后解决这些错误,我们花了很多时间进行日志调试。这样,我们推荐一个好的bug监控工具fundebug。

Copyright © 2015-2020. 未经许可,不可拷贝或镜像 gucui.net