由于 PrestaShop 非常受欢迎，被数以千计的在线商店广泛使用，我决定给您机会大大加快它的速度。

这个电子商务平台非常有活力并且充满了图像。 图片如此之多，以至于他们中的大多数人在每个页面上下载大约 5 到 10 甚至 20 兆字节的图片。

图片对于这个平台至关重要，因为这是人们在查看您的产品时看到的内容。 因此，您通常希望上传许多图片以吸引产品浏览。

因此，您很难正确优化您的商店并提供愉快的用户体验。

PrestaShop 的图像大小调整

如果你不知道 Cloudflare Image Resizing 是什么，我就不再在这里重复创建重复的内容。 请在官方帖子 上了解一下。

我在这里所做的是，将我为 WordPress 创建的 worker 用于 [PrestaShop](https: //www.prestashop.com/en).

最初这听起来像是一项简单的任务，但是一旦我开始着手处理它，我就感到非常头疼。

规划和创建工人

首先，PrestaShop 处理图像 URL 的方式非常奇怪。 如果您导航到 https://demo.prestashop.com/#/en/front ，您可以看到经典主题。

检查页面源代码，例如查看滑块，我们可以看到以下内容：

1<img src="https://ready-low.demo.prestashop.com/modules/ps_imageslider/images/sample-3.jpg" alt="sample-3" loading="lazy" width="1110" height="340">

嗯，这还不错，我们可以很容易地匹配这个 URL 并重写它。 但是，当我们向下滚动到产品时，我们可以看到以下内容：

1<img src="https://ready-low.demo.prestashop.com/1-home_default/hummingbird-printed-t-shirt.jpg" alt="Hummingbird printed t-shirt" loading="lazy" 
2	data-full-size-image-url="https://ready-low.demo.prestashop.com/1-large_default/hummingbird-printed-t-shirt.jpg" width="250" height="250">
3	
4<img src="https://ready-low.demo.prestashop.com/21-home_default/brown-bear-printed-sweater.jpg" alt="Brown bear printed sweater" loading="lazy" 
5	data-full-size-image-url="https://ready-low.demo.prestashop.com/21-large_default/brown-bear-printed-sweater.jpg" width="250" height="250">
6
7<img src="https://ready-low.demo.prestashop.com/3-home_default/the-best-is-yet-to-come-framed-poster.jpg" alt="The best is yet to come' Framed poster" loading="lazy" 
8	data-full-size-image-url="https://ready-low.demo.prestashop.com/3-large_default/the-best-is-yet-to-come-framed-poster.jpg" width="250" height="250">

哎呀，好痛。 你可能会问什么问题？ 问题是图像不在“文件夹”中，而是通过 Apache Rewrite 简单地重写。

如果仔细查看图片 URL，您会发现问题所在：prestashop.com/1-home_default、prestashop.com/21-home_default、prestashop.com/3-home_default 等等。

检查 .htaccess 证实了这一点：

 1# Images
 2RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]
 3RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg [L]
 4RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.jpg [L]
 5RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg [L]
 6RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg [L]
 7RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg [L]
 8RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg [L]
 9RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg [L]
10RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2$3.jpg [L]
11RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2.jpg [L]
12# AlphaImageLoader for IE and fancybox
13RewriteRule ^images_ie/?([^/]+)\.(jpe?g|png|gif)$ js/jquery/plugins/fancybox/images/$1.$2 [L]

坦率地说，我什至不想进入它。 我将不加评论地离开它。 上面的还算不错，我们可以毫无问题地重写它，我们只需要一点正则表达式 的经验。

然而，看看野外的不同主题，情况会变得更糟。 例如，让我们看看我在 [Monsterone](https://monsterone.com/cms-templates/prestashop-themes /) 主题：

1<img src="https://demo4techies.com/prestashop/shopkart-lite/modules/ps_imageslider/images/8187e2cea6dcd5e1b98a1b1af132211cf94c9a8e_Slider-1.jpg" alt="">
2
3<img src="https://demo4techies.com/prestashop/shopkart-lite/1-home_default/casual-shoes-sneaker.jpg" alt="Casual Shoes Sneaker" 
4	data-full-size-image-url="https://demo4techies.com/prestashop/shopkart-lite/1-large_default/casual-shoes-sneaker.jpg">
5
6<img src="https://demo4techies.com/prestashop/shopkart-lite/6-home_default/square-sunglasses-black-frame.jpg" alt="Square Sunglasses Black Frame" 
7	data-full-size-image-url="https://demo4techies.com/prestashop/shopkart-lite/6-large_default/square-sunglasses-black-frame.jpg">
8
9<img src="https://demo4techies.com/prestashop/shopkart-lite/img/cms/testimonial-img-1.jpg" alt="testimonial1">

如您所见，情况更糟，因为显然主题正在通过在其中包含主题名称来更改默认图像 URL 结构。 更糟糕的是，它们还指向诸如“/img/cms”之类的文件夹。

老实说，在这一点上我想放弃，因为支持它似乎让人头疼，但我腐败的头脑中有一些东西告诉我“没办法”。

于是我开始测试和调试，直到终于支持了Classic主题。 然后我从 ETS 中获取了一个免费主题并开始研究它。

几个小时后，我到了我的工人支持的地步：

  • PrestaShop 经典主题
  • PrestaShop ETS（任何）主题

这还不够，因为我还遇到了需要更改的 CSS。 所以又花了几个小时来测试和调试支持 CSS 重写。

重写产品“快速浏览”

当您访问店面商店或类别时，您可以选择通过单击小图标“快速查看”产品。 重写它有点挑战，但仍然很有可能。

在玩了几个小时之后，再次测试和调试我设法实现了它。

工作人员将即时重写以“快速查看”模式显示的所有图像。

删除恶意脚本

在研究 ETS 主题时，我注意到了一些奇怪的事情。 一个看起来很奇怪的 JavaScript 文件试图远程加载。

幸运的是脚本 URL 返回 HTTP 404（未找到），不幸的是我看不出这是什么意思。 所以我前往 Web Archive 并找到了 缓存版本 。

查看脚本对我来说非常可疑，所以我很快放弃了调查，而是写了一个小片段来自动将其从页面中删除。

工作人员将删除脚本并确保您的访客安全。

使用 PrestaShop 图像调整工作器

我再次尽力制作了一个简单的一次性复制粘贴代码片段，它既适合技术人员，也适合非技术人员。

但是这次您需要根据您使用的主题进行一些小的编辑。 在工作人员代码的顶部，您将看到：

 1// Edit the below as needed
 2// START EDIT -----------------------------------------------------
 3
 4// Set theme type
 5// 0 = Classic
 6// 1 = All themes by ETS (https://prestahero.com/brand/2-ets)
 7const PS_THEME = 0;
 8
 9// Speed: Set the image quality
10const IMAGE_QUALITY = 90;
11
12// Speed: Append lazy loading to images
13const IMAGE_LAZY_LOAD = true;
14
15// END EDIT -------------------------------------------------------
16// DO NOT EDIT BELOW THIS LINE.

这是不言自明的； 如果您使用 PrestaShop Classic 主题，请将 PS_THEME 设置为 0，否则设置为 1。您还可以自定义图像质量，但我建议保留默认值。

部署工人

只需在您的网站上部署工作人员，使用路由示例：examplestore.com/* 并享受好处。

您可以像往常一样在 my Github 上找到工作代码。

如果您不知道如何执行此操作，请参阅我的另一篇有关 WordPress 的文章，其中包含说明。

画面质量

When using image resizing you normally want to point the original image for Cloudflare to resize, because PrestaShop resizes the images in a weird way and the quality is just shit.

I’m not sure why this is happening, maybe their reasoning was performance or whatever. Point being is that we should point the original image to Cloudflare but we can’t because PrestaShop rewrites the URL’s so they are not accesible directly.

The Cloudflare service resizes images and delivers an exceptional quality, regardless of how high the image resolution or size is. With that being said, you will still gain better quality and compression.

支持

使工作人员适应不同的主题是一项耗时的任务。 如果我有空闲时间，我可能会添加对更多主题的支持，但不能保证。

如果您有付费或自定义的 PrestaShop 主题，并且希望我为您的商店调整工作人员，我可以提供商业支持。

请使用咨询 页面并预约快速聊天以讨论您的需求。

执照

正如上一篇关于 WordPress 的文章中提到的，使用的新许可模型是 Apache License 2.0，所以请不要转售我的作品。

这不会影响您将其用于商业或个人用途。

有用的链接

  • WordPress 图像大小调整：https://mecanik.dev/en/posts/cloudflare-image-resizing-for-wordpress/
  • PrestaShop 市场：https://addons.prestashop.com/en/

我希望有了这个添加，您的商店会蓬勃发展。

请在下方告诉我您的想法。