How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?

To discourage users from downloading images, you can disable right-clicking on your Webflow site, though it's important to note this is not a foolproof method for protecting content.

1. Use a Custom Embed to Disable Right-Click

• Go to the Page Settings for any page where you want to apply this, or place the code in a site-wide custom code section.

• In the Before tag section, add this inline JavaScript:

  Content:
  document.addEventListener('contextmenu', event => event.preventDefault());

• This script disables the context menu (which appears on right-click) on the entire page.

2. Optionally Target Only Images

If you only want to disable right-click on images specifically:

• Use this alternate snippet instead:

  document.querySelectorAll('img').forEach(img => img.addEventListener('contextmenu', e => e.preventDefault()));

• This ensures that right-click is only blocked on <img> elements.

3. Add Code in Webflow

• Go to Project Settings > Custom Code.
• Paste the preferred script under Before tag.
• Save Changes and Publish your site for it to take effect.

4. Understand Limitations

• Disabling right-click only discourages casual users. Images are still loadable through browser dev tools or page source.
• For better protection, consider:
• Overlaying transparent divs above images.
• Displaying images as CSS background images instead of <img> elements.
• Using lower resolution/display-optimized images on the front-end while keeping high-res versions protected.

Summary

To disable right-clicking on images in Webflow, add a small JavaScript snippet via Custom Code that targets the entire page or just <img> elements. This adds basic protection, but remember it won't prevent determined users from accessing your images.