快速图像交付：优化网络和CDN的图像

您想提高网站的性能吗？优化网络的图像！

这意味着什么？这意味着提供高质量的图像，使访问者在不放慢网站的情况下使访客感到高兴。

您是否知道90％的买家说图像质量会影响他们的购买决定？同样，Airbnb发现，带有专业照片的列表比没有专业照片的列表要比没有专业的预订。美丽的图像增强了转换，但是有一个捕获：大型，不优化的图像可以大大减慢您的网站。

我们有你的支持！这就是图像优化的出现。

在本指南中，您将学习最佳的技术，以优化网络和CDN的图像，以确保更快的负载时间和更好的性能。

3个网络基本图像优化技术

优化网络图像的有效方法是以正确的格式和尺寸为其使用，并在不失去质量的情况下压缩它。让我们介绍三种基本技术以开始您的优化旅程。

1。为网络选择正确的图像格式

诸如JPEG，PNG和GIF之类的较旧格式已经很好地为网络服务，但是它们缺乏诸如WebP和Avif之类的下一代格式的效率。这些现代格式具有相同的质量，并具有出色的压缩，这意味着您的图像加载速度而无需牺牲细节。

榜样和最佳实践

• 始终将图像转换为较小的文件大小和更好的性能的WebP或AVIF。

Google的Web.DEV研究发现，WebP图像比可比JPEG小25-34％，这使它们成为更快的网站的明智选择。在下面，您可以看到JPEG文件重43.84KB，WebP仅为29.61KB，但质量是相同的。

IMG

2。调整右维的图像大小

使用大于本地的图像会减慢您的网站，因为浏览器必须随时加载和调整大小。通过将图像缩放到将显示的确切大小上，您可以降低文件大小并提高加载速度。

榜样和最佳实践

始终调整图像大小以匹配网站上的实际显示尺寸。

• 对于WordPress博客文章，800px宽度是理想的选择。

• 对于WooCommerce产品图像，至少800px×800px确保了清晰度。

3。压缩图像而没有质量损失

图像压缩减少了文件大小，这意味着更少的HTTP请求和更快的添加图像，这对于提高页面速度至关重要。但是，压缩太多会导致照片模糊，从而影响您的网站的信誉和转化率。关键是找到适当的平衡：较小的文件大小而没有明显的质量损失。

榜样和最佳实践

使用不会改变图像质量但尽可能减少文件大小的压缩工具。

例如，您能发现这两个图像之间的区别吗？

我们不能！右边的一个被压缩了80％ ，但质量仍然相同。

现在，您知道了三种基本策略，您可以通过更高级的技术进一步采取图像优化工作，并使您的图像更加准备在网络上。

高级Web图像优化策略

图像优化超出了压缩和下一代格式。考虑高级技术，例如懒惰加载，响应式图像和Alt-Text优化，以提高性能和SEO。

1。实施更快的初始页面加载速度加载

为Web准备图像的第一个高级技术是应用懒惰加载。它通过推迟屏幕外图片的加载直到需要，有助于减少初始页面加载时间。

通过实现懒惰加载，您可以确保仅在图像在用户的视口上可见时加载，从而使页面感觉更快。

榜样和最佳实践

想象一下，您正在阅读WordPress博客文章，标题为“泰国10个最佳海滩”。懒惰的加载不是一次加载所有10张大图像，而是确保以下内容：

• 第一个海滩图像立即随页面加载。

• 其余图像仅在向下滚动时加载，减少初始加载时间。

您需要做的就是：

• 使用本机加载=“懒惰”作为折叠下方的图像。

• 从懒惰加载中排除英雄图像和关键视觉元素。

2。预加载并优先考虑要首先加载的关键图像

同样，另一个用于Web图像优化的高级技术是确保您的浏览器优先考虑关键图像，例如最大的内容涂料（LCP）元素。

LCP是核心网络生命值之一，它可以测量在页面上加载最大内容所需的时间（通常是图像）。为了改善LCP，您应该告诉浏览器优先考虑此关键图像。

示例和最佳实践

想象一下WooCommerce产品页面上的LCP元素 - 最有可能是主要产品图像。为了使其更快，超出懒惰加载，您也可以：

• 在LCP图像上使用FetchPriority =“ High”，以告诉浏览器立即加载它。

• 如果图像不在初始HTML中，则使用rel =“预紧力”，以确保浏览器提前加载。

3。使用响应式图像对不同的屏幕尺寸

使用响应图像通过确保根据用户设备加载最合适的图像大小来提高页面速度。这样可以防止超大图像放慢移动体验，同时保持较大屏幕上的高质量。

榜样和最佳实践

• 使用<picture>元素或SRCSET属性根据用户的设备提供不同的图像大小。

• 为移动，平板电脑和桌面显示器分别优化图像。

• 在构建页面或整个网站时设计移动优先。

以下是全球范围内的最佳常见屏幕分辨率：

• 桌面：1920×1080，1366×768，1536×864，1280×720

• 手机：360×800，390×844，393×873，412×915

• 平板电脑：768×1024，1280×800，800×1280，820×1180

4。为SEO优化Alt-Text

Alt-Text通过为搜索引擎提供相关上下文来提高可访问性并为SEO提供贡献。他们给出了图像的文字描述，并可能增加您在Google图像的最高结果中出现的机会。

榜样和最佳实践

• 简单，描述性但简洁，自然而然地合并相关的关键字。

• 避免关键字填充，并更多地专注于用户友好和有意义的描述。

例如，这是WooCommerce产品的一个很好的Alt-Tag示例：

“妇女超大的蓝色让夹克，带有纽扣前和两个胸部口袋。”

此Alt标签具有描述性，包括关键细节，并且自然整合了SEO的关键字。

另一方面，这将是一个糟糕的例子（关键字填充）：“蓝色Jean Jeack牛仔布超大的女士蓝色外套时尚时尚女士。”

5。利用CDN进行更快的图像传递

CDN（内容输送网络）是为Web准备图像并提高页面速度的另一种有效技术。

CDN通过使用缓存和直接调整大小来增强图像加载速度，以确保图像以正确尺寸的用户设备提供。

多亏了缓存，一旦对图像进行了优化，CDN就无需每次新设备请求它重新优化它。最重要的是，这些图像是从最接近用户的服务器（存在点）提供的，从而加快了图像交付。

例子

您的Origin Server在伦敦，但是悉尼的客户希望访问您的WooCommerce网站，该网站填充了产品图像。如果没有CDN，请求将一直到伦敦，然后回到悉尼。但是，使用CDN，请求由澳大利亚本地服务器处理，并且图像加载速度更快。

用CDN优化图像的最佳实践

• 检查您的URL，因为图像CDN依赖于URL来确定要加载的图像并使用大小，格式和质量（例如大小，格式和质量）。

• 确保CDN支持AVIF和WebP，因为如前所述，这些下一代格式改善了图像压缩和质量。

• 在使用任何图像CDN之前，请先优化图像（例如，使用压缩），以便添加其他优化层。
  

顶级工具和Web图像优化的插件

优化网络图像的最佳方法是使用性能优化插件，例如WP Rocket，Fimify和RocketCDN。此外，诸如Sketch或Photoshop之类的设计工具可以帮助精确地调整图像大小以供网络使用。另一个经验法则是使用完全响应的WordPress主题和移动友好的插件来确保图像正确适合不同设备。让我们介绍每个工具中的每一个。

1。Fimify - 最简单的图像优化插件

Famify是最简单的图像优化插件，它会自动批量压缩图像，同时保持高质量。 Fmimify可以帮助您应用前面提到的三种基本图像优化技术：压缩，下一代转换和调整较大图像的大小 - 毫不费力。

关键功能有益于网络优化

让我们介绍这三个功能，可以帮助为网络准备图像：

• 智能压缩模式自动在文件尺寸降低和视觉质量之间提供最佳平衡。有一个批量压缩按钮，您可以一次按下并优化所有图像。

如果您很好奇，您会看到在压缩的原始图像（左）（左）（左）（右）上的质量相同：

• 该插件会自动将图像转换为WebP，以获得更好的Web性能。还有一个可以转换为AVIF的选项。

• 还可以选择在上载时调整较大的图像，以避免性能问题。

该插件确实非常适合初学者，也无需成为专业设计师。幻想代表您优化网络的图像！每月有大约200张图像的免费计划，因此您可以自己查看结果。

2。photoshop

这是图像编辑和优化的强大工具。

• WebP转换可在文件>保存> WebP下使用。

• 要使用图像压缩，转到文件>导出>保存Web ，然后调整图像大小和质量。注意不要过度压缩并失去质量。
  

3。草图

这是调整和准备多个设备图像的绝佳工具。

• 它带有针对iPhone，Android的预制模型，并确保您可以轻松准备响应设计的图像。

• 它还支持WebP转换：使用文件>导出> WebP。
  

4。CloudConvert和Optimizilla

存在许多用于图像压缩和格式转换的在线工具，但是很少能找到这两者同时使用。您可能需要两个独立的工具来在线优化图像，例如CloudConvert和Optimizilla。

按照下面的步骤一起使用它们

1. 使用CloudConvert将重型JPEG转换为WebP。只需将图像拖放到选择文件字段。

2. 下载转换后的图像并使用在线图像压缩机（例如Optimizilla）进行压缩。

5。WP火箭

WP Rocket是最简单，最强大的性能插件，可在改善Core Web Vitals的同时优化Web的内容和图像。它还有助于轻松地通过几个PagesSpeed Insights审核。此外，80％的绩效最佳实践立即应用，节省了时间和精力。

关键功能有益于网络优化

WP Rocket有助于解决“高级图像优化技术”部分中几乎所有的提示，使其成为多合一的性能解决方案。

让我们介绍每个功能：

• 浏览器和页面缓存（包括移动缓存）和GZIP压缩，确保图像和其他资产加载速度更快。
• 批判图像优化：它会自动优化页面上的折叠图像，以便可以通过浏览器更快地渲染它们。例如，LCP图像将预加载并优先归功于用户。
• 懒惰加载：它延迟了加载图像，直到需要它们，而不是一次。这有助于页面加载更快，并通过仅显示用户向其滚动时显示图像来保存数据。

图像优化工具的不同需求比较

这是根据您的需求进行的工具的回顾，因此您可以选择最适合网络图像的工具。

在WordPress中进行易于有效的优化

幻想是您最好的盟友。它可以直接在WordPress仪表板中处理压缩，大型图像的自动重点以及下一代格式转换（WebP/AVIF）。您可以单独或批量优化图像，节省时间和精力而无需处理技术复杂性。请记住，富有智能的压缩模式，Imagify确保不要提供任何模糊的图像！

用于WordPress中的高级图像优化

如果您需要缓存，懒惰加载，预加载LCP图像以及优化折叠上方的图像，则WP Rocket是首选的解决方案。它与Fimify集成并提供了完整的性能优化套件，以单击几下提高加载速度。

在WordPress之外进行基本优化

如果您不想使用WordPress插件，则CloudConvert或Optimizilla是易于使用的在线转换器，可支持散装图像压缩和格式转换（一次最多20张图像）。但是，您需要手动将优化的图像重新上传为WordPress。

完全控制图像大小

使用诸如Sketch，Photoshop（高级），GIMP或内置工具之类的设计工具，例如Preview（Mac）或Photos（Windows）。草图是轻松为不同设备创建多尺寸变化的理想选择。 Photoshop也很棒，但这是一个非常陡峭的学习曲线。

为了完全控制图像尺寸和压缩水平

Photoshop允许在导出图像之前精确控制压缩水平。但是，凭借强大的责任是巨大的责任，并确保不要过度压缩您的照片。

适用于易于设置的功能强大的CDN

如果您正在寻找带有WordPress集成的不起作用的无麻烦CDN，RocketCDN是一个不错的选择。它带有专用的WordPress插件，这意味着不需要复杂的技术设置（例如CNAME记录）。借助全球存在点（POP），它可以确保全球快速的图像交付，这是与来自不同地区的访问者的多语言网站的理想选择。

当然，其他CDN也可以使用并表现良好，但是它们通常具有更高的成本和更具技术性的设置，这对初学者来说可能具有挑战性。

测量图像优化对Web的影响：6个指标

为了衡量图像优化的影响，您可以使用性能工具，响应式检查工具，数据工具（例如Google Analytics（分析））和关键指标来确定您的优化是否在起作用。让我们浏览它们。

这是您可以跟踪的指标和KPI列表，以衡量图像优化工作的成功。

1。满载时间

它衡量页面完全加载所需的时间。优化的图像应减少这段时间。

2。最大的内容涂料

最大的内容涂料（LCP）衡量最大的可见内容（通常是图像或大型文本块）要在页面上加载需要多长时间。由于图像通常是影响负载时间的最大元素，因此优化它们直接改善LCP。

如果您的LCP分数在图像压缩和调整大小后会提高，则意味着您的优化正在起作用！

3。图像文件大小

较小的文件尺寸平均更快的加载时间而不会失去质量。一旦实现压缩和下一代格式转换，您应该看到图像文件大小至少要小得多40％。

4。页面重量

这是页面资产的总规模，包括图像。使用优化的图像，您应该节省几个KB。

5。移动用户的跳出率

高跳跃率可能表明负载缓慢或移动响应能力差。如果您通过提供适当的尺寸图像来改善移动用户体验，则访问者应该更愿意与您的内容互动，而不是立即离开。

6。移动用户页面上的平均时间

如果用户停留更长的时间，则表明可以更好地体验，并且图像得到了很好的优化。

请注意，在进行更改之前和之后，检查GTMetrix和PagesPeed Insights的审核和最高问题部分也很有用。如果优化运行良好，则应看到诸如“有效编码图像”，“延迟屏幕图像”或标记为绿色标记的“尺寸适当大小的图像”之类的改进。

5种用于检查图像优化是否有效的工具

1。gtmetrix

GTMetrix由Lighthouse提供支持，分析了网站的速度和性能。

• 用于图像优化的KPI：满载的时间，最大的内容涂料（核心网络生命力），页面重量。

• 图像优化的审计部分：最高问题部分突出了需要改进的领域。

IMG

2。页面洞察力

Google的灯塔驱动工具评估页面性能。

• 测量图像优化的KPI：总体性能得分，最大的内容涂料。

• 图像优化的审核部分：诊断部分突出了要解决的问题。

IMG

3。谷歌分析

它跟踪网站流量和用户行为，有助于做出数据驱动的营销决策。

• 用于图像优化的KPI ：跳出率，桌面和移动用户页面上的平均时间。

例如，按照这些步骤来测量移动用户页面上的平均时间

• 转到Google Analytics（分析）>参与度>概述（或特定页面）

• 比较桌面与移动数据

• 选择前后优化日期

4。Cadenceseo.com

这是检查网站响应能力和移动友好性的强大工具。

• 它检查的内容：它验证了您的网站在多个设备（平板电脑，移动和台式机）上的外观，并向您显示需要进行的改进。

5。富有想象力

幻想直接从WordPress库压缩图像，并跟踪文件大小节省。

• 用于图像优化的KPI：缩小图像文件大小。

Web图像优化中的5个常见不良实践

在开始优化网页设计图像之前，请花点时间查看这五个标准不良实践。避免这些陷阱将有助于确保您不仅可以改善性能，而且可以改善用户体验。

过度压缩导致质量损失

过多地压缩图像会导致质量差和用户体验负面。始终旨在与可以为您完成工作的有效工具平衡压缩与视觉质量。

忽略特定于移动的图像优化

不调整不同显示大小的图像（例如移动，平板电脑和台式机）会导致负载时间较慢和不必要的数据使用情况，主要是在小型容器中使用大图像时。根据上下文调整图像大小对于优化性能至关重要。

坚持使用GIF或JPEG等“重”格式

依靠GIF和JPEG等过时的格式可能会导致更大的文件尺寸。考虑使用WebP或AVIF等新格式以相等的质量和较小的文件尺寸。

折叠图像上方的图像

懒惰的负载非常适合屏幕外图像，但是应该将基本图像（如折叠上方的图像）优先考虑以提高感知的加载时间。

仅使用无损压缩

如果您使用的是可靠的压缩工具，则应始终选择有损压缩。您不应该注意到有损和无损压缩之间的视觉差异。有损模式将减少文件尺寸远大于无损。

总结

现在，您应该有能力优化从基本到高级技术的网络图像！使用正确的工具，您可以确保图像得到充分优化并利用CDN，以提高页面速度。您还知道如何使用关键性能指标和最佳测试工具跟踪进度。

为了启动您的优化旅程而没有风险，请遵循以下两个强大的步骤：

• 从Fimify开始 - 免费安装，并免费优化200张图像。另外，如果需要，您可以还原原始图像。

• 安装WP火箭 - 立即受益于80％的性能最佳实践，包括缓存和批判图像优化。有14天的退款保证，因此您也可以无风险尝试！