Как не показывать исходное изображение.Исходное изображение следует загрузить на кнопку загрузки

Question

Я делаю свой блог для фотосессии на блоге.Все успешно завершено, кроме самого важного.

Мой сайт Полностью реагирует на то, что я хочу.

Это мой код для отображения всех блогов на одной странице.

<section class="bg-gray200 pt-5 pb-5">
<div class="container">
    <div class="row justify-content-center">
        <!--<div class="col-md-7">-->
            <article class="card">
            <img class="card-img-top mb-2" src="<?php echo  str_replace("../../","",$reservedata['post_image']); ?>" alt="Card image">
            <div class="card-body">
                <h1 class="card-title display-4">
                    <?php
                     $img_info = getimagesize(str_replace("../../","",$reservedata['post_image']));
                     $img_info_dimension = $img_info['0'].'*'.$img_info['1'];
                    ?>
                <?php echo $reservedata['post_name'] ?> </h1>
                <a href="<?php echo  str_replace("../../","",$reservedata['post_image']); ?>" download class="btn btn-success">Download <?php echo $img_info_dimension; ?></a>
            </div>
            </article>
        </div>
</div>

Основная ошибка в том, что я загрузил около 50 фотографий.Каждое изображение составляет около 5 МБ.Загрузка занимает 10 минут.Мне нужно загрузить большинство фотографий.Я хочу, чтобы фотография отображалась в виде эскиза, но когда кто-то нажимает на эту кнопку загрузки, файл должен загружаться в оригинальном размере и размере <a href="<?php echo str_replace("../../","",$reservedata['post_image']); ?>" download class="btn btn-success">Download <?php echo $img_info_dimension; ?></a>