WordPress网站如何加快图片的加载速度

图像对于吸引和保持读者的兴趣非常重要。但是，它们也是网络上加载速度最慢的元素之一。加载缓慢可能会导致访问者放弃您的网站，因此解决图片加载慢的问题尤为重要！

如果您想要一个更轻、更快的网站，那么图像优化是一个不错的起点。通过优化，您可以继续以美观、高质量的视觉效果吸引观众的注意力，而K @ \ X { ] ^ x –不会显着增加页面加载时间。

在本文中，我们将分享通过图像优化j J E C w @ 2 d来提高网站性能的一些方法。让我们开始吧！

图像优化及其重要性

图像优化就是在减少图像文件的大小和保持可接受的质量水( _ R (平之间取得平衡。这样可以减少页面加载时间，而不会因模糊或像素化的视觉效果而对访问者体验造成负面影响。

访客关心页` , q 2 = `面加载需要多长时间。研究表明，有40％的人放弃了耗时超过三秒钟的网站。通过优化图像，可以避免流量9 0 ` H v { /损失。

页面加载时间也会影响转化次数和收入。研究表明，C 9 i n I P _ j如果您的网站每天的收入为100,000美元，那么延迟一秒钟可能会导致您每年损失250万美元的收入。

此外，Google使用页面速度作为排名因素。通过缩短网站的加载时间，您可以提高搜索引擎排名并增加自然流量。

通过减小图片的大小，通常可以帮助Google更快地对其进行抓取和编制索引。这可以帮助您开始从Google图+ f \ X X @ n片搜索吸引流量。对于时间敏感的视b V d X q U W ~ ~觉效果（例如与时事或快速销售相关的视觉效果），这一点尤其重要。

最后但并非最不重要的一点是，图像优化可以减] 6 % | M S少网站备份的大小。这可以使处理过程更快，并且生成的文件更小。根据y 4 \ % G \ P % u您的托管服Z o w W务提供商和计划，这甚至可能阻止您超过分配的存储空间并产生额外费用。

如何设置性能基准

在进行任何类型的优化之前，有助于确定性能基准。通过前后测试您的网站，您可以确定所有图像优化工作的切实利益。

每个站点都是唯一的，因此某些优化技术可能会产生比其他更好的结果。为了确h : A : o * # n \定那些可以为您d 2 = 9的网站带来最佳结果的方法，您可能希望在实施每种策略之后进行性` m e Z K e U 3 #能测试。然后，您可以将性能最强的技术e r d置于未来工作的核心。o & \ 5 S m L

您可以使用Google PageSpeed Insights、Pingdom或GTmetrix之类的工具来衡量网站的性能。对于评估每种优化技术对您的网站的影响以及跟踪网站的性能随时间变化的情况w $ 7 4 t u而言，这是无j G v价的。

加快网站图片加载速度的建议

创建性能基准后，就该开始着手进行改进了。以下是优化图像并减少页面加载时间的6种方法。

1.选择正确的文件格式

在开始优化图像之前，重要的是要确保使用最合适的图像文件格式。您可以使用几种方法，包括一些其N ; 7 / C他选项，例如JPEG XR和WebPh , i v F。

尽管这些可以显着提高图像加载速度，但并非所有浏览器都支持它们。为了确保您的网站可访问，通常需要避免使用更特殊的格式。

JPEG或JPG图F L h ! d ] M = r像可以同时使用有损和无损优化。这通常B % 3 – M j使其成为具有多种颜色的图像的最佳文件格式。您还可以调整质量水K U R *平。这可以帮助您在显示清晰，清晰的图像和减小文件大小之间取得最重要的平衡。

同时，n n 3 # fPNG文件可产生更高质量的图像，但尺寸更大。您可能可以将简单图像格式化为PNG，而文件大小不会失控。但是，您通常会~ g I @ ; & – S =希望避免使用PNG以获得更复杂的视觉效果。

2.使用图! O O像压缩工具

压缩可以通过删除或分组文件的某些部分来减小图像的大小。这种压缩可以是“无损”或“有损”的。

无损压缩会减小文件的大小，而不会影响质量。有损压缩g * | Q通常可以节省更多S Y R 7大小，但是它涉及丢弃文件的某些部分。这会影响图像的质量。

通常，我们建议对照片– 7 ? 9 L G m T等高质量的视觉效果进行无损压缩。对于更简单的图像，您可能希望选择有损压缩，以对性T : 4 G =能产M 1 [ V p . =生更大的影响。

您可以使用多种压缩工具，包括免费的Tic V x VnyPNG服务。TinyPNG使用有损压缩并X D U G C t k y ?有选择地减少图像中的颜色数量。尽& , * ~ y管名称如此，TinyPND F v ` _G可以同时压缩JPG和PNG。

还有一个a . – N M 0 H S YTinyPNG插件，可以自动压缩您[ D 2 . K N Q上传到WordPress的所有图像。它也可以优化任何以前t R ] Y – D J v上传的文件。如果您的站点已经具有大量视觉效果，这将很有用，并且手动压缩每个图像x p y \ P P 7 X y也不可行。

替代的图像优化插件包括Optimole，Imagify和Smush Pro。

3.启用# n 2 Q & 6 x浏览器缓存

浏览器无需每次都直接从服务器W / ` i下载图像，而是可以将这些文件本地存储在访问者的计算机上。这种缓存会大大降低后续访问时的页面加载速度。

您可以使用WordPress缓存插件（例如W3 Total Cache或WP Super Cache）启用浏览器缓存：

或者，您可以通过编辑站点的.htaccess文件来启用浏览器缓存。这是一个重要的文件，因此，只有在您愿意编辑代码的情况下，我们才建议您使用此方法。

如果确实要编辑.htaccess文件，首先创建备份是明智的。这样可以确保您在遇到任何问题时都可以进行恢复。

4. 禁止图片盗链

使用其他网站a / C D / e上的图片时，最好先下载该图片，然后再将其上传到您自己的服务器上。但是，这并非总是会发生，因为某些网站犯有“热链接”的问题。

当第三方链接到服务器上托管的图片时，就会发生热链接。每当对方的网站加载此图像时，它都会占用您的带宽。

热链接可能会降低您网站的性能，甚至无法为您提供任何页面浏览量。2 ? W S Z k X + :根据您的8 I [ 4 s @ g J托管服务5 H 5 V 0 k d =提供商，热链接甚至可能会产生额外费用。

为防止其他站点占用S I : } e C (您的带宽，您可以使用j h v | Y l插件来禁用热链接，例如All In One WP Secu. J u Zrity＆Fire1 b K e o ` T 0wall。激活插件后，您可以通过导航到WP Security>防火墙> Prevent Hotlinks来找到此功能。

如果你使用阿里云OSS或其他第三方存储服务，这些平台一般都是有相关的设置选项的，可以查看并开启。你也可以百度一下“禁止图片盗链”看看更多相关的教程。

5. 使用延迟加载

延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。

延迟加载有什么好d 8 ; * _处：

1. 首先它能提升用户的体验，试想一下，如果打开页面的时候就将页面上所有的图片全部i n q [ s C ~获取加载，如果图片数量较大，/ L y对于I o & 9 H N用户来说简直就是灾难X % I，会出现卡顿现象，影响用户体验。
2. 有选择性地请求图片，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。

6.考虑使用内容分发网络（CDN）

当您选择为您的网站主机和计划，你可能不得不选择一个数据中心位置的选项。例如，您的网站可能实际位于国外的服务器上。

当数* / X n据必须经过更长的距离时，会导致延迟。通常，距离越远，网站加载所需的时间就越长。如果您的主机服务器位于国外，那么国内的访问者通常比国外的访问者经历更长的加载时间。

内容分发网络（CDN）可以通过地理e x 3 w距离缩短延迟造成的。通过CDN提供优化的图像，您可以大大减少页面加载时间。

CDN是位于世界各地的服务器网络。这些服务器有时称为存在点（POP）托管并提供站点静态内容（包括图像）的副本。

每当有人访问您的站点时，CDN都会使用地理位置路由来检h s 4 E 5 % d ]测用户请求的来源。然后，访问者可以从物理上最接近图像的数据中心加载图像。

CDNo \ 8 [ %提供程= b w N c i 5 z `序很多，e w \ O , S w w X还值得检查您现有的托管服务提供商的服务，因为他们很多都会! y @ p C 2 z提供CDN。比如p ] ; ! 9 D阿里云就有自己的CDN服务。

购买CDN服务之后，您可以使7 = l用WordPress插件集成网络，比如W3 Total Cache、^ A _ 1 6 bLiteSpeed Cache 或 CDN Enabler。

结论

这些精美的高– 7 r K [ w分辨率图像可能会吸引读者的兴趣，但同时也会减慢您的网站速度。通过优化图像，您可以在创建吸引人的，引人注目的内容与提供高性能网站之间取得平衡。

为了加快图像的加载速度，我们建议以下操作：

1. 选择正确的文件! t ~ b格式
2. 使用压缩工具或插件，例如TinyPNG
3. 启用浏览器缓存
4. 禁止图片盗L o ~ y y y P 8链
5. 使用延迟w z # ! f e加载
6. 考虑使用内容分发网络（CDN）

帝道

链接