How to Create a Download Link

It's interesting how some things come full circle. In the early days of the Web, browsers would automatically download links to files that weren't a web page, like images, PDF files, and documents. Then, browsers became so advanced that they were able to open nearly any file in real-time. That created a problem for developers, though. How would you force a browser to download a file, instead of opening it? A bunch of hacks and workarounds sprung up to solve the issue, but none were a true solution. That all changed with HTML5 when the Download Attribute was introduced.

Now, developers can add a special download attribute to their HTML anchor tags to tell browsers to treat a link as a download, rather than opening the target file. There are a few different ways that you can use the Download Attribute to control the way browsers handle your download links. Even better, all modern browsers support the Download Attribute, so you shouldn't see any issues with compatibility or the need for a fallback.

There are a few different ways that you can handle the Download Attribute. Each has its own benefit, and they all work smoothly across different browsers.

The Plain Download Attribute

The simplest way to use the Download Attribute is to just include it in its most basic form in your anchor tags. You don't need to include an additional file name or any supporting information.

<a href="/path/tp/download.pdf" download>Download Now!</a>

The result looks like this:

By including "download" you're telling any browser reading the page to download the target link instead of opening it. In this instance, the browser will download the file exactly as it is with the same name. The user will see the following Save box.

Changing the File Name

What happens if you actually want to change the name. There are plenty of occasions where you'd want to do this. Automatically generated file names are a good example. They usually have ridiculously long names with strings of garbage characters. That's not the experience you want for your visitors. You can standardize things with the Download Attribute.

To specify a file name, set the download attribute equal to it. Exclude the file extension. The browser can't and won't convert the file type, so there's no sense in trying.

<a href="/path/to/download.pdf" download="your-file">Download Now!</a>

Your visitors will download the file as your-file.pdf.

Downloading an Image

Along with this comes a simplified way to let your users download images directly. This isn't revolutionary, and you can probably piece it together yourself, but you can use the download attribute to create a downloadable image link.

Start by setting up an image like you normally would on your page. This, of course, will be the image that's available for download.

<img src="/path/to/image.jpg" alt="my image">

Then, encapsulate the whole thing in an anchor tag, linking to the image path.

Finally, add in the download attribute to your anchor tag. You can change the name of your image if you like.

Then, encapsulate the whole thing in an anchor tag, linking to the image path.

<a href="/path/to/image.jpg">
 <img src="/path/to/image.jpg" alt="my image">
</a>

Finally, add in the download attribute to your anchor tag. You can change the name of your image if you like.

<a href="/path/to/image.jpg" download="image-download">
 <img src="/path/to/image.jpg" alt="my image">
</a>

Now, when a visitor clicks the image, they'll automatically download it directly from your server. It's not necessary, and it might seem like overkill to a developer, but how many site visitors would think to right-click on an image to view or download it?