How to disable download of images in website is a common concern for website owners who want to protect their visual content.
People can easily save images by right-clicking or dragging them, which can lead to unauthorized use.
If you have unique content, protecting your images is important. So, how can you disable the download of images on a website?
While no method is 100% foolproof, there are several ways to make it harder for users to save your images.
You can block right-click, use CSS tricks, or even set up server-side restrictions.
These techniques help protect your content while ensuring a smooth user experience.
In this guide, we’ll go through seven effective ways to prevent image downloads.
Whether you run a blog, an e-commerce store, or a portfolio site, these steps will help keep your visuals safe.
How to Disable Download of Images in Website?
Here are 7 ways to disable the download of images on a website.
1. Disable Right-Click Using JavaScript
One of the best method of disabling the download of images in website is totally disabling the right click on your website.
Use this code before the </body> tag in your website and you’re done.
<script>
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
</script>2. Adding Watermark
The second best method is to use your website logo or any text as your watermark to disable download of image.
If anyone downloads and use your images then you can claim your images anytime because of the watermark in your images.
Likewise, you can also increase your brand value with this method through images.
You can use Canva to add watermark to your images. We also use the same method to optimize watermark for our images.
3. CSS to Block Image Downloads
Adding the below CSS to your website’s CSS file (e.g., style.css) or inside a <style> tag in the <head>.
img {
pointer-events: none;
-webkit-user-drag: none;
user-select: none;
}You can find this file in your website file manager.
Note: Take a backup of your website before making any changes to any files.
4. Using .htaccess (For Apache Servers)
Edit the .htaccess file on your server (located in the root directory of your website).
<FilesMatch "\.(jpg|jpeg|png|gif|webp|avif)$">
Order Deny,Allow
Deny from all
Allow from env=HTTP_REFERER
</FilesMatch>
SetEnvIf Referer "^https://yourwebsite\.com" HTTP_REFERER
SetEnvIf Referer "^https://www\.yourwebsite\.com" HTTP_REFERER
Where to find this file?
Adding this code in the .htaccess file will prevent users from directly accessing the image files.
This method will also prevent others to embed your images to their websites. So, download or embedding will be totally disabled for your website.
Note: Replace yourwebsite.com with your Domain Name.
5. Transparent Overlay Method
Use this code inside your HTML file where you have images.
<div style="position: relative; display: inline-block;">
<img src="your-image.jpg" alt="Image">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent;"></div>
</div>
Making images as transparent overlay will make a user very difficult to right click any image.
6. Prevent Screenshots with JavaScript (For Touch Devices)
This method uses JavaScript to detect when a user takes a screenshot on mobile and hides the content.
Put this script inside the <head> or just before </body>.
Also, if someone switches apps to take a screenshot, the page will become blank.
<script>
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
document.body.innerHTML = "";
}
});
</script>
7. Use JavaScript Canvas Instead of Images
Instead of using <img>, draw the image on a Canvas element. This makes it difficult for users to download via right-click.
Use this code inside your website <body> tag if just add before </body>:
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "your-image.jpg";
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
</script>
Right-clicking won’t allow saving the image, and users won’t find an image URL.
Final Thoughts
Using the tricks and techniques like disabling right-click, javascript canvas, preventing screenshots, transparent overlays, .htaccess, and adding watermark to your images can prevent any user to download any of your image.
This all the methods are the best protection methods. We use the watermark method which we like the most.
