Как ускорить рендеринг изображения на моей странице?

Question

Я создаю сайт, на котором пользователь может опубликовать свою рекламу, и пользователь может загрузить фотографию ... Я размещаю четыре последних рекламных ролика в верхней части моего сайта ... поэтому каждый раз, когда я просматриваю свой сайт, последние 4 объявления будут отображаться, но проблема в том, что это слишком долго .. делает мой сайт замедлением ...

Как его оптимизировать? Мне нужны советы ребята ..

и btw, я сохраняю эти изображения в своей базе данных как blob .. и выбираю 4 последние объявления в моей базе данных.

<?php if($latest_upload_count > 0){ ?> 
<div class = "collapse navbar-collapse"> 
    <div class = "container"> 
     <div class = "row"> 
     <?php while($get_lastest_pics = mysql_fetch_assoc($get_5_latest_ads_query_string_execute)){ ?> 
      <div class = "col-xs-3"> 
       <img img src="data:image/jpeg;base64,<?php echo base64_encode($get_lastest_pics['img']); ?>" style = "height: 180px; width: 270px;" class="img-responsive img-thumbnail" alt="Cinque Terre" >  
      </div> 
     <?php } ?> 

     </div> 
    </div> 
    <br /> 
</div> 

<?php } ?> 

я попытался опустить, что и мой сайт работает быстрее ...

Answer 1

Сохранение изображений в виде файлов и сохранить только пути к ним в базе данных. Затем создайте миниатюры меньшего размера, чтобы отображать их на главной странице (например, с возможностью масштабирования этих изображений, нажимая на них) или просто масштабировать и оптимизировать эти изображения. Вы также можете сохранять пути к эскизам в базе данных, или вы можете генерировать их на лету (используя некоторые префиксы/подстроки в именах файлов для разных размеров).

Используйте некоторые из известных библиотек PHP для обработки изображений (например, Imagick, Intervention Image или аналогичные).

Answer 2

Как насчет вашего кода это сам: Как насчет написать это:

if($latest_upload_count > 0){ 
    echo "<div class = 'collapse navbar-collapse'><div class = 'container'><div class = 'row'>"; 
    while($get_lastest_pics = mysql_fetch_assoc($get_5_latest_ads_query_string_execute)){ 
     echo "<div class = 'col-xs-3'> 
      <img img src='data:image/jpeg;base64,".base64_encode($get_lastest_pics['img'])."' style = 'height: 180px; width: 270px;' class='img-responsive img-thumbnail' alt='Cinque Terre' >  
     </div>"; 
    } 
    echo "</div></div><br /></div>"; 
}