Images brought from google drive make page load very slow

Question

I have a webpage with some images I downloaded from google drive using php code:

 $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"; } 

The problem is that when I try to load my page it's very slow, I'm guessing that it is because of the quantity of images I request. Here is a link of my page: http://arreglosnavidad.host22.com/arreglos.php

I don't know if there is any way of compressing those images by using php or html/css.

Of course, it would be better if I don't have to upload those images in the server because of the CRUD management.(And to keep them up-to-date)

Answer 1

Some options

1. Using CSS Sprites. Instead of loading sending GET request for large quantities images hence increase client to server traffic, you can combine all several images into one big image and use relative position in your div to just display the section or subimage that is part of your consolidated image.

Check this link for this trick

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

2. Reduce the size of your actual images and set the width and height of you image tag in your html document so that when you image is loaded it will stretch (This affect the quality of your image)