Disable saving images to mobile devices

After doing a quick search, I found a code to disable right-click options on the desktop. However, when viewing my site via mobile device, the feature is still active. I'm still able to hold the image and save the image to my phone. Is there an accessible code out there that disables this feature on mobile devices as well?

All help is appreciated. 

Thank you

I found a code to disable right-click options on the desktop which has worked just fine, however via mobile the save image feature is still active (iPhone). Is there some coding that will disable this feature on mobile devices as well? I found one in the forum from a few years back but when used it stopped me from being able to edit my site at all - I couldn't click into any of the text boxes!

Help appreciated! 

On 8/7/2021 at 1:18 AM, twigsplace said:

I found a code to disable right-click options on the desktop which has worked just fine, however via mobile the save image feature is still active (iPhone). Is there some coding that will disable this feature on mobile devices as well? I found one in the forum from a few years back but when used it stopped me from being able to edit my site at all - I couldn't click into any of the text boxes!

Help appreciated! 

Hi. Can you share link to your site? We can take a look

Site URL: https://www.ylstudios.me/shop/p/edgy-knitter-sticker

I was able to find code to disable right-click on desktop devices, however image saving is still possible on mobile devices even with the code.

Is there code I can use to disable image saving on mobile devices? Thank you!!

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.