downloading a picture or showing save popup for a picture on click on a button

Question

I am in a Dilemma here. Well I want a button to download the picture rather than show on the browse or atleast ask for the image to be saved.

i tried to locate the image url in href but it on clicking the link the picture shows up on rbowser. Any idea what i am doing wrong? here is the link code

 <a href="images/gallery/1.jpg">  Download This Image</a>  

Clicking this download image shows the 1.jpg in new browser window. !!

Thanks.

Answer 1

You can use the download attribute but it's not supported by all browsers

<a href="images/gallery/1.jpg" download="/path/to/image">  Download This Image</a>  

Answer 2

There are mainly two ways to accomplish this:

Client side

<a href="images/gallery/1.jpg" download="images/gallery/1.jpg">Download This Image</a>

Notice: this won't work cross-browser!

Server side

Send an Content-Disposition header to force the client to download the file. You propably want to use an optional parameter for also allowing the direct display of the image. So you are going with something like

if($_GET['download']){
    header('Content-Disposition: attachment; filename="filename.ext"');
}

Assuming you are using PHP