How to prevent downloading low-res images?
Marcee last edited by
Context: I run a photography business that encourages people sharing photos without restrictions. My websites contains galleries of thumbnail images where each image links to the original, high-res version. For example, a gallery page may look like this:
The webpage uses PhotoSwipe.js that switches the browser to full screen mode when the user left-clicks an image, showing the full resolution version of the image. This all works nicely both for viewing and downloading images. Users can simply right-click the high-res version and select "Save Image As..." from the context menu. Alternatively, they can right-click the thumbnail image and select "Save Link As..." to accomplish the same thing.
However, I recently found out that some users attempt to download images by right-clicking the thumbnail image and selecting "Save Image As...", which results in downloading a low resolution version rather than the original image. This has resulted in my photos being shared and displayed by others in low resolution, something which they did not intend to do.
How can I improve the UX of my photography website to prevent users downloading low resolution images?
You could follow this and make those thumbnails be divs with a background-image css attribute.
For example, this is how Facebook and Instagram have image galleries and then only when you click on every image, you can save.