How to Force a Browser to Download Images on Click?

How to Force Browser to Download Image Files on Click

The Issue

Many users encounter the inconvenience of browsers only opening image files instead of downloading them. This behavior differs from the default action when clicking links to Excel files, which prompts the browser to download the file automatically.

Client-Side Programming Solution

Fortunately, using client-side programming, it's possible to force the browser to download image files on click. HTML5 introduces the 'download' attribute, which can be added to links to initiate the download process.

<a href="/path/to/image.png" download>

Compliant browsers will then prompt the user to download the image with the same filename (e.g., image.png).

To specify a custom filename for the downloaded file, assign a value to the 'download' attribute:

<a href="/path/to/image.png" download="AwesomeImage.png">

Note: As of spring 2018, this solution no longer works for cross-origin hrefs. For example, if you try to create a link to an image on a different domain (e.g., ), the download will not be initiated.

The above is the detailed content of How to Force a Browser to Download Images on Click?. For more information, please follow other related articles on the PHP Chinese website!