DEV Community

Cover image for image download using html
pavankumarsadhu
pavankumarsadhu

Posted on • Edited on

2 1

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)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay