Rename Downloads With the HTML download Attribute

Sometimes the file on your server has a name that makes sense internally but looks terrible in a person’s Downloads folder. The HTML download attribute lets you suggest a better filename without renaming the source file.

Add the name you want to the link:

<a href="/path/to/myfile.pdf" download="project-guide.pdf">
  Download the guide
</a>

The browser will download myfile.pdf and suggest project-guide.pdf as the saved filename. Keep the correct file extension in the new name; changing .pdf to .jpg does not change the file itself.

You can also use the attribute without a value when you only want the link to trigger a download:

<a href="/path/to/myfile.pdf" download>Download the guide</a>

Images work the same way

<a href="/path/to/myimage.jpg" download="newname.jpg">
  <img src="/path/to/myimage.jpg" alt="My image">
</a>

Here the image doubles as the download link. Clicking it downloads the original image and suggests newname.jpg as the filename.

When the server should decide

The attribute is convenient for files on the same origin, but browsers may ignore it for cross-origin URLs. If you control the server and need download behaviour to be reliable, return the file with a Content-Disposition header:

<a href="/path/to/myfile.pdf">Click to download</a>

HTTP/1.1 200 OK
Content-Type: application/pdf
Content-Disposition: attachment; filename="myfile.pdf"

For a normal same-site download, I would start with the HTML attribute. It is a small addition and keeps the filename close to the link that offers the file.

Using the `download` attribute and the `Content-Disposition` header, you can offer any type of file for download on your website and specify the name that the file should be saved as.