Designers, watch your sizes!

When you license an image from iStockphoto, you are agreeing to use a piece of content subject to the license terms and conditions listed on the content license page.  If you’ve never read the license agreement before, go ahead and take a look.  It’s not that bad, really – nothing at all like 64 pages of iTunes declarations.  The main parts to look at are the “Permitted License Uses” and the “Standard License Prohibitions”.   Lately, violations of one of these uses has come to light, and I wanted to take a moment to point out how to avoid this hazard – the 1280 x 800 image size requirement.

3.c. in the license agreement page states:

Permitted Uses. Subject to the restrictions described under Prohibited Uses below, the following are “Permitted Uses” of Content:
…
on–line or electronic publications, including web pages to a maximum of 1200 x 800 pixels for image or illustration Content or to a maximum of 640×480 for video Content;

With the advent of Google image search it has  become easy for contributors to look for their images “in action”.   Contributors always like to see how their work is being used, so it’s no surprise we like to plug in the occasional image to see if Google can find it.  Unfortunately, one of the things we are finding is that designers are often using our content at sizes much larger than the allowed size above.  Not only is this against the license, but it also slows down the viewer’s experience on the page.  Here’s why.

In html, the “language” that describes a page to a browser, an IMG tag will point the browser to a certain image.  This tag can also declare extra attributes, like a title for the image, or alternate text in case the image can’t be viewed.  There are also attributes for height and width, which will override the actual image size.  So, you can have a 3000×4000 image uploaded, point a browser to that image like so:

<img src=”http://www.wordpress.com/title.jpg”  width=”300″ height=”400″>

and your browser will display an image at 300×400 pixel size on your monitor.  However, your browser has downloaded the entire 3000×4000 image and is holding it on your disk cache for viewing.  So, not only have you forced the viewer to waste time downloading a huge image, they can get a garbage representation of it, since browsers aren’t really made for resizing images.

How does this happen?  Maybe an image was used in a brochure for a company, and then at the last minute added to a website without taking the time to resize it to smaller pixel dimensions, instead using the attributes to resize.   We are also seeing content unmodified on places like flickr at large sizes.  We assume that a buyer has uploaded content to show a client, but unfortunately, they have made it publicly available at huge sizes.  This can allow image thieves to take the image you paid for and use it illegally.  There is no reason for content to be hosted publicly, and I expect a license modification to come around in the future to prohibit this.

How to fix it?  All the designer needs to do is resize the image in Photoshop or other modification software to the correct size.  If there is a 2000×3000 image hosted for a blog, it should only be uploaded at actual used size of 200×300, or whatever.  Don’t use the img attributes to resize the image.  By the way, it’s not harmful to use those attributes if the image is at the correct size as the attributes.  It can help the browser to lay out the page quicker by telling it what space to reserve, both on screen and in memory.  Just don’t use them to resize the image.

If you want to check the images on your website, just right click on them in Firefox or your browser, and see if you have something like an option to “View Image Info”.  If the numbers are 1200×800, there’s some resizing to do in Photoshop.  Your legal person thanks you, and we, the contributors thank you.