Question

我的客户端需要“动态密封”（内联html锚点，图像和脚本块）。它按预期工作（实际上我需要按原样发布）。但是，Google PageSpeed Insights已确定仍需要完成的图像压缩。我知道它并不重要，仅仅是一个建议，但它提出了如何压缩从<img src="...">标签中的外部网站加载的图像的问题。

为了更好的上下文，这里是相关的html块。

<a id="bbblink" class="ruhzbum" href="http://www.bbb.org/tucson/business-reviews/wheel-chair-lifts-and-ramps/special-needs-vehicles-in-tucson-az-20000108#bbbseal" title="Special Needs Vehicles, Wheel Chair Lifts &amp; Ramps, Tucson, AZ" style="display: block; position: relative; overflow: hidden; width: 150px; height: 68px; margin: 0px; padding: 0px;">
   <img style="padding: 0px; border: none;" id="bbblinkimg" src="http://seal-tucson.bbb.org/logo/ruhzbum/special-needs-vehicles-20000108.png" width="300" height="68" alt="Special Needs Vehicles, Wheel Chair Lifts & Ramps, Tucson, AZ" />
</a>
<script type="text/javascript">var bbbprotocol = "https:" ==
   document.location.protocol ? "https://" : "http://";
   document.write(unescape("%3Cscript src='" + bbbprotocol +
      "seal-tucson.bbb.org" + 
      unescape("%2Flogo%2Fspecial-needs-vehicles-20000108.js") + 
      "' type='text/javascript'%3E%3C/script%3E"));
 </script>

我能够压缩服务器上的所有图像，但是如何压缩这样的图像呢？

我已经完成了一小时的互联网搜索，但未能找到任何有用的方法。也许是因为我没有使用正确的关键词？

有没有办法压缩图片以便Google PageSpeed感到高兴？

Answer 1

你不能。该图像的下载是用户浏览器与托管图像的DECLARE @tin varchar, @prpr_ntwrk varchar IF ( ISNULL(@tin,'')=''AND ISNULL(@prpr_ntwrk,'')<>'' ) BEGIN IF (ISNULL(@prpr_ntwrk,'')='P') BEGIN SELECT "P" END ELSE BEGIN SELECT "Not P" END END服务器之间的连接。你自己的服务器没有涉及;下载不受您的控制。它可以通过BBB来压缩他们在服务器上托管的图像。

（您可以将图像的压缩副本放在您自己的服务器上并更改脚本以引用您自己的副本而不是原始副本，但听起来您不允许使用这种方式使用密封。）

Answer 2

你做不到。你正试图解决一个不是你问题的“问题”。

Google页面洞察（以及大多数页面速度分析器）预先设定了最佳可能情景 - 大多数情况并非如此。

Answer 3

我知道这是一个非常老的问题，但是实际上，现在可以不用像weserv.nl（https://github.com/weserv/images）这样的免费和开源图像大小调整服务下载原始图像。

原始

：

大小：525 B
首次加载时间：〜650毫秒
加载时间：〜60毫秒
url：http://seal-tucson.bbb.org/logo/ruhzbum/special-needs-vehicles-20000108.png

调整大小（质量= 60）：

大小：233 B
首次加载时间：〜900毫秒
加载时间：〜60毫秒
url：https://images.weserv.nl/?url=http://seal-tucson.bbb.org/logo/ruhzbum/special-needs-vehicles-20000108.png&q=60

对于调整后的大小，第一次加载会稍慢一些，但是之后是相同的（大约60毫秒）。

使用JavaScript，您可以动态包装所有图像，例如：

const resizeExternalImage = ImgtoBeResized => {
  return `https://images.weserv.nl/?url=${ImgtoBeResized}&q=60`
}

对于较小的项目，可以选择免费服务（我在React.js应用程序中使用了免费服务），对于较大的图像/大量的图像：您可能需要具有正常运行时间的服务。

如何使用外部src压缩图像？

3 个答案: