Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You need to use server-side scripting for this. <a href="https://stackoverflow.com/search?q=force%20download%20script">Search on stackoverflow</a>.</p> <p>Alternately, your server might allow you to alter headers dynamically via configuration.</p> <h3>Apache solution with mod_headers</h3> <p>Place your downloadable images in a directory. Inside this directory, create a <code>.htaccess</code> file with the following contents:</p> <pre class="lang-none prettyprint-override"><code>SetEnvIf Request_URI "([^/]+\.jpg)$" REQUESTED_IMAGE_BASENAME=$1 SetEnvIf Request_URI "([^/]+\.png)$" REQUESTED_IMAGE_BASENAME=$1 Header set Content-Disposition "attachment; filename=\"%{REQUESTED_IMAGE_BASENAME}e\"" env=REQUESTED_IMAGE_BASENAME </code></pre> <p>Test Request:</p> <pre class="lang-none prettyprint-override"><code>HEAD /test/Water%20lilies.jpg HTTP/1.1 Host: localhost </code></pre> <p>Test Response:</p> <pre class="lang-none prettyprint-override"><code>HTTP/1.1 200 OK Date: Sat, 23 Jul 2011 09:03:52 GMT Server: Apache/2.2.17 (Win32) Last-Modified: Thu, 23 Aug 2001 14:00:00 GMT ETag: "26000000017df3-14752-38c32e813d800" Accept-Ranges: bytes Content-Length: 83794 Content-Disposition: attachment; filename="Water lilies.jpg" Content-Type: image/jpeg </code></pre> <h3>HTML5 Solution</h3> <p>You can <a href="http://www.w3.org/TR/html5/links.html#downloading-resources" rel="nofollow noreferrer">use the HTML5 <code>download</code> attribute on anchors</a>:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Example 1&lt;br&gt; &lt;a href="http://dummyimage.com/600x400/000/fff.png" download&gt;Download this image&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Example 2&lt;br&gt; &lt;a href="http://dummyimage.com/600x400/000/fff.png" download="alternate-filename.png"&gt;&lt;img src="http://dummyimage.com/150x100/000/fff.png"&gt;&lt;/a&gt;&lt;/p&gt;</code></pre> </div> </div> </p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload