Wordpress图片压缩提高网站打开速度的几种方法

阿里云代金券 腾讯云代金券 VULTR优惠码 Ucloud云主机

使用WordPress建站,上传图片是必不可少的。但是很多时候较大的图片会拖慢我们网站打开的速度,今天就分享几个压缩图片以提高网站打开速度的方法:

一、WordPress自带图片压缩(非插件)

默认情况下在WordPress 中上传图片文件时,会自动将图片质量按一定的比例压缩,从WordPress 4.5 版本开始,WordPress使用默认压缩比例设置82。以前的版本使用90设置。WordPress默认的图片压缩功能,并不会影响您上传的原始图像质量(除非您使用了第三方插件专门覆盖了此行为)。使用大约90%的压缩率会减小图像的大小,而保证图片质量仍然很高;如果使用80-85%之间压缩比例,则在大多数情况下,图片质量损失可以忽略不计,并且访问者的速度会提高很多。

但是,当您将新的图片上传到媒体库时,它还会自动生成一些指定比例的额外派生缩略图版本( 这些缩略图的大小比例可以在后台的 设置 > 媒体(Settings > Media)中自定义设置)

WordPress 已经提供了 jpeg_quality 扩展函数,方便用户自定义图片压缩比例参数。我们只要把代码添加到当前网站使用主题的 functions.php 文件就可以了。

将下面的代码添加到您主题的 function.php 中,将数字更改为所需的设置。100表示​​无压缩(或几乎没有压缩,不会产生任何有意义的差异);也就是关闭图片压缩功能,代码如下:

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

再比如,你想按 60% 的比例压缩图片,则可以这样写:

add_filter( 'jpeg_quality', create_function( '', 'return 60;' ) );

数字越小,图片压缩的越厉害,清晰度也就越低。由于是有损压缩的,因此,请检查图像的压缩结果,以确保您对即将出现的图像质量感到满意。

二、使用wordpress图片压缩插件:

1、插件:Image Quality

Image Quality 是一个支持可以在网站后台的 设置 > 媒体(Settings > Media)页面,就能自定义设置图片压缩质量的wordpress插件。

安装此插件后,会在后台的设置 > 媒体(Settings > Media)页面,新增一个新的 Image Quality 设置项,我们只需要根据自己的图片质量压缩需求,自定义压缩比例即可( 1 ~ 100 的数值)

Image Quality 插件下载地址:https://wordpress.org/plugins/image-quality/

类似插件还有:Imsanity

重新生成缩略图

自定义修改设置好图片压缩比例后,这个新的压缩比例只对新上传的图片文件有效,对应您之前已经上传的图片是不会起作用的,因为之前图片的压缩比例缩略图已经生成在媒体库里了。这时,我们就需要用到另外的 重新生成缩略图 插件。

Regenerate Thumbnails – 一键重新生成全站缩略图插件,帮助我们重新生成缩略图,并且,支持重新生成已上传到媒体库的图像的所有缩略图大小。

对于以下情况都很有用:

  • 添加了新的缩略图大小,并且您希望已上传图片能生成新的大小的缩略图;
  • 在后台的设置 > 媒体(Settings > Media)更改了现有缩略图的大小尺寸,需要重新生成新的缩略图;
  • 更换了使用不同大小的特色图像的WordPress主题。

此外,Regenerate Thumbnails插件还具有删除旧的未使用缩略图,释放服务器空间的功能。

插件启用后,在后台的 工具(Tools)> Regenerate Thumbnails 页面,可以重新生成缩略图。

除此之外,网友们还总结了几款强大的图片压缩插件,甚至对压缩效果和进行了对比:

以下是将测试和比较的五个WordPress图像优化器插件:

  • Imagify
  • Smush Image Compression and Optimization
  • EWWW Image Optimizer
  • ShortPixel Image Optimizer
  • Compress JPEG & PNG images by TinyPNG

我们将测试每个插件可以压缩样本图像的程度。使用这五个wordpress图像压缩插件进行动手测试,为了对这些工具进行测试,我们希望了解每个插件如何有效地优化同一图像。

因为一些插件提供不同级别的优化。提供了自动调整大小的工具,可以大大减少文件大小。

由于存在这些差异,很难提出客观的比较。以下是我们要做的事情:

我们将运行两个测试:一个用于JPG文件,另一个用于PNG。

JPG测试:

默认情况下,ShortPixel明显效果好些,但图片是有损压缩将文件大小减少约67%。TinyPNG获得第二名,有损压缩,Imagify只能将图像缩小约34%。

PNG测试:

这一次,Imagify占据榜首位置,TinyPNG和ShortPixel紧随其后。

您可能会注意到,这些插件与我们在JPG测试中看到的相同。这是否意味着他们肯定更好?不,可能默认设置是很大的因素。

如果普通用户在没有付费升级到高级版设置的情况下无法达到70%的压缩。

因此,在不付费的情况下,测试对比排名依次:Imagify,ShortPixel和TinyPNG。 

三、使用SVG格式图形

另一个建议是将SVG与其他图像一起使用。 SVG是一种可缩放的矢量格式,适用于徽标,图标,文本和简单图像。 以下是几个原因:

SVG可在浏览器和照片编辑工具中无限缩放。主流搜索引擎均索引SVG,就像它对PNG和JPG一样,所以你不必担心SEO。
SVG传统上(并非总是)文件小于PNG或JPG。 这可以加快加载时间。

国外博主Genki写了一篇很棒的文章,他比较了SVG、PNG和JPEG三者的大小。 以下是他测试中的一些内容,他比较了三种不同的图像类型。

JPG (优化后的体积: 81.4 KB)

PNG (优化后的体积: 85.1 KB)

SVG (优化后的体积: 6.1 KB)

与JPG相比,SVG的文件大小减少了92.51%。 与PNG相比,为92.83%。

以下是一些关于如何针对Web优化图像的一般最佳实践:

如果使用WordPress插件,请使用在其服务器上外部压缩和优化图像的插件。这样可以减少了您自己网站的负担。
尽可能使用矢量图像以及PNG和JPG
使用CDN加速向全球访问者提供图像
删除不必要的图像数据
裁剪空白区域并使用CSS提供填充来重新创建它
尽可能使用CSS3效果
将图像保存在适当的尺寸。虽然记得WordPress现在支持响应式图像来提供它们,而无需使用CSS调整它们。
使用Web字体而不是在图像中放置文本 – 缩放时它们看起来更好并占用更少的空间
仅对具有大量形状和细节的场景使用光栅图像
将位深度减小到较小的调色板
尽可能使用有损压缩
尝试找到每种格式的最佳设置
如果需要动画,请使用GIF(但压缩GIF动画)
如果您需要高细节和高分辨率,请使用PNG
使用JPG获取常规照片和屏幕截图
删除所有不需要的图像元数据
尽可能自动化流程
在某些情况下,您可能希望延迟加载图像以加快第一页渲染速度
在Photoshop等工具中将图像保存为“针对Web优化”图像
在Chrome中使用WebP格式图像可以提供较小的图像
在对图片进行格式化以获得更好的性能并遵循最佳做法后,搜索引擎,浏览器和网络将更好地加载您的网站,并为您的读者提供加载更快网站。

赞(1) 领红包
转载注明:楚狂人 » Wordpress图片压缩提高网站打开速度的几种方法

云计算我们是认真的

阿里云服务器腾讯云服务器

扫码领红包 或者 支付宝搜索:5981405

支付宝扫一扫打赏