<

Putting Your Photos Online

Published on
13,758 Points
3,558 Views
2 Endorsements
Last Modified:
Awarded
"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.
http://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 imageWhat 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 image150 DPI image300 DPI imageWhat 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 imagemedium-resolution imagelow-resolution imageIt 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 cutoutuncompressed image cutoutjpg compressed image cutoutShould 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, oversharpenedBut 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 closeupPractical 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
http://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!
 
2
Comment
Author:Ray Paseur
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 38

Expert Comment

by:lherrou
Nice article! It got my "Yes" vote above.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Join & Write a Comment

The goal of the tutorial is to teach the user how to import photos into Adobe Lightroom efficiently and to keep everything organized.
In this sixth video of the Xpdf series, we discuss and demonstrate the PDFtoPNG utility, which converts a multi-page PDF file to separate color, grayscale, or monochrome PNG files, creating one PNG file for each page in the PDF. It does this via a c…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month