DEV Community

Cover image for image download using html
pavankumarsadhu
pavankumarsadhu

Posted on • Edited on

image download using html

Hi guys,

Today we will see how to make image download when user clicks on image using html.

For that, we need "download" attribute. We need to keep this attribute in the tag, then when the user clicks on image, automatically image get downloaded.

Method 1:

<a href="/wp-content/uploads/2021/08/coding-vs-programming-2.jpg" download>
<img src="/wp-content/uploads/2021/08/coding-vs-programming-2.jpg" style="width:200px;height:100px;">
</a>
Enter fullscreen mode Exit fullscreen mode

In this method, when the user clicks on the image, image will be downloaded with the filename "coding-vs-programming-2".

Method 2:

<a href="/wp-content/uploads/2021/08/coding-vs-programming-2.jpg" download="filename">
<img src="/wp-content/uploads/2021/08/coding-vs-programming-2.jpg" style="width:200px;height:100px;">
</a>
Enter fullscreen mode Exit fullscreen mode

In this method, when the user clicks on the image, image will be downloaded with the filename "filename".

Note: Same origin links can only be downloadable.

Read: How to Increase upload limit upto 1000GB in Wordpress using Increase Upload Limit Plugin for LIFETIME Free of Cost?

Social Profile : LinkedIn

Have a Nice Day!

Top comments (0)