优化图片以提高站点速度的3种方法

释放双眼,带上耳机,听听看~!

为了使您的wordpress网站吸引访问量,吸引访问者并增加转化次数,其内容必须吸引人。视觉媒体可以帮助您。不幸的是,高质量图像通常意味着较大的文件大小,这会减慢加载时间。
当然,从您的网站中删除视觉内容根本不是一种选择。但是,有些技术可用于格式化和优化图像以提高站点速度。
在本文中,我们将说明图片如何影响 WordPress网站的速度和性能。然后,我们将为您提供三种优化方式,以减少页面加载时间。让我们开始吧!

图片如何影响网站的速度和性能

根据HTTP Archive的说法,图像占网页总重量的近四分之一。您的服务器会努力加载媒体文件,尤其是大文件。
对于页面加载时间,每一秒都很重要。渲染时间太长的网站会带来糟糕的用户体验(UX),从而导致跳出率更高。
除了您的访问者之外,Baidu和google也不喜欢缓慢的网站。优化的图像更易于爬网和索引。该快你的网站,越有可能是在搜索引擎结果排名更高。
降低图像的质量和大小将占用较少的站点带宽和磁盘空间。您的页面将变得更亮,您的服务器将更快地与用户的浏览器通信,最终,您的内容将更快地加载。
可以将图像压缩与打包旅行进行比较。首先,您可能会在不折叠任何东西的情况下不经意地将衣服扔进手提箱。您会发现它很快就会填满,以至于您几乎无法关闭它。
然后,您甚至可以使用真空密封袋尝试整齐地折叠每个项目。现在,您拥有 比以前更大的空间。内容是相同的,唯一的不同是它们的打包方式。
但是,您不希望将媒体文件的质量降低到看起来不专业或完全无法理解的程度。适当的图像优化是要在质量和尺寸之间找到适当的平衡。

优化图像以提高站点速度的3种方法
您无需在优质媒体和短加载时间之间进行选择。如果使用适当的工具和最佳实践,那么可能会两全其美。您可以通过以下三种方式优化图像以提高站点速度。

减小图像的文件大小,然后再将其上传到您的站点
优化图像的一种方法是在将其上传到WordPress媒体库之前,减小其文件大小。简而言之,这涉及调整尺寸大小并通过压缩来调整质量。

图像压缩有两种类型:

有损压缩是指图像丢失其某些数据以减小文件大小时。虽然不足以给访问者带来任何明显的变化,但它可以减轻服务器的负担。
通过无损压缩,所有图像数据都是完整且可检索的。画质不会受到影响,图像仅在未压缩时才会呈现。
您应该使用的类型取决于您的文件格式,我们将在后面讨论。

可用于压缩图像的在线工具是TinyPNG(或TinyJPG):

优化图片以提高站点速度的3种方法插图

 

TinyPNG图像文件压缩工具

它会自动应用理想的压缩方法,以最大程度地减少图像的文件大小而不会降低质量。
太大的尺寸也会给您的站点和服务器增加不必要的负担。因此,您还可以通过调整图像的高度和宽度来减小文件大小。您可以在上传HTML或使用照片编辑平台之前定义这些度量。
假设您的图片原始尺寸为5,472 x 3,648像素(px)。文件大小(或重量)为3兆字节(MB)。但是,您的网站只需要1,920 x 1,280像素的横幅图像。
将图像调整为这些尺寸并将其质量稍微降低百分之十,会将文件的总大小从3 MB(3,000 KB)减小到613 KB(KB)。

选择适当的文件格式

如前所述,压缩类型和文件格式都是进行优化的重要因素。选择适当的图像类型可以减轻其重量,进而提高网站的速度。
网络上的图像有四种主要文件格式:
便携式网络图形(PNG)。此格式需要无损压缩。通常,PNG图像是高质量的,但文件大小自然很大。
联合图像专家组(JPEG)。JPEG图像的质量往往低于PNG文件,但自然也较小。有损压缩是进一步减小其大小的最常用方法。
图形交换格式(GIF)。此格式仅使用无损压缩。它是为文件较小的动画图像保留的,通常用于社交媒体和博客文章。
WebP。一种相对较新的文件格式,可以使用有损或无损压缩。WebP图像比PNG小26%,比JPEG小34%。但是,并非所有主要的互联网浏览器(最著名的是Safari)都支持该格式。
WebP图像在提供最小的文件大小和最高的质量方面具有优势。但是,由于Safari是仅次于Google chrome的第二受欢迎的浏览器(尤其是对于移动设备),因此它可能不是可靠传递视觉内容的最佳选择。
应谨慎使用GIF。尽管它们通常是幽默或教学信息的极好来源,但动画往往会拖累您的网站速度。
在PNG和JPEG图像之间进行选择时,通常的共识是,前者最适合屏幕截图和图形,而后者则能产生更好的照片。

使用延迟加载插件,例如wp Smush

正如我们已经提到的,有一些在线工具可用于压缩媒体文件。但是,除了调整格式和大小外,您还可以利用延迟加载来进一步优化图像。
如果使用延迟加载图片,则当访问者仍位于顶部时,页面底部的照片或图形将无法呈现。用户开始滚动后,您的媒体文件在显示时将变得可见。
该技术的目的是最大程度地减少访问者的浏览器必须同时加载的图像数量。它有助于带宽和站点速度。
要启用此功能,我们建议使用图像优化和延迟加载插件,例如WP Smush:

优化图片以提高站点速度的3种方法插图(1)

 

WP Smush wordpress插件,可以优化图像以提高站点速度

这个免费的插件拥有超过一百万的活跃安装和五星级的WordPress评级,是解决各种图像优化任务(包括延迟加载)的强大解决方案:

优化图片以提高站点速度的3种方法插图(2)

 

仪表板设置中的WP Smush WordPress插件延迟加载功能

除了延迟加载外,WP Smush还使用无损压缩和图像大小调整来自动优化将媒体文件上传到WordPress时的媒体文件。您可以将其用于所有文件格式,包括PNG,JPEG和GIF。这样就无需记住要提前执行此过程。
安装并激活插件后,它将立即开始扫描您的站点以查找需要优化的图像。您可以通过WordPress >仪表板>设置从WordPress仪表板配置设置。

结论
高质量图像是您网站的重要组成部分。不幸的是,它们还可能拖累您网站的性能,从而损害您的用户体验和seo
在本文中,我们介绍了三种优化图像以提高站点速度的方法:
在将图像上传到您的站点之前,请减小它们的文件大小。
选择适当的文件格式。
使用延迟加载插件,例如WP Smush。

人已赞赏
技术杂烩

通过ELK系统监控Web攻击

2020-9-27 19:37:25

Linux技术杂烩

给Frp穿透的内网Web上https

2020-10-1 16:51:16

2 条回复 A文章作者 M管理员
  1. 直接用插件

  2. 除了这个,Nginx开启压缩也能减小图片大小,减少流量,或者把图片放到OSS之类的,会很好

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索