To disable image downloads on your website, you can implement several strategies.
While these methods can prevent casual users, they cannot completely prevent determined users from accessing images because they can still take screenshots or inspect the webpage’s source code.
Here are some methods you can implement to prevent downloading of images on your website:
1. Use CSS to Disable image download
You can disable the right-click context menu to prevent users from easily downloading images.
img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
-webkit-user-drag: none;
user-drag: none;
}
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
It also Prevent users from dragging images off your webpage and Removes the highlight effect when an image is tapped on mobile devices
2. Disable Right-Click with JavaScript
You can also use javascript to disable right click on your entire domain or on selected pages or elements.
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
3. Use Watermarked Images
You can also add watermarks on your images so that it helps you claim your images and prevent users to take images from your website. You can use any image editing software or site to add watermark on your images.
How to Add Watermark to the WordPress Media Files
4. Overlay Transparent Images
You can place a transparent image over your real image to make it difficult for users to save the actual image.
<div style="position: relative; display: inline-block;">
<img src="your-image.jpg" alt="Protected Image">
<img src="transparent-image.png"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"
alt="">
</div>
5. Use .htaccess to Prevent Direct Image Access (Apache Servers)
To prevent users from directly accessing image files, you can configure your .htaccess file.
<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
This will block users from hotlinking images from your server unless they visit your site.
Create/Edit the .htaccess File. Copy and paste the above code into the file.
Replace yourwebsite.com with your actual domain name.
Try accessing your image URLs directly in the browser. If the configuration is correct, direct access will be blocked unless the image is embedded on your website.
Note: Hotlink Protection: This configuration also prevents hotlinking (embedding your images on other websites).
6. Obfuscate Image URLs
Use JavaScript or server-side methods to dynamically generate image URLs that expire after a short time. For example, AWS S3 and Cloudflare allow time-limited URLs.
Conclusion
Using multiple methods together, such as disabling right-click, using watermarks, and obfuscating URLs, can provide the best image protection on Website.
Let me know which among the methods you are going to implement on your website and don’t forget to share your experience in the comment section.
.png)
