Home | Blog | Code Snippet | Image Direct Download

In WordPress, when you “Add Media” and include a link to the image you’re adding to your page, that link will take you to a whole separate page with the full-size image shown, and then you would have to right click in order to download that image.

But what if you’re wanting to provide an image as a direct download, such as you’d see on sites like UnSplash.com? It’s actually pretty simple to accomplish. And you could either create a button that links to the image, or just link the image itself. Here’s the gist of it:

<a download="name-of-file-with-extension-but-no-path.png" href="path-to-image/name-of-file.png" title="Download This Image"><img src="path-to-image/name-of-file.png" class="img-responsive"></a>

Note that the image class “img-responsive” is from Bootstrap v3. If you aren’t using Bootstrap 3, you can omit that. If you’re using Bootstrap 4, the class to use is “img-fluid”.

Give it a try by clicking here.