来自 google 驱动器的图像使页面加载非常慢

Question

我有一个网页，其中包含我使用 php 代码从 google 驱动器下载的一些图像：

$albumURL = $url."host/".$fila['album']."/";
@$doc->loadHTMLFile($albumURL);
$xpath = new DOMXPath($doc);
$anchors = $xpath->query('//a');
$ref="";
foreach($anchors as $element) {
  $ref = $element->getAttribute("href");  
}
$first = true;
foreach($anchors as $element) {
  $src = $element->getAttribute("href");
  if($src != "http://drive.google.com"){
    if($primero){
      $first = false;
      echo '<div class="item active"><img src='.$url.$element->getAttribute("href").'></div>'."\n";
    }
  echo '<div class="item"><img src='.$url.$src.'></div>'."\n";
}

问题是当我尝试加载我的页面时它非常慢，我猜这是因为我请求的图像数量。这是我页面的 link： http://arreglosnavidad.host22.com/arreglos.php

我不知道是否有任何方法可以使用 php 或 html/css 压缩这些图像。

当然，如果因为 CRUD 管理，我不必将这些图像上传到服务器中，那就更好了。（并保持它们是最新的）

Answer 1

部分选项

使用CSS 精灵。无需加载发送 GET 请求大量图像从而增加客户端到服务器的流量，您可以将所有多个图像组合成一个大图像并使用 div 中的相对位置来仅显示部分或子图像是您综合形象的一部分。

检查此 link 了解此技巧

https://css-tricks.com/css-sprites/

减小实际图像的大小并在 html 文档中设置图像标签的宽度和高度，以便在加载图像时它会拉伸（这会影响图像的质量）

来自 google 驱动器的图像使页面加载非常慢

Images brought from google drive make page load very slow

php

html

css

image

image-resizing