How to Download image in HTML?

You want to add the functionality of downloading images in HTML. And you want to use something other than JavaScript. You want to do this in HTML and CSS. Well, in this article, I am going to help you, and you will learn how to download an image in HTML. But you should know HTML and CSS. If you are a beginner, don’t worry. I will give you the source code for this feature.

But I will also tell you how to download images in HTML, CSS and JavaScript. Javascript is essential if you want to make your website interactive. So, In this article, I will tell you two methods to download images in HTML. One method is downloading images using HTML and CSS; the other uses HTML, CSS and JavaScript.

Method 1: Download image in HTML

Step 1: Create a Button in HTML

Step 2: Design this button in CSS
Step 3: Add functionality in HTML

Note: Image should be in same folder where you are creating HTML file.

Creating a Button in HTML

First of all, we will create an HTML Button. Here is the source code to create a button in HTML.

HTML

				<!DOCTYPE html>
<html>
<head>
    <title>Download image in HTML</title>
</head>
<body>
<br><br>
<button>Download Now</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Download image in HTML</title>
</head>
<body>
<br><br>
<button>Download Now</button>
</body>
</html>

Creating a Button in HTML

As we have created a button, we will style and make it beautiful.

CSS

				<style type="text/css">
    *{
        margin: 0;
        padding: 0;

    }
    body{
        text-align: center;
    }
    button{
        width: 150px;
        height: 30px;
        background-color: orangered;
        color:white;
        border:2px solid orangered;
        font-size: 18px;
        font-family: sans-serif;
        border-radius: 5px;
    }
    button:hover{
        background-color: transparent;
        color:orangered;

    }
</style>

<style type="text/css">
    *{
        margin: 0;
        padding: 0;

    }
    body{
        text-align: center;
    }
    button{
        width: 150px;
        height: 30px;
        background-color: orangered;
        color:white;
        border:2px solid orangered;
        font-size: 18px;
        font-family: sans-serif;
        border-radius: 5px;
    }
    button:hover{
        background-color: transparent;
        color:orangered;

    }
</style>

Adding download image functionality in HTML

Now, we are ready to add download image functionality in HTML. Here is the complete code for you.

HTML

				<!DOCTYPE html>
<html>
<head>
    <title>Download image in HTML/title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;

    }
    body{
        text-align: center;
    }
    button{
        width: 150px;
        height: 30px;
        background-color: orangered;
        color:white;
        border:2px solid orangered;
        font-size: 18px;
        font-family: sans-serif;
        border-radius: 5px;
    }
    button:hover{
        background-color: transparent;
        color:orangered;

    }
</style>
<body>
<br><br>
<a href="webpage.zip"><button>Download Now</button></a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Download image in HTML/title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;

    }
    body{
        text-align: center;
    }
    button{
        width: 150px;
        height: 30px;
        background-color: orangered;
        color:white;
        border:2px solid orangered;
        font-size: 18px;
        font-family: sans-serif;
        border-radius: 5px;
    }
    button:hover{
        background-color: transparent;
        color:orangered;

    }
</style>
<body>
<br><br>
<a href="webpage.zip"><button>Download Now</button></a>
</body>
</html>

Recommended Reading

How to make portfolio website in Javascript?

Method 2: Download image in HTML, CSS and JavaScript

Step 1: Create a Button in HTML
Step 2: Design this button in CSS

Step 3: Add JavaScript to add functionality

Creating a Button in HTML and CSS

Here we will create a HTML button and than we style it in CSS.

HTML

				<!DOCTYPE html>
<html>
<head>
  <title>Download Image on Button Click</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f5f5f5;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #FF8C00;
      color: #fff;
      border: none;
      border-radius: 5px;
    }

    button:hover {
      background-color: #FF4500;
    }
  </style>
</head>
<body>
  <button id="downloadButton">Download Image</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Download Image on Button Click</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f5f5f5;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #FF8C00;
      color: #fff;
      border: none;
      border-radius: 5px;
    }

    button:hover {
      background-color: #FF4500;
    }
  </style>
</head>
<body>
  <button id="downloadButton">Download Image</button>
</body>
</html>

Adding JavaScript and download functionality

HTML

				<!DOCTYPE html>
<html>
<head>
  <title>Download Image on Button Click</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<style>
    button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

</style>
<body>
  <button id="downloadButton">Download Image</button>
  

  <script>
    document.getElementById('downloadButton').addEventListener('click', function() {
  var link = document.createElement('a');
  link.href = 'image.jpg';
  link.download = 'image.jpg';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Download Image on Button Click</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<style>
    button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

</style>
<body>
  <button id="downloadButton">Download Image</button>
  

  <script>
    document.getElementById('downloadButton').addEventListener('click', function() {
  var link = document.createElement('a');
  link.href = 'image.jpg';
  link.download = 'image.jpg';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});
  </script>
</body>
</html>

Recommended Reading

Can I use any image on the internet in my HTML code?

No, you should only use images that you have permission to use. This includes images in the public field, images licensed for usage, and images designed by you.

What is the best image format for the web?

JPEG is best for images, PNG for graphics, and GIF for animations.

How can I optimize images for the web?

You can optimize images for the web by reducing the file size of the image, using the appropriate image format, and using image compression tools.