How can I create an Image Download Link in HTML for a Mobile Page?

Somebody seems to have answered this already,

<a href="/path/to/image" download="ImageName" title="ImageName">    <img src="/path/to/image" alt="ImageName"></a> It's not yet fully supported http://caniuse.com/#feat=download, but you can use with modernizr

http://modernizr.com/download/#-a_download (under Non-core detects) to support all browsers.

Have not tested, but should work in mobiles as well.

I would add that, as a server side solution, you could also add Response Headers to your download endpoint by

• Setting it up in apache (.htaccess) / nginx configuration
• Right from the code

Use html5 download attribute as solution above by @theunexpected1. For browsers that don't support it, remove A tag to force user to right click or long touch to download

<script>var downloadAttrSupported = ("download" in document.createElement("a"))if (!downloadAttrSupported){   $('img.media').unwrap();}</script>

Support for download attribute: http://caniuse.com/download

You can set headers on the server, if that's an option for you. The HTTP header you want to send is Content-Disposition: attachment; filename="imagename.jpg".

Differs depending on your server..

In Node/Express:

// only on imgsfunction(req, res){    res.setHeader('Content-disposition', 'attachment; filename=imagename.jpg');}

In the HTML:

<a href="imagename.jpg">Download link</a>

Server will send Content-Disposition header when it gets the request for the file and force browsers to download.