Browse All Articles > Putting Your Photos Online
"I want to put my photos online, but I don't want them stolen. What settings should I use?"
When You Put Photos Online
First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc. Remember Napster? In other words once you produce a URL (web address), the resource there (in this case your picture) has been released into the wild, and you're 100% dependent on the copyright registration (you did register your copyright, didn't you??) to protect you from electronic thievery. So if you have a really good, high-quality image, do not publish the image URL and instead publish a URL of a degraded or adulterated version of this image, either highly compressed or watermarked or both. Most of the royalty-free online galleries use a watermark. You should, too. See the examples here:
http://www.istockphoto.com/search/agency#3fa3a34
http://www.istockphoto.com/stock-photo-6277927-meeting-break.php?st=cf85e1b
Can I Watermark my Images Automatically?
Yes. See this article for some ideas.
https://www.experts-exchange.com/articles/10065/Prevent-Hot-Linking-by-Adding-a-Watermark-to-Your-Images-On-the-Fly.html
OK, I Understand the Risks
Great. Let's get started with a sample photograph. Here is the original, uncompressed bitmap version. Save it some place safe, preferably in a folder that you have backed up. If you have the camera RAW images, save those, too. Your original images are like photographic negatives; they should be guarded carefully since they are not readily re-created. Never perform image editing operations on your originals. Instead, make a copy and do all your work on the copy.![original uncompressed image]()
What DPI Should I Use?
DPI stands for "dots per inch" and has the same essential meaning as "pixels per inch." It describes the density of image information. Resolution and size are related by the DPI ratio. If you change DPI, you change the rendered size of the image, without changing the stored size of the image. An example might help. Let's say you have an image that is 400 pixels wide by 300 pixels high. Its area is 400 X 300 = 120,000 pixels. If you render the image at 72 dots per inch its width is 5.556 inches and its height is 4.167 inches. 400 pixels divided by 72 pixels per inch equals 5.556 inches. Render the same image at different DPI values and you still have 120,000 pixels, but the image density is different thus the rendered size is different - so at 300 DPI, it would only be 1.33 inches wide and 1 inch tall. The PNG images here all have the same image information, but different DPI values. Note the file sizes given in KB, and note also that the browser (absent HTML or CSS instructions to the contrary) renders the images based on the pixel dimensions, ignoring DPI. So you can correctly conclude that DPI matters in printing but makes little difference on the screen.
In printing portraits and photographs at normal sizes up to about 16"x20" I have found that clients are satisfied with 150DPI prints on Epson Premium (5-star) Lustre paper. YMMV, and if you're looking at competition prints for a contest, the judges will tell you what your paper and density settings must be (probably glossy, 300DPI). In practice I've used higher values and lower values. 150DPI seems to be as low as you can go before the printed image starts to break up during hand-held inspection. You might try copying and printing these images to see how DPI affects visual quality. You may have to set the DPI yourself in Photoshop or other imaging software. You will also see how it affects the size of the print.![72 DPI image]()
![150 DPI image]()
![300 DPI image]()
What Compression Should I Use?
The PNG images in this article all use PNG compression which is (1) somewhat effective with photographs, reducing our sample image from 350K to 150K, and (2) renders faithfully (not "lossy"). A PNG compressed image is rendered on screen and in print with pixels that are identical to the original 8-bit RGB image, hence the file sizes of these PNG images are all the same. As a matter of personal preference, I happen to like PNG compression, but JPG compression is usually used for photographs online because it can be much more effective at compressing the images. Thoughtful use of JPG compression can reduce the risk that your photo will be copied and printed without your permission because the compressed photos tend to look worse as they are enlarged for printing. Here are three copies of the same image using different levels of JPG compression. Note the file sizes are much less than PNG images and a small fraction of the original bitmap image. Compare the on-screen image quality. Then print them on highest-quality photo paper using any DPI you want and compare the printed results.
With JPG compression, the browser can achieve a similar visual result without rendering each pixel one-at-a-time. Instead, nearby pixels of similar color values are clumped together and given a single RGB color value. So while the image is still 400x300 pixels and still requires 120,000 pixels on the screen or page, it has less image information after JPG compression. This is called a "lossy" compression, since image detail was discarded to produce the clumps of similar color. How much compression can you use? There is not any straightforward rule like you might adopt for printer DPI values. With some images you can get away with lots of compression, and other images (typically color gradient or detailed images) will begin to look bad even at 50% compression. You have to experiment with your own images and different compression levels as I did here with the baseball player.![high-resolution image]()
![medium-resolution image]()
![low-resolution image]()
It Looks Different in Print
The "looks bad" effect of lossy compression seems to be magnified by printing, but as a practical matter photographic printing is almost an anachronism. Large, inexpensive high-quality monitors make electronic storage and presentation the popular choice today. I have covered weddings where the mother of the bride did not even want a printed album, preferring instead to have all the pictures in a web site. As she said, "Grandma has email." About the only place where you still need prints is the gallery where you sell the prints, matted and framed in a finished product.
Screen Size, Print Size, and Magnification
Image size on screen is determined by the pixel dimensions of the image and may be controlled by explicit HTML size attributes or CSS styling. But an image rendered on the browser screen is still pointed to by its URL, and that means the client can copy the image file. The copy will be a duplicate of whatever the URL points to and the copy will have the same pixel size as whatever is stored on your server, even if you reduce the apparent image dimensions for onscreen display. This makes a fairly compelling argument against having a direct URL link to the original image. You may have seen web sites that use JavaScript to disable the right-click mouse function. While this "feature" is something that may momentarily annoy your web site visitors, it is completely useless as a security measure. The client can simply use "view source" to locate the URL of the image. So it is my practice to create images for the web that are JPG compressed and sized to suit the browser viewport. I never create a URL link to any image that I do not want people to copy.
Image size on the printed page is determined by the pixel dimensions divided by the DPI setting. If a client copies your image file, she can lower the DPI setting to make larger prints from your pictures, but as DPI goes down, and image size goes up, image quality goes down. What the client cannot do is add image information, thus at some level of magnification, any given image will not look very good.
Viewing distance and print size come into play here, too. Images that are expected to be viewed from a distance (think large background images in retail window displays) may look rather awful if you look at just an 8"x10" segment of an 8'x10' print. Here is a tiny slice of the 400x300 pixel image enlarged to simulate the effect of standing too close or using too much magnification. Note the difference between the enlargements. One shows the pixels from the original image. The other shows the close-up effect of JPG compression.![image showing cutout]()
![uncompressed image cutout]()
![jpg compressed image cutout]()
Should I Sharpen my Pictures?
Yes! Some sharpening almost always improves online display. Here are three excerpts from our baseball photo showing from left to right the original, a partially sharpened image and an over-sharpened image. The contrast of edges in the photo are enhanced to produce the appearance of better focus. Which looks best to you?![original, sharpened, oversharpened]()
But this is not equally true for printed images, where the sharpening will become obvious and may detract from the appearance of the image. Here are the original image on the left and the over-sharpened image on the right enlarged to show the pixels. Even on the screen you can begin to see the rough edges and noise created by the sharpening process. This will be more obvious in print. You might want to download this image and look at it full size on screen or in print. ![original, oversharpened closeup]()
Practical Solutions Online or in Print
Unless you are excited by the idea of entering the low-margin, highly competitive field of online e-commerce stock image web sites, you might be happy with SmugMug. If you want to create online photo albums of your own look into JAlbum. For fine printing, it's hard to beat the Epson professional printers (and never use anything but Epson media and ink). To get more out of your photography, spend a day of your life in the Nikon School, an ever-evolving traveling show that never fails to delight. And to make really beautiful photos, take many, many pictures of beautiful subjects. There is no excuse not to "overshoot" your subject; once you own the memory card, all your film is free!
Links for Learning
DPI:
http://en.wikipedia.org/wiki/Dots_per_inch
Image Origin:
http://www.tineye.com/about
Copyright:
US Law: http://www.copyright.gov/help/faq/faq-protect.html
More information: http://www.naturescapes.net/102005/cw1005.htm
UNESCO collection of international laws: http://portal.unesco.org/culture/en/ev.php-URL_ID=14076&URL_DO=DO_TOPIC&URL_SECTION=201.html
Visual Explanation: http://thevisualcommunicationguy.com/2014/07/14/can-i-use-that-picture/
Right Click:
http://blogs.sitepoint.com/dont-disable-right-click/
Watermark:
http://picasa.google.com/support/bin/answer.py?answer=106193
http://www.youtube.com/watch?v=iuIQSPMHk2U
https://www.experts-exchange.com/articles/10065/Prevent-Hot-Linking-by-Adding-a-Watermark-to-Your-Images-On-the-Fly.html
CSS and Image Size:
http://www.sitepoint.com/forums/css-53/can-you-resize-image-css-434432.html
Viewing Distance and DPI:
http://www.signindustry.com/outdoor/articles/2001-03-19-viewingDistance.php3
Epson:
http://www.epson.com/cgi-bin/Store/jsp/Product.do?sku=CA61201-VM
http://www.bhphotovideo.com/bnh/controller/home?O=&N=0&A=endecaSearch&InitialSearch=yes&Q=&Ntt=Epson+3880
http://www.epson.com/cgi-bin/Store/ProductMediaSpec.jsp?BV_UseBVCookie=yes&infoType=Overview&oid=-12348&category=Paper+%26+Media
Useful and Fun:
http://www.smugmug.com/
http://jalbum.net/en/
http://www.nikonusa.com/Learn-And-Explore/Nikon-School/index.page
http://photo.net/
http://www.luminous-landscape.com/index.shtml
http://www.cambridgeincolour.com/tutorials.htm
Please give us your feedback!
If you found this article helpful, please click the "thumb's up" button below. Doing so lets the E-E community know what is valuable for E-E members and helps provide direction for future articles. If you have questions or comments, please add them. Thanks!
When You Put Photos Online
First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc. Remember Napster? In other words once you produce a URL (web address), the resource there (in this case your picture) has been released into the wild, and you're 100% dependent on the copyright registration (you did register your copyright, didn't you??) to protect you from electronic thievery. So if you have a really good, high-quality image, do not publish the image URL and instead publish a URL of a degraded or adulterated version of this image, either highly compressed or watermarked or both. Most of the royalty-free online galleries use a watermark. You should, too. See the examples here:
http://www.istockphoto.com
http://www.istockphoto.com
Can I Watermark my Images Automatically?
Yes. See this article for some ideas.
https://www.experts-exchange.com/articles/10065/Prevent-Hot-Linking-by-Adding-a-Watermark-to-Your-Images-On-the-Fly.html
OK, I Understand the Risks
Great. Let's get started with a sample photograph. Here is the original, uncompressed bitmap version. Save it some place safe, preferably in a folder that you have backed up. If you have the camera RAW images, save those, too. Your original images are like photographic negatives; they should be guarded carefully since they are not readily re-created. Never perform image editing operations on your originals. Instead, make a copy and do all your work on the copy.
What DPI Should I Use?
DPI stands for "dots per inch" and has the same essential meaning as "pixels per inch." It describes the density of image information. Resolution and size are related by the DPI ratio. If you change DPI, you change the rendered size of the image, without changing the stored size of the image. An example might help. Let's say you have an image that is 400 pixels wide by 300 pixels high. Its area is 400 X 300 = 120,000 pixels. If you render the image at 72 dots per inch its width is 5.556 inches and its height is 4.167 inches. 400 pixels divided by 72 pixels per inch equals 5.556 inches. Render the same image at different DPI values and you still have 120,000 pixels, but the image density is different thus the rendered size is different - so at 300 DPI, it would only be 1.33 inches wide and 1 inch tall. The PNG images here all have the same image information, but different DPI values. Note the file sizes given in KB, and note also that the browser (absent HTML or CSS instructions to the contrary) renders the images based on the pixel dimensions, ignoring DPI. So you can correctly conclude that DPI matters in printing but makes little difference on the screen.
In printing portraits and photographs at normal sizes up to about 16"x20" I have found that clients are satisfied with 150DPI prints on Epson Premium (5-star) Lustre paper. YMMV, and if you're looking at competition prints for a contest, the judges will tell you what your paper and density settings must be (probably glossy, 300DPI). In practice I've used higher values and lower values. 150DPI seems to be as low as you can go before the printed image starts to break up during hand-held inspection. You might try copying and printing these images to see how DPI affects visual quality. You may have to set the DPI yourself in Photoshop or other imaging software. You will also see how it affects the size of the print.
What Compression Should I Use?
The PNG images in this article all use PNG compression which is (1) somewhat effective with photographs, reducing our sample image from 350K to 150K, and (2) renders faithfully (not "lossy"). A PNG compressed image is rendered on screen and in print with pixels that are identical to the original 8-bit RGB image, hence the file sizes of these PNG images are all the same. As a matter of personal preference, I happen to like PNG compression, but JPG compression is usually used for photographs online because it can be much more effective at compressing the images. Thoughtful use of JPG compression can reduce the risk that your photo will be copied and printed without your permission because the compressed photos tend to look worse as they are enlarged for printing. Here are three copies of the same image using different levels of JPG compression. Note the file sizes are much less than PNG images and a small fraction of the original bitmap image. Compare the on-screen image quality. Then print them on highest-quality photo paper using any DPI you want and compare the printed results.
With JPG compression, the browser can achieve a similar visual result without rendering each pixel one-at-a-time. Instead, nearby pixels of similar color values are clumped together and given a single RGB color value. So while the image is still 400x300 pixels and still requires 120,000 pixels on the screen or page, it has less image information after JPG compression. This is called a "lossy" compression, since image detail was discarded to produce the clumps of similar color. How much compression can you use? There is not any straightforward rule like you might adopt for printer DPI values. With some images you can get away with lots of compression, and other images (typically color gradient or detailed images) will begin to look bad even at 50% compression. You have to experiment with your own images and different compression levels as I did here with the baseball player.
It Looks Different in Print
The "looks bad" effect of lossy compression seems to be magnified by printing, but as a practical matter photographic printing is almost an anachronism. Large, inexpensive high-quality monitors make electronic storage and presentation the popular choice today. I have covered weddings where the mother of the bride did not even want a printed album, preferring instead to have all the pictures in a web site. As she said, "Grandma has email." About the only place where you still need prints is the gallery where you sell the prints, matted and framed in a finished product.
Screen Size, Print Size, and Magnification
Image size on screen is determined by the pixel dimensions of the image and may be controlled by explicit HTML size attributes or CSS styling. But an image rendered on the browser screen is still pointed to by its URL, and that means the client can copy the image file. The copy will be a duplicate of whatever the URL points to and the copy will have the same pixel size as whatever is stored on your server, even if you reduce the apparent image dimensions for onscreen display. This makes a fairly compelling argument against having a direct URL link to the original image. You may have seen web sites that use JavaScript to disable the right-click mouse function. While this "feature" is something that may momentarily annoy your web site visitors, it is completely useless as a security measure. The client can simply use "view source" to locate the URL of the image. So it is my practice to create images for the web that are JPG compressed and sized to suit the browser viewport. I never create a URL link to any image that I do not want people to copy.
Image size on the printed page is determined by the pixel dimensions divided by the DPI setting. If a client copies your image file, she can lower the DPI setting to make larger prints from your pictures, but as DPI goes down, and image size goes up, image quality goes down. What the client cannot do is add image information, thus at some level of magnification, any given image will not look very good.
Viewing distance and print size come into play here, too. Images that are expected to be viewed from a distance (think large background images in retail window displays) may look rather awful if you look at just an 8"x10" segment of an 8'x10' print. Here is a tiny slice of the 400x300 pixel image enlarged to simulate the effect of standing too close or using too much magnification. Note the difference between the enlargements. One shows the pixels from the original image. The other shows the close-up effect of JPG compression.
Should I Sharpen my Pictures?
Yes! Some sharpening almost always improves online display. Here are three excerpts from our baseball photo showing from left to right the original, a partially sharpened image and an over-sharpened image. The contrast of edges in the photo are enhanced to produce the appearance of better focus. Which looks best to you?
But this is not equally true for printed images, where the sharpening will become obvious and may detract from the appearance of the image. Here are the original image on the left and the over-sharpened image on the right enlarged to show the pixels. Even on the screen you can begin to see the rough edges and noise created by the sharpening process. This will be more obvious in print. You might want to download this image and look at it full size on screen or in print. 
Practical Solutions Online or in Print
Unless you are excited by the idea of entering the low-margin, highly competitive field of online e-commerce stock image web sites, you might be happy with SmugMug. If you want to create online photo albums of your own look into JAlbum. For fine printing, it's hard to beat the Epson professional printers (and never use anything but Epson media and ink). To get more out of your photography, spend a day of your life in the Nikon School, an ever-evolving traveling show that never fails to delight. And to make really beautiful photos, take many, many pictures of beautiful subjects. There is no excuse not to "overshoot" your subject; once you own the memory card, all your film is free!
Links for Learning
DPI:
http://en.wikipedia.org/wi
Image Origin:
http://www.tineye.com/abou
Copyright:
US Law: http://www.copyright.gov/h
More information: http://www.naturescapes.ne
UNESCO collection of international laws: http://portal.unesco.org/c
Visual Explanation: http://thevisualcommunicationguy.com/2014/07/14/can-i-use-that-picture/
Right Click:
http://blogs.sitepoint.com
Watermark:
http://picasa.google.com/s
http://www.youtube.com/wat
https://www.experts-exchange.com/articles/10065/Prevent-Hot-Linking-by-Adding-a-Watermark-to-Your-Images-On-the-Fly.html
CSS and Image Size:
http://www.sitepoint.com/f
Viewing Distance and DPI:
http://www.signindustry.co
Epson:
http://www.epson.com/cgi-b
http://www.bhphotovideo.co
http://www.epson.com/cgi-b
Useful and Fun:
http://www.smugmug.com/
http://jalbum.net/en/
http://www.nikonusa.com/Le
http://photo.net/
http://www.luminous-landsc
http://www.cambridgeincolour.com/tutorials.htm
Please give us your feedback!
If you found this article helpful, please click the "thumb's up" button below. Doing so lets the E-E community know what is valuable for E-E members and helps provide direction for future articles. If you have questions or comments, please add them. Thanks!
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (1)
Commented: