SEO新闻

当前位置: 首页 > SEO新闻

图像优化如何降低网站权重

来源:建站公司发布时间:2021-05-04 15:04:00

图像是web上基本的内容类型之一。他们说一张照片值一千个字,但如果你不小心,它可能值几兆字节。

因此,尽管web图像需要清晰和清晰,但它也必须以可管理的大小呈现,以保持加载时间小和数据利用率在可接受的水平。在阅读了Addy Osmani的优秀的基本图像优化电子书之后,我在我的网站上实现了他的建议。然后,我对响应图像做了一些研究,并将其应用到我的网站上。将页面重量减少到445kb。页面重量减少62%

这篇文章描述了我为使主页的权重更易于管理而采取的步骤。压缩图像是为了减小文件大小,同时保持可接受的视觉质量水平。为了压缩我网站上的图像,imagemin是我选择的工具。您可以自由更改pngimages、jpegimages和output的值,以匹配您的项目结构。要执行任何压缩,需要根据要压缩的图像类型引入几个插件。为了压缩JPEG图像,我使用了Mozilla的mozjpeg工具,它可以作为imagemin mozjpeg的imagemin插件使用。您可以通过运行以下命令来安装它

我发现在大多数情况下,将质量设置为70可以产生足够好的图像,但效果可能不同。你可以根据你的实际情况做实验。默认情况下,Mozjpeg生成逐行JPEG,这会导致图像从低分辨率逐渐加载到高分辨率,直到图像完全加载。由于它们的编码方式,它们通常也比基线JPEG小一些。您可以使用sindresorhus的这个漂亮的命令行工具来检查JPEG图像是否是渐进式的。Addyosmani详细介绍了使用渐进式JPEG的优缺点。对我来说,我认为优点大于缺点,所以我坚持使用默认设置。如果您喜欢使用基线JPEG,可以在options对象中将progressive设置为false。另外,一定要访问imagemin mozjpeg页面以查看其他可用设置。Pngquant是我优化PNG图像的工具。您可以通过imagemin pnquant使用它

我发现质量参数65-80可以很好地平衡文件大小和图像质量。有了这些设置,我可以得到一个从913kb到187kb的网站截图,而不会有任何明显的视觉质量损失。降价79%!这是同一个文件。看一看,自己判断,Webp是Google引入的一种相对较新的格式。它的目标是提供更小的文件大小通过编码图像无损和有损的格式,使它成为一个理想的替代JPEG和PNG。Webp图像可以匹配JPEG和PNG的视觉质量,但可以大大减小文件大小。例如,当我从上面将屏幕截图转换为webp时,我得到了一个88kb的文件,其质量与原始的913kb相同。减少90%!

就我个人而言,我认为视觉质量是可比的,你节省的成本是很难忽视的。既然我们已经确定了尽可能多地使用webp格式的价值,应该注意的是,webp不能完全取代JPEG和PNG,因为大多数浏览器都不支持webp。让我们看看将webp图像放到web上的步骤。使用imagemin webp插件,可以很容易地将JPEG和PNG图像转换为webp。我发现当quality参数设置为85时,生成的webp图像在质量上与PNG图像相似,但是会大大降低。对于JPEG,我发现将quality参数设置为75可以很好地平衡视觉质量和文件大小。

老实说,我还在尝试这些价值观,所以不要把它们当作建议。并确保检查imagemin webp页面中的其他可用选项。一旦有了webp图像,就可以使用以下标记将它们提供给可以使用它们的浏览器,并为不支持webp的浏览器提供等效的(优化的)JPEG或PNG回退。有了这个标记,支持webp媒体类型的浏览器将下载webp进行转换和显示,而其他浏览器将下载JPEG变体。任何不理解图片的浏览器都会跳过所有源并加载底部IMG标记的SRC属性中定义的内容。因此,我们通过提供对所有类型浏览器的支持来逐步增强我们的页面。

请注意,在所有情况下,IMG标记都是页面上实际呈现的内容,因此它实际上是语法的必需部分。如果省略IMG标记,则不渲染图像。图片标记和其中定义的所有源都位于此处,以便浏览器可以选择要使用的图像变体。选择源图像后,URL将被输入IMG标记,即显示的内容。这意味着您不需要设置图片或源标记的样式,因为它们不是由浏览器呈现的。因此,您只能像以前一样设置img标记的样式。正如您所看到的,在web上使用的优化图像的过程并不复杂,它可以通过减少页面加载时间为客户带来更好的用户体验。

技巧精选
热门推荐

扫码咨询