Forum Moderators: open
<snip>
I am trying to find a simple way to prevent visitors from downloading photographs from the photo gallery.
(I am not going to watermark at this point, or damage the images for view by messing with them in photoshop, at this point, either.)
I expect I'll make a right a click button announcement, if I find nothing else. But as you might know, that's not going to stop a truly interested party from taking the copyrighted material.
I welcome opinions on this subject. I'm open to suggestions or ways you might have approached and solved a similar dilemma.
Thank you for reading this little note.
-- JudithEm
[edited by: BlobFisk at 8:45 pm (utc) on May 24, 2004]
[edit reason] No personal URLs - please review the TOS. [/edit]
It seems like ronin's technique should be possible without any extra div's if the glass.gif is stretched over the orignal image dimensions and the real image is set as the background.
html:
<img id="pic1" src="images/glass.gif" alt="pic1 description" width="338" height="393" />
#pic1 {background: url(images/pic1.jpg) no-repeat; }
Now that I've learned that IE5 Mac was the first browser to offer doctype switching [webmasterworld.com], I'm thinking that factor might have played into the problem.
But I stopped trying to protect images and have no interest in doing so for any client in the future. IMO it's an understandable, but ultimately misguided use of time and energy.
If you have a page with lots of (same-sized) images you can have a set up like this:
in the css:
img {width:144px; height:108px;}
#a {background: url(/otherfolder/pic1.jpg) no-repeat;}
#b {background: url(/otherfolder/pic2.jpg) no-repeat;}
#c {background: url(/otherfolder/pic3.jpg) no-repeat;}
#d {background: url(/otherfolder/pic4.jpg) no-repeat;}
#e {background: url(/otherfolder/pic5.jpg) no-repeat;}
in the html:
<img id="a" src="glass.png" alt="Description of pic1.jpg">
<img id="b" src="glass.png" alt="Description of pic2.jpg">
<img id="c" src="glass.png" alt="Description of pic3.jpg">
<img id="d" src="glass.png" alt="Description of pic4.jpg">
<img id="e" src="glass.png" alt="Description of pic5.jpg">
Where do I put the external .css file?
Essentially, wherever you want. You can reference the external stylesheet in the head of your html document using the following:
<style type="text/css">
@import url(/mystyles.css);
</style>
so just modify the filepath as required.
Do I fill in where you've written (photo.jpg) with each single photo...?
Yes, see the code above.
Do I put the associated HTML code in the header part of the HTML file with the photo(s) in it?
No, put it in the body, as you would normally.
Oh, and if a visitor right-clicks and sees glass.png, can they go Back or does it mal affect their experience of the page visit?
This method should allow right-clicks to function as normal.
aeve's modifications are well worth implementing if you have multiple images on a single page - my original experiment was with a single large image on a page.
>> #photo {position:absolute; z-index:1; width:100%; >> height:100%; background: url(photo.jpg) top left >> no-repeat;}
>> #glass {position:absolute; z-index:2; width:100%; >> height:100%; background: url(glass.png) top left;}
>> Then in the html code write:
>> <div id="photo"> </div>
>> <div id="glass"> </div>
But I am only getting one row of the image, not the full image.
The image is in a table, with the image on the left, and various text on the right...
I only see enough of the image that eaquals the height of the text in the first row on the right...
I am not too good at CSS, so if anyone has any ideas...
BTW, I added a new wrinkle to this. Since my site is DB driven, I have a new CSS style sheet dynamically made for each page!
dave
After going through all the hazzle of protecting your those photos. Make sure your site is actually usable!
I just hate photographer sites where you can't save a bookmark to a certain image page because they are all in a pop-up image browser, or where you never can navigate through series or see a whole series at once.
Remember that you are putting those pictures online for a reason! You do it since you want people to actually see them, you do it to get attention, you do it to show potential clients your work.
You do it since you want people to actually see them, you do it to get attention, you do it to show potential clients your work.
But you DON'T do it so thieves, the dreck of the earth, can take your hard-won imaginings for themselves, to sell, or to "rework"....
Whenever you put images on the web, then a serious "for profit" thief can always get the images. So, no matter what kind of technology you use to put obstacles in the way of theft, that is still no substitute for a proactive stance.
Let your photographer friend know that. Teach him or her how to do an image search and suggest they do it regularly.
If someone starts making serious money from another's work, you'll probably learn about it sooner or later. I would expend at least ten times the effort in publicity and marketing -- compared to resources used in loss prevention efforts.
For anyone doing creative work of any kind, the biggest danger is not the casual mis-appropriation of your work, but the very real chance that you will never find as wide an audience as you could.
I'm speaking here from decades of successful work in retail -- too much emphasis on loss prevention repels people. Yes, you may save some dollars that might have gone to theft, but you end up trashing many times that in lost business. There is a sweet spot in all loss prevention.
So I agree with Nikke's caveat. Instead of bending over backwards to prevent what is ultimately not preventable, bend over backwards to ensure that every visitor really can use the website.
After going through all the hazzle of protecting your those photos. Make sure your site is actually usable!
Absolutely. That's why it's worth discussing methods of giving some protection to images which do not disable the right click (which is vital for usability in all sorts of ways).
I think it should be clear that all these approaches to "protection" will only stop the casual, informal appropriation of images
I second that - anyone who knows how to use Print Screen or go into the Temporary Internet Files folder on Windows will have your image in five seconds flat regardless of what sort of protection you use.
But, when it comes to bandwidth theft, protection is not pointless. If you have a lot of images which people are going to hotlink to (and these tend to be the casual people), it's better that you do make some attempt to protect the image and the filepath... otherwise writing emails to people to ask them to stop using the bandwidth you pay for becomes a permanent headache.
Also if your site's primary content is original artwork or photography then it's not funny to have a lot of people ripping off your site without giving you any credit - probably the best way to deal with this though is by adding a visible watermark to your images (which can also contribute to viral advertising).
carfac > Try changing the height and width styles to the dimensions of your image. So, for instance, if your image is 40x80, use:
#photo {position:absolute; z-index:1; width:40px; height:80px; background: url(photo.jpg) top left no-repeat;}
Actually there is only one sure way to prevent that technique and it is a complex solution.
That solution is to convert your jpg image to a single frame MPEG.
Users who view the picture in MediaPlayer will not be able to use the [Print Screen] technique because for some reason the picture inside MediaPlayer won't render in a screen capture.
The bonus is that if your picture was set to the right dimensions and you use the right codec, your user can expand the picture to a full screen view that scales perectly (most of the time) and doesn't have some of the problems associated with doing the same in image viewing software.
But as an mpeg the picture can't be captured or printed. It can still be saved as an mpeg movie, though.
This means the user can download it and keep it, but it would not be very easy to make use of it.
But as an mpeg the picture can't be captured or printed.
No matter what trick you use, from the moment something appears on the screen, it's perfectly possible to capture that screen.
FYI: I still use Corel Capture (feature of Corel5, released in 1995!) for all screen captures and there were no problems at all to capture a frame from an mpeg movie.
Users who view the picture in MediaPlayer will not be able to use the [Print Screen] technique because for some reason the picture inside MediaPlayer won't render in a screen capture.
But as an mpeg the picture can't be captured or printed. It can still be saved as an mpeg movie, though.This means the user can download it and keep it, but it would not be very easy to make use of it.
But yeah, it's perfectly possible to capture or otherwise print a frame from an MPG file. And remember that as soon as you start using codecs and whatever, you automatically lose over 50% of your legitimate audience, who don't have/don't want to/can't install a plugin or media player. It's very important always to use the right format for the job. Photographs should nearly always be a tif or jpeg.
Anyway, I'll repeat the problem that has been stated and restated throughout this thread: There is absolutely no way to stop people accessing your images if they want to.
As for bandwidth theft by "casuals" (which seems to be one of the major concerns here), well, Angelfire and Geocities seem to do an excellent job of preventing just that. I'm not quite sure what they do, but it's something simple to do with the server settings disallowing any other domain from displaying their image, and so it gets replaced on the remote site with a standard unusable generic logo image. No code is required, and page functionality is intact.
And just for good measure, I'll repeat the problem that has been stated and restated throughout this thread: There is positively no way to stop people accessing your images if they want to.
