How to download big size images using <a> tag

Question

I'm trying to connect to the database and view pictures from there. Despite the fact that all pictures are shown, it is not possible to download them. To download I use tag .

Here is my code.

while($row = mysqli_fetch_array($result))  
                    {  
                         echo '  
                              <tr>  
                                   <td align="center"> 
                                        <a href="data:image/jpeg;base64,'.base64_encode($row['Pilt'] ).'" download>
                                            <img src="data:image/jpeg;base64,'.base64_encode($row['Pilt'] ).'" width=400 class="img-thumnail" />
                                        </a>
                                   </td>  
                              </tr>  
                         ';  
                    }

Here is a small part of the database where I get pictures. https://imgur.com/yZGsFzb . So I noticed that only one photo is being downloaded, which size is 150.4KiB.

I expect that by clicking on the image (any size) it will be downloaded. Right now when I click on image appears error like this https://imgur.com/yZrlIH8 whereas I would like to see something like this https://imgur.com/4vkUukp . I will be very grateful for any help.

Answer 1

I recommend you stop printing large quantities of big images that way, they will be hardcoded in the HTML code and downloaded all at once to the browser's cache, 2 times (3 with the click included). This wastes RAM and bandwidth. The network error you get is probably caused by the abnormally big size of the href in your link (might even look a bit like malware to your browser).

Instead, you want to serve these images dynamically on a PHP script first (by setting the header to 'Content-Type: image/png' and printing the image contents as obtained from your database) and provide a direct URL to the script.

This example works just as described in your screenshots, I'm indicating where you should replace your SQL queries to obtain the image:

while(for all your rows)  
{  
echo '  
  <tr>  
    <td align="center"> 
      <a href="image.php?id=' . $id . '" download>
        <img src="image.php?link=' . $id . '" width=400 class="img-thumnail" />
      </a>
  </td>  
</tr>';
}

And image.php would look something similar to:

<?php
$id = htmlspecialchars($_GET['id']);
header('Content-Type: image/png');
$content = store the image contents from the BD here ($row['Pilt'] in your code);
echo $content;

Notice that image.php serves images dynamically and I'm supposedly identifying each image with an id (perhaps your row id? You can think of more secure identifiers too if ids are not public already). This is a common security practice in PHP so that you're not providing absolute file paths or other information to attackers.