Nikholas

Hello all, I went down this rabbit hole today. I fully understand that if someone really wants your images, they are on a website and there is a way to get them. However my goal was to prevent the avg person from being able to save photos from my site to their phones. Preventing right click completely creates too many usability issues for me to be comfortable with so I’ve come up with the solution to create transparent overlays over all the images on the site that essentially don’t allow you to click the image. So far no issues with usability, and doesn’t interfere with anything else on my site. I inserted this into the Header <style> .image-overlay { position: relative; z-index: 9999; /* Ensure the overlay appears on top of the images */ background: rgba(255, 255, 255, 0.0); /* Adjust opacity as needed */ width: 100%; /* Cover the entire width of the image */ height: 100%; /* Cover the entire height of the image */ pointer-events: none; } img { pointer-events: none; } </style> <script> window.addEventListener('DOMContentLoaded', () => { const images = document.querySelectorAll('img'); images.forEach((image) => { const overlay = document.createElement('div'); overlay.classList.add('image-overlay'); image.style.position = 'relative'; image.appendChild(overlay); }); }); </script> Hope this solution helps someone out who is looking to do the same thing.