How Can I Make It Harder For People to Download My Images?

Protect Image Downloads: Beyond Standard Techniques

While preventing image downloads entirely is impossible, there are measures you can take to complicate the process and discourage casual users from downloading your images. Here are some additional techniques beyond transparent overlays and CSS background images:

Remove Context Menu Option

Using CSS, you can prevent users from saving images by removing the "Save Image" option from the right-click context menu. This will leave the rest of the context menu accessible:

img {
    pointer-events: none;
}

Disable Drag and Drop

Another option is to disable drag-and-drop for images. This prevents users from dragging and dropping images to their desktop or other locations. You can do this with the following jQuery code:

$(document).on('dragstart', 'img', function(e) {
  e.preventDefault();
});

Hide Image URL

To make it more difficult for users to determine the direct URL of an image, you can hide it from the page's source code. This can be achieved using server-side scripting or custom JavaScript functions.

Watermark Images

Adding watermarks to your images can deter people from using them without permission. A noticeable watermark superimposed on the image will make it less appealing for unauthorized use.

Code Sample:

<img  src="/static/imghwm/default1.png" data-src="http://placekitten.com/600/450" class="lazy" ondragstart="return false;" alt="How Can I Make It Harder For People to Download My Images?" >

This code combines the above techniques to disable drag and drop and prevent image downloads.

The above is the detailed content of How Can I Make It Harder For People to Download My Images?. For more information, please follow other related articles on the PHP Chinese website!