Webpage loading images from MySQL slowly

Question

I am building a webpage where i am displaying about 10 photos in a slider.The photos are being fetched from a folder where it is uploaded,the code is given below.

<div class="main">

    <div class="main_slider">
      <div id="bg"> <a href="#" class="nextImageBtn" title="next"></a> <a href="#" class="prevImageBtn" title="previous"></a> <img src="images/c.jpg" width="1680" height="1050" alt="Test Image 1" title="" id="bgimg" /> </div>
      <div id="preloader"> <img src="images/ajax-loader_dark.gif" width="32" height="32" /> </div>
      <!--<div id="img_title"></div>-->
      <div id="toolbar"> <a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="images/toolbar_fs_icon.png" width="50" height="50"  /></a> </div>
      <div id="thumbnails_wrapper">
        <div id="outer_container">
          <div class="thumbScroller">
            <div class="container">
            <?php 
                    include("connect.php");
                    $s=mysql_query("Select image from gallery where active_home=1 ") or die(mysql_error());
                    while($row=mysql_fetch_array($s))
                    {
                     $img=$row["image"];
                    //$image= "<img src=\"images/gallery/$img\" width=200 height=120>";



              echo "<div class=content_img>";

                echo "<div> <a href=\"images/gallery/$img\"> <img src=\"images/gallery/$img\"   height=138  width=238  alt=image class=thumb style=opacity:0.6;/></a> </div>";
              echo " </div> ";
              }
              ?>
             </div>
          </div>
        </div>
      </div>
      <div class="clr"></div>
    </div>

The page is loading very slow in the server and browser crashing frequently.I have tried reducing the image size but nothing improves.

the webpage is not yet live...and not secure..so it will be a risk to give here the link. — Vicks, Mar 22 '14 at 05:35
Okay, but at least, are you sure that it's not that there are too many too big images what causes the crash? I'd recommend separating better HTML and PHP, so the code becomes more legible and bugs are easier to spot. Besides, [`mysql_*` functions are deprecated](http://stackoverflow.com/q/12859942/938236) for security reasons. — Francisco Presencia, Mar 22 '14 at 05:41
there were large images i optimized it and reduced its size but result was not not that satisfactory.By separating html and php what do you mean.? okk so should i use mysqli_* funcions?? @FranciscoPresencia — Vicks, Mar 22 '14 at 05:44

Francisco Presencia · Accepted Answer · 2014-03-22T15:15:11.233

You can clean up your code like this:

// Main PHP part
include("connect.php");
$STH = $DB->query("SELECT image FROM gallery WHERE active_home=1");
$rows = $STH->fetchAll(PDO::FETCH_ASSOC);
$images = array();
foreach ($rows as $row) {
  $images[] = $row['image'];
  }

// Main HTML part
?>
<div class="main">
    <div class="main_slider">
      <div id="bg">
        <a href="#" class="nextImageBtn" title="next"></a>
        <a href="#" class="prevImageBtn" title="previous"></a>
        <img src="images/c.jpg" width="1680" height="1050" alt="Test Image 1" title="" id="bgimg" />
      </div>
      <div id="preloader">
        <img src="images/ajax-loader_dark.gif" width="32" height="32" />
      </div>
      <div id="toolbar">
        <a href="#" title="Maximize" onClick="ImageViewMode('full');return false">
          <img src="images/toolbar_fs_icon.png" width="50" height="50"  /></a>
      </div>
      <div id="thumbnails_wrapper">
        <div id="outer_container">
          <div class="thumbScroller">
            <div class="container">

              <?php foreach ($images as $image) { ?>

                <div class="content_img">
                  <div>
                    <a href="images/gallery/<?= $image; ?>">
                      <img src="images/gallery/<?= $image; ?>" height="138" width="238" alt="image" class="thumb" style="opacity:0.6;" />
                    </a>
                  </div>
                </div>

              <?php } ?>

            </div>
          </div>
        </div>
      </div>
      <div class="clr"></div>
    </div>

In that way, you have properly separated the HTML from the PHP. Now, all bugs should be more obvious and easier. You can add checks at the end of the PHP, you can forget about needing to escape the " with \" manually and your code is more focused and clean. Note that I've changed the code from mysql_ to PDO, so now it shouldn't really work (you need to create the $DB = new PDO(), normally in connect.php.

Even more, now you can test where the problem is by doing something like this:

$start = microtime(true);
include("connect.php");
$STH = $DB->query("SELECT image FROM gallery WHERE active_home=1");
$rows = $STH->fetchAll(PDO::FETCH_ASSOC);
$images = array();
foreach ($rows as $row) {
  $images[] = $row['image'];
  }
echo "Load time: " . (microtime(true) - $start) . "<br>";

In that way you know if it's your PHP or your HTML (check it with the browser's network profiler) what takes ages to load.

Thank you it worked wonders with the pdo connection...thanks a lot @Francisco Presencia — Vicks, Mar 22 '14 at 07:34
I'm glad it helped. I find separating the PHP from HTML improves finding this kind of bugs (which might be an infinite recursion here?). You could also add a `var_dump($images);` after the PHP to check that the images are properly created (in case you need further debugging). — Francisco Presencia, Mar 22 '14 at 15:18

score 0 · Answer 2 · answered Mar 22 '14 at 05:43

Try

Jpeg images instead of png
Save images with option "Save image for web"
You can use RIOT image optimisation tool
For reducing load time you can use CSS sprites, which are CSS codes that display a piece of a larger image. This technique is often used for mouse-over states on buttons. E.g. with a sprite you can display a piece of an image as a button on your site and display a different piece of that image as the button whenever a user mouses over the image.
Do not use an Image at all. we can generate rounded rectangles, gradients, drop shadows, and transparent images using CSS

I have used RIOT for optimizing but result is not satisfactory — Vicks, Mar 22 '14 at 05:50

score 0 · Answer 3 · answered Mar 22 '14 at 05:44

0

I think you should try to store images on disk and check if images load faster from hard drive .

answered Mar 22 '14 at 05:44

Junaid

436
1
5
14

It is loading fast that way. – Vicks Mar 22 '14 at 05:45
@vicks Storing images directly in a database is not often thought of as best practice. I suggest experimenting with storing the images as files then storing the paths in a database. – Junaid Mar 22 '14 at 06:18

Webpage loading images from MySQL slowly

3 Answers3