html - 如何加快页面上图像的渲染速度？

Question

我正在创建一个网站，用户可以在其中发布广告，用户可以上传照片...我在网站顶部发布四张最新的广告图片...所以每次我浏览我的网站时将显示最新 4 张广告图片，但问题是它渲染时间太长..使我的网站速度变慢...

如何优化它？我需要建议，伙计们..

顺便说一句，我将这些图像作为 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 或类似库)。