专注国内外云服务器
分享建站技术教程

通过缩放图像以提高WordPress网站性能

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

网站速度对其成功至关重要,因为47%的访问者可能会离开加载时间超过两秒的网站。

虽然有几个因素会影响您的网站性能,但图像需要特别注意。除了使用适应不同屏幕尺寸的图像外,您还应该提供缩放图像。

提供缩放图像涉及通过将图像重新调整为完美尺寸来优化图像——不要太小,也不要太大。使用正确缩放的图像将对网站速度和性能产生积极影响,从而改善您网站的SEO(搜索引擎优化)。

本文将解释如何在您的WordPress网站上提供缩放图像。我们还提供了插件推荐,以帮助您自动提供缩放图像。

什么是缩放图像?

缩放图像是经过调整以适合网站所需的确切尺寸的图像。

如果您使用小图像填充较大的区域,则放大时会变得模糊。另一方面,如果你使用过大的图像,浏览器会缩小它们以适应给定的尺寸,但图像尺寸会保持不必要的大。

例如,如果您将500 x 500像素的图像用于50 x 50像素的缩略图,则浏览器必须先下载并缩小图片,然后才能将其显示给访问者。此过程效率低下,并且会减慢网站加载时间。

但是,如果您通过提供缩放图像来优化图像,则不会出现此问题。

如何提供缩放图像?

现在是时候学习如何在您的WordPress网站上正确提供缩放图像了。有两种方法可以做到这一点——手动或使用插件。本节将向您展示如何手动缩放图像。

步骤 1-分析网站

如果您想在完全优化整个媒体库之前尝试使用少量图像,请尝试缩放在您网站的多个页面上重复出现的图像。例如,网站徽标或标题图像。

首先,您需要在网站上找到需要重新缩放的图像以及要使用的适当尺寸。为此,我们将使用GTMetrix。

1. 打开GTMetrix并输入您的WordPress网站URL。单击Test Your Site按钮。

2. 完成网站分析后,转到“Structure”选项卡并单击“Properly size images”部分。

3. 本部分将显示您网站中的哪些图像需要优化。Potential Savings列将显示提供缩放图像后的潜在节省。保存图像的URL以备后用。

步骤 2-使用检查工具找出最大显示尺寸

WordPress已经包含一个名为srcset的用于图像优化的本机功能,它可以使您的图像具有响应性。

srcset为上传到站点的每个图像创建多种尺寸。例如,如果您上传2000 x 2000像素的图片,WordPress会自动创建其他几种尺寸的副本,例如:

然后,它向浏览器提供这些不同的尺寸,浏览器只会下载最优化的尺寸。

但是,完全依赖 srcset并不能像提供缩放图像那样显着提高站点性能。为了进一步优化您的WordPress网站,仍然需要找出显示图像的最大尺寸。

例如,如果最大显示尺寸为500 x 500像素,则无需上传2000 x 2000像素的图像。因此,要找出图像的最大显示尺寸,请使用检查工具

1. 在Chrome中,右键单击图像并单击Inspect。如果您使用Firefox,请选择Inspect Element,或者在Edge中选择Developer Tools。在本例中,我们将使用Chrome。

2. DevTools面板将显示在浏览器窗口的右侧在那里,图像代码将突出显示。将鼠标悬停在代码上以查看图像的Rendered sizeIntrinsic size

3. 记下Rendered size,因为它是最大显示尺寸。同时,Intrinsic size是图像的实际尺寸,是用户浏览器下载的尺寸。

步骤 3-重新缩放图像

下一步是重新调整大小不正确的图像。有多种方法可以做到这一点:使用图像编辑器、WordPress媒体库或媒体设置。让我们看看他们中的每一个。

通过图像编辑器

在WordPress网站中缩放图像的第一种方法是使用图像编辑器。有大量可用的在线和离线图像编辑器工具。

用于编辑图像的离线工具的示例包括PhotoshopGIMP。在本教程中,我们将使用在线图像编辑器PicResize。

1. 打开PicResize并选择From URL

2. 粘贴您要编辑的图像的URL,然后单击Continue to Edit Picture

3. Select a new size for your picture选项下有一个下拉菜单。选择Custom Size

4. 对于新的图像尺寸,根据检查工具建议的渲染尺寸输入WidthHeight

5. 向下滚动并点击I’m Done, Resize My Picture! 按钮。

6. 通过单击Save to Disk来保存图像。立即执行,因为PicResize会在20分钟后自动删除图像。

7. 通过删除文件名开头的rsz_将图像重命名为其原始名称。

通过WordPress媒体库

要使用此方法提供缩放图像,您将使用WordPress媒体库裁剪图像。这样做的方法如下:

1. 在WordPress仪表盘上,转到文章选项卡。

2. 找到包含您要重新缩放的图像的文章,然后点击编辑

3. 在文章上,单击要缩放的图像。选择替换->打开媒体库

4. 将出现一个媒体库弹出窗口。在那里,导航到右列,然后单击编辑图像链接。

5. 在Scale Image部分下,您将看到原始图像的大小。在其下方的字段中输入新的缩放尺寸 – 基于上一步中的Rendered size。请注意,当您键入水平尺寸时,垂直尺寸会自动调整。单击Scale

图像现在已成功缩放。

通过管理媒体设置

最后一种方法是通过直接调整媒体设置来缩放图像:

1. 在WordPress站点仪表盘上,导航到Settings -> Media

2. 您将看到“Media Settings页面,其中设置了默认图像尺寸。它包括中等的尺寸,以及缩略图设置

3. 设置每个图像尺寸的最大宽度和高度。设置首选图像尺寸后,单击保存更改按钮。

这些设置将提示 WordPress 自动缩放您将来上传的图像。

步骤 4-替换图像

要手动缩放图像,您还必须替换现有图像。在这个例子中,我们将使用一个名为Enable Media Replace的WordPress插件。

1. 从插件菜单安装并启用插件Enable Media Replace。

2. 导航到Media -> Library并将布局从Grid更改为List

3. 将鼠标悬停在要替换的图像上,然后选择Replace Media

4. 单击Choose File按钮以选择您保存的缩放图像。

  1. 设置ReplacementDate选项,然后单击Upload

对于Replacement Options ,如果缩放的版本使用相同的格式,请选择Just replace the file 。同时,对于Date Options,建议保留原来的日期。

5个提供缩放图像支持的插件

现在您已经学会了如何手动缩放图像,让我们来看看如何使用 WordPress 插件来做到这一点。

虽然手动过程允许更高的精度,但这种方法可以更轻松、更快速地提供缩放图像,因为插件将自动执行该过程。

以下是我们挑选的五个在WordPress中提供缩放图像的最佳插件。

1.Smush

Smush是用于WordPress图像优化目的的最受欢迎的插件之一。它有助于在不影响图像质量的情况下调整图像大小和压缩图像。

该插件有助于在您的WordPress网站上提供缩放图像,具有以下功能:

Smush的免费版本提供了出色的工具来在WordPress网站中提供缩放图像。它优化无限图像,只要每个图像大小不超过5MB。

同时,高级计划具有许多附加功能,例如与免费版本相比优化速度提高200%以及保持EXIF数据完整的选项,这对于摄影师来说是理想的选择。

2.Optimole

Optimole是另一个在WordPress中提供缩放图像的优秀插件。设置完成后,它将自动调整图像大小以适应各种屏幕尺寸。

借助以下工具,使用Optimole缩放图像非常简单:

使用Optimole的免费计划,为每月最多5,000名访问者的WordPress网站缩放图像。要在流量较高的网站上使用它,必须订阅高级计划。

3. EWWW Image Optimizer

EWWW Image Optimizer是一种图像优化工具,可帮助您在WordPress网站上缩放图像。

通过使用EWWW Image Optimizer的一系列出色功能来提供缩放图像,例如:

EWWW Image Optimizer的核心插件是免费的,但付费计划提供更强大的功能。他们可以处理多个网站上的图像优化,并增加带宽限额。

4.ShortPixel

Shortpixel通过提供高质量的图像压缩来有效地提高WordPress网站的性能。

该插件将通过使用以下功能来帮助提供缩放图像:

它的免费版本每月优化多达150张图像。同时,其付费版本包括具有各种图像配额的月度和一次性计划。此外,ShortPixel为非营利组织提供免费的优化积分。

5.Perfect Images

Perfect Images有助于优化WordPress的视网膜显示图像。该插件的功能包括:

除了免费计划外,这个WordPress插件还提供付费版本,支持延迟加载、自动调整站点媒体库中的图像大小,并可在多个网站上使用。

小结

提高WordPress网站性能的最佳方法之一是提供缩放图像。这意味着调整站点图像的大小以适合放置它们的区域的确切尺寸。

优化图片可以显着改善您网站的加载时间和在搜索引擎结果中的排名,从而增加网站流量并降低跳出率。

此外,在WordPress网站中提供缩放图像并不难。您可以手动完成,也可以使用 WordPress 插件。

如果您选择遵循手动方法,则步骤包括:

  1. 分析网站——在网站上找到需要重新缩放的图像。
  2. 找出图像的最大显示尺寸——使用检查工具找出图像的最大显示尺寸。
  3. 缩放图像——通过使用图像编辑器或通过媒体设置指定最大图像尺寸,将图像缩放到适当的尺寸。或者,通过WordPress媒体库裁剪图像。
  4. 替换原始图像– 用正确缩放的图像替换现有图像。

如果您更喜欢使用更实用的方法提供缩放图像,请使用插件。这样做会自动在WordPress网站中提供缩放图像,这样您就可以专注于其他重要的网站方面。

文章来源于互联网:通过缩放图像以提高WordPress网站性能

相关推荐: 如何清除WordPress网站缓存

拥有一个快速加载的网站对于用户体验和SEO(搜索引擎优化)至关重要。具有优化速度的网站往往具有较低的跳出率,从而导致更高的参与度和转化率。谷歌也偏爱快速网站,并在搜索结果页面上排名更高。 从编码标准到托管服务提供商,许多组件都会影响网站速度。因此,有很多方法可…

赞(0)
未经允许不得转载:吾上云 » 通过缩放图像以提高WordPress网站性能
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们