You probably all know that situation. You have some files on your website and you want to enable your users to easily download these files. This task is pretty easy and you might wonder, why I am writing a blog post about this. Well, not every user knows how to do it easily and you might want to make it as easy as possible for those inexperienced users, to download the files.

The default behavior for links to files

So how do you usually link to files a user should be able to download? You probably just use a simple link like in this example:

<a href="http://example.com/image.jpg">Download image</a>

Most of you might see the issue with this example. When a user clicks on that link, the browser will not trigger the download, but open the file in the same tab. A browser will usually just load any file, it can show directly in a tab. This is not really what we wanted to happen. So how could we solve it?

Educate the users

An experienced user would argue, that you don’t have to change anything, as the user could easily right-click on that link and just select the “save as…” option from the context menu. But not every user knows about that fact. That’s why you sometime find little texts next to such links, explaining on how to do it. Some use small info icons with modals, to not have those long explanations in the text. But is this really user-friendly? Do users even click on those info icons? Probably not.

Just use some HTML magic

When someone asks such a question in the different groups and forum I read, I often see solutions which are using PHP code to read the files content from the file and prints that content with some additional HTTP-Headers, that will force the Brower to download the file. But this requires an additional PHP script and the modifications of any download link to be redirected to that script. This is really a lot of work for such an easy task. So, is there an easier way? Yes there is, and you wouldn’t believe how easy it is. Just add a single HTML attribute to the link. The “download” attribute:

<a href="http://example.com/image.jpg" download>Download image</a>

It’s really as simple as that. Now when a user clicks on that link, the browser will open the “Save as…” window and the user can directly download the file. It will use the original filename of the file.

Change the name of the downloaded file

This is all really nice, but how about some files with random/ugly filename? Well, that’s also very easy. In the example above, the attribute didn’t have any value. And unlike some other HTML “empty attribute syntax”, the download attribute is not taking the values “download” or “true”, when not left empty, but the filename of the downloaded file. So, setting a nice name for the downloaded file would look like this:

<a href="http://example.com/4f82cf81e9.jpg" download="image.jpg">Download image</a>

Pretty nice, eh?

Open the file in a new tab

But how could a user open such a link in a new tab, if he does not want to download it? Well than he just has to right-click that link an select “open link in a new tab” (CMD/CTRL + click or mouse wheel click does not work). So, you should probably think twice, if the default behavior should really be a direct download or not. Some user might prefer to open images and PDFs in a tab, rather than downloading it.

Browser support

Now you might wonder, which browser supports this attribute. Chrome, Firefox and Microsoft Edge do. Internet Explorer is not supporting it, even in version 11. Safari will only support it in version 10.1 and later, which is not released, yet. On mobile, most Android browsers are supporting it (except for Opera mini and the UC Browser). On iOS, it looks like no browser is supporting it. That’s probably due to the fact, that iOS does not have direct access to the file system, so downloading a file would not make this file easily accessible to users.

Conclusion

In terms of user experience, a direct download using the download attribute might be a good idea. Especially, if the users of the website might not be technically experienced. But be aware of the browser support and have an alternative for them. And don’t add the attribute to any link, as the user might not expect the link to trigger a direct download.

I hope you found this post useful. Have you known the attribute already? When and why have you used it? Or how could it be helpful for your projects? Any comments are always welcome 🙂