如何确保手机网站速度的最佳图像尺寸

您正在手机上，准备购买您一直在关注的产品，并且网站只是…。突然，您不耐烦地敲击，想知道您的互联网是否被损坏或诅咒网站。老实说，您可能只是反弹。你并不孤单。

您是否知道如果加载需要超过3秒钟，则有53％的移动用户会放弃页面？现在考虑有关您网站的信息。这是大量的潜在客户消失，永无止境。加载时间缓慢不仅使游客感到沮丧；他们伤害了您的底线。它们会影响您的搜索引擎排名（SERP），并使人们首先很难找到您。在这篇文章中，我们将向您展示如何控制这些较重的图像页面，并确保手机网站速度的最佳图像尺寸。我们还将向您介绍一些好的工具，例如Divi，可以帮助您响应地展示图像。

为什么移动速度很重要？

缓慢的网站的影响不仅仅是令人讨厌。它可以影响用户体验（UX），搜索引擎优化（SEO）和您的底线。

想象一下，您正在浏览新的夏季礼服或最热门的新耳塞。您可以在网站上点击，感觉就像您正在看油漆干燥。挫败感陷入了困境，您可能会保释，找到另一个带有更快网站的零售商。这称为反弹，这对在线业务来说是个坏消息。根据Databox的数据，平均跳出率约为44％。更高的事情可能会导致收入损失和缺乏参与，从而杀死在线业务。

让我们不要忘记移动SEO。 Google就是要提供最佳的用户体验，包括确定快速加载的移动网站。他们使用移动优先索引，这意味着他们在确定搜索排名时主要查看网站的移动版本。

但是，不良移动速度的影响超出了沮丧的用户和较低的排名。它可以并且将达到您的底线。想象一个使用WordPress构建的缓慢加载的电子商务网站。这些额外的秒数（超过1-2个超过1-2个）可能会使您销售。保持网站在移动设备上的快速运行至关重要，因此确保您不会失去客户，因为您的网站花费太长时间至关重要。

有很多方法可以加快您的网站，但是低悬垂的水果是确定手机网站速度的最佳图像尺寸。

WordPress的图像优化基础知识

图像对于使您的网站看起来不错并保持用户参与度至关重要。太大的图像确实可以减慢您的网站。正如我们了解到的，研究表明，大多数人不会永远等待。那么，如何在不牺牲速度的情况下保持图像看起来不错？让我们探索一些基础知识，以使您的网站快速，平稳地运行。

1。选择正确的图像格式

您可以在WordPress网站上使用多种图像类型，包括JPG，PNG和WebP。哪一个最适合使用？让我们深入研究每种图像类型，最好使用哪些情况。

• JPG：这些就像您的日常照片。它们非常适合具有宽色变化和平稳过渡的图像，例如风景或肖像。它们适合大多数情况，例如英雄背景，团队照片，博客文章的特色图像等。也就是说，JPG的尺寸可能不适当，使它们的文件大小更大。
• PNG： PNG非常适合具有锋利边缘的图像，例如徽标或带有文本的图形。它们也非常适合具有纯色大图像的图像，因为它们保持颜色清晰且干净。但是，PNG倾向于具有较大的文件大小，因此请使用PNG文件来减少设计的较小区域以减小其尺寸。
• WebP： Google的创意，WebP通常提供最佳的压缩，即使使用大图像，也会导致文件大小要小得多（示例：1920px x 1080px）。图像质量不如JPG，但两者之间的大小差异很大。

2。调整图像大小

图像大小很重要。为了保持尺寸，上传图像仅在您网站上所需的大小。无需上传巨型图像，然后缩小它。它为您创造额外的工作，并将减慢您的网站。

重要的是要记住，一种尺寸并不适合图像。智能手机上的访客是否需要为较大的桌面屏幕设计的巨大图像？他们没有。在可能的情况下，使用响应式图像为每个屏幕尺寸提供完美尺寸的图像。我们将在稍后再进行更多，但是确保您的图像对WordPress响应的最佳方法之一是使用WordPress主题（例如Divi），该主题允许您在每个浏览器断点上上传图像，从而使文件大小降低。

3。挤出不必要的

当涉及图像大小时，较小的更好。在WordPress中使用图像时，我们希望在不牺牲质量的情况下使图像尽可能小。您可以使用诸如图像优化插件之类的压缩工具为您进行繁重的举重。 EWWW图像优化器之类的工具很好，但是我们将在本文的后面更深入地研究工具。

许多WordPress插件和在线图像调整工具都使用有损或无损压缩来减少图像的大小。无损压缩就像小心地折叠一张纸一样 - 您可以完美地展开它，并在需要时取回原始的。它非常适合具有锋利边缘的图像，但可能并不总是会导致最大的文件尺寸减小。

另一方面，无损压缩更具侵略性。这就像皱着眉头一样。您可能会失去一些细节，但是您的文件大小要小得多。

4。装载图像准备被看到时

您可以采取的另一个步骤是在WordPress上懒负载图像。想象一下向下滚动长页。您真的需要一次加载所有照片吗？可能不是。懒惰加载只会加载您需要查看页面的图像，将页面下方放置在页面上，等待加载一旦您到达它们。像WP Rocket一样，插件可以轻松地将懒惰加载添加到WordPress网站上。它将加快初始页面加载时间，这对于保持访问者的满意和页面大小降低至关重要。

图像维度最佳实践

在图像尺寸方面，有一些关键实践需要牢记以确保您的网站迅速加载，并且在所有设备上看起来都很好：

使用响应式图像尺寸

不同的设备具有不同的屏幕尺寸和分辨率，因此一种尺寸适合的方法无法使用。例如，台式机可能需要大小为1920px宽的图像，而移动设备仅需600px宽。您可以使用响应式图像为每个设备提供适当的尺寸。诸如HTML中的秘密属性或响应式WordPress主题之类的工具可以使DIV中包含的图片根据用户的设备提供适当的图像大小。

纵横比很重要

在图像上保持一致的方面叛徒可以帮助避免失真或怪异的裁剪。例如，如果您的桌面图像具有16：9的纵横比，则移动版本应保持相同的比率，即使它是较小的图像。这样可以确保您的图像在所有屏幕尺寸上看起来都是相称和专业的。

避免过度尺寸

上载比必要的图像更大是一个常见的错误，可以减慢您的网站。例如，如果您的网站的内容区域只有1080px宽，则不需要上传2000px宽的图像。超大图像消耗带宽和存储，导致页面加载时间较慢。始终调整图像大小以匹配您网站上显示的最大尺寸。

跨设备测试

即使有正确的维度，图像在各种设备和浏览器上的行为也会有所不同。始终在多个设备（台式机，平板电脑和智能手机）上测试您的图像，以确保它们看起来敏捷而迅速。诸如Google的移动友好测试或浏览器的开发人员工具之类的工具可以帮助您找到并修复所有屏幕尺寸的图像问题。

考虑图像压缩

即使有正确的尺寸，图像仍然太大。压缩工具可以减少文件尺寸而不牺牲质量。例如，高质量的JPG或WebP图像可以被压缩以更快地加载，同时看起来不错。将适当的尺寸与压缩结合在一起，可确保您的图像看起来不错，并保持页面尺寸最小。

在WordPress中尺寸尺寸的最佳工具是什么？

有几种方法可以轻松调整WordPress的图像：带有插件，诸如Divi（例如Divi）或Divi AI的内置功能。让我们更多地探索它们，以便您更好地了解它们的作用。

1。WordPress插件

使用图像优化插件是调整图像大小的最佳方法之一。它们通常允许您在上传到WordPress Media Gallery时执行诸如图像的批量优化或调整图像大小的操作。许多人还提供高级功能，例如WebP转换，懒惰加载和各种级别的图像压缩。

• EWWW Image Optimizer：一个可靠的选项，具有诸如批量优化，背景优化和转换为WebP格式之类的功能。 EWWW Image Optimizer提供了一个免费计划，使用有限的使用量和付费计划起价为每月8美元。
• 缩短像素：以其出色的压缩算法和能够显着减少图像文件大小的同时保持质量的能力而闻名。 Shortpixel提供了一个免费的计划，使用有限的使用情况，每月每月$ 9.99。
• Optimole：强调速度和性能。使用基于云的系统进行图像优化和交付。 Optimole提供了免费的计划，使用有限的使用量和付费计划每月22.99美元。
• WP Smush ：一种受欢迎且评价高度的选项。 Smush提供免费的付费计划（每月3美元起），其功能具有自动优化，有损/无损压缩，懒惰加载和WebP转换。
• 富有想象力：一个由AI驱动的插件，侧重于高质量的压缩，最小的损失。 Fimify提供了一个免费的计划，使用有限的使用和付费计划，起价为每月11.99美元。

2。divi（WordPress主题和页面构建器）

Divi不仅仅是WordPress主题，它是建立响应式网站的完整框架。它提供了一个强大的前端视觉构建器，并具有响应式控件，使您可以使用最佳的图像尺寸来用于手机网站速度。

Divi通过其响应式编辑系统和设计设置来处理移动图像大小。当您在Divi中添加图像时，您可以为桌面，平板电脑和移动视图设置不同的图像。这是Divi响应式设计功能的一部分，使您可以优化每种设备类型的图像。您可以调整设置，例如尺寸，位置，水平偏移等，特别是用于移动设备的设置，确保您的图像在所有屏幕尺寸中看起来都很完美。

更改较小屏幕的图像

在任何包含图像的设计模块中，Divi的响应控制措施允许您显示一个背景图像，而台式机则显示了另一个用于平板电脑和移动设备的背景图像。例如，在Divi网站上编辑英雄部分时，您可以添加测量1920px x 1080px的背景图像，这是大屏幕的理想尺寸。根据所使用的图像，在移动设备上查看相同的图像看起来不太好。因此，Divi包括设置，允许您为较小的屏幕添加较小的背景图像（或完全不同的图像）。

背景定位

Divi还使您可以控制背景图像在不同屏幕尺寸上的位置。每个模块，列，行和部分都有这些控件，无论设备访问者使用哪种设备，都可以轻松确保图像看起来不错。

例如，您可以设置一个以台式机上为中心的背景图像，但将其重新定位到移动设备上的顶部或底部。这样可以确保图像中最重要的部分总是可见的，无论屏幕尺寸如何。这是使用一张图像并将页面尺寸保持在最低限度的好方法。

Divi内置了懒惰的加载

当您使用Divi添加图像或背景时，主题会通过自动施加懒惰加载来照顾繁重的举重。直到用户滚动到该部分，图像才会加载，以保持页面快速响应。 Divi利用了现代浏览器支持的HTML属性，以确保图像被最小的处理开销延迟。结果是更快的页面速度和更平滑的用户体验。通过减少预先加载的图像数量，Divi有助于改善关键指标，例如最大的内容涂料（LCP），并提高您的核心网络生命力性能。

要了解有关在Divi中使用图像的更多信息，请查看我们在Divi中使用图像的最终指南。

得到Divi

3。Diviai

您可以使用Divi来确保手机网站速度的最佳图像尺寸是使用Divi AI生成完美尺寸的图像。 Divi AI就像您网站的个人设计助理。文本提示可以生成文本，代码，网页，完整网站和像素完美照片。

例如，您需要一张雄伟的雪山脉山脉的图像，以进行单板滑雪业务。您已经搜寻了免版税的库存图像网站，但找不到想要的东西。 Divi AI可以使用指定的大小为您生成该图像。

多亏了Divi的响应控制，您也可以使用Divi AI来生成较小屏幕的图像。

Divi AI不仅创建漂亮的图像。它创建智能图像。您可以告诉Divi AI确切需要什么尺寸，并且可以提供。

获取Divi AI

Divi使移动网站的调整图像变得轻而易举

找到适合手机网站速度的最佳图像尺寸并不一定是一个挑战。如果您选择构建Divi的网站，那么您将有足够的能力来处理缓慢载荷的图像。 Divi的内置图像优化功能，包括响应式调整和懒惰加载，在幕后工作，以确保图像在任何屏幕尺寸中都完美显示。但是，Divi的好处并不止于此。使用Divi AI，您可以在所需的确切尺寸中生成高质量的图像，从而消除笨重的，缓慢的网页。

要获得更多控制权，请利用诸如EWWW Image Optimizer之类的插件的功能来进一步压缩图像并微调网站的速度。将Divi的优势与强大的工具相结合，您可以创建一个看起来令人惊叹和快速负担的网站，使您的访客快乐和业务蓬勃发展。

您想了解更多有关加速您的网站的更多信息吗？从我们的博客中查看这些帖子：

• 如何提高WordPress的Google PagesPeed Insights得分
• 12个最佳WordPress速度优化插件（排名）
• Divi速度优化：最终指南
• 5个最快的WordPress托管公司（测试）