PhotoWalkPro

One of the great mysteries in digital imaging is that of resolution and how it differs for printing and your monitor. I have had more than one person ask me to print a poster from a PowerPoint slide where the end result is great text and highly pixelated images. Their big question is always, “why does it look so good projected on an 80″ screen but so bad when I make a 30″ print?” This is usually the point where I try to explain the difference between screen and print resolutions. I don’t even bother with the whole raster vs. vector issue.

The same issue is found in reverse on many photoblogs that I have run across. Many times a photographer will take an image with their multi-megapixel camera and just upload it to their server without thought to actual screen resolutions and optimal sizing. The average 5-MP camera has a resolution of about 1600×1200 pixels. From looking at my user stats, I can tell you that the most common screen resolution is still 1024×768 pixels. In other words, why upload more image than the average user can fit on their screen? Not only are the images too large for standard monitors, but they are using up more server storage than is really needed. So here is another consideration, if you are writing a blog, the actual space the blog text occupies is somewhere between 500 and 750 pixels depending on the blog software and theme you are using. If you are uploading images to live in your blog post, you probably don’t need anything larger than that pixel width for any of your images.

Maximum Image Width for my blog is 720 pixels

There are exceptions to this rule. If you want to provide a higher resolution image for the reader to view, either using Lightbox or having the image open in a separate window, then you will probably want something larger than 600 pixels. Even so, you should still consider not exceeding the limits of the average reader’s screen. So how do you go about making sure your images are of optimal size? There are a couple of easy solutions.

First off, don’t just dump your images straight into your website (this includes Flickr). First of all, it will take a long time to upload but it will take even longer for someone with a dial-up connection to download. I know as a cable user I sometimes get spoiled by my fast connection and forget that there are those who still connect at 56K and are just as valuable a reader as someone using FIOS. Don’t make them suffer waiting for images to load. Sooner or later, they will just stop visiting your page because they get tired of waiting. Those big images are also resource hogs taking up space on your server. I know that lots of people actually have their blog images hosted on a public storage site like Flickr or Picasa but hey, storage is storage. Why use it if you don’t need to (I actually have other reasons why I don’t host my images via Flickr or Picasa but that’s a subject for a different post.)

Resize the image prior to uploading. This makes sense for a few reasons, not to mention the ones that I just listed above. As with anything having to do with your images, if there is a way to control what happens to them, you should. Why let an automated process resize your images when it is easily done by yourself prior to uploading. The tool I use for resizing is Photoshop. This is a fairly easy process but usually renders really nice results for me.

To resize in Photoshop, it’s just a matter of clicking the Image menu and then on Image Size (you can also use the keyboard shortcut Cmd + Opt + I) The nice thing about the Photoshop resize is that you get to choose which method is used for interpolating your data from large to small. That’s the trouble with downsizing your images, you are effectively throwing out information so you should be careful which information is being tossed.

I typically choose the Bicubic Sharper which, as you can see above, is also recommended by Adobe for reductions. I also use this one for enlargements but once again, more info for a future post. You also have the ability to input which resolution you would like your image to be and, as long as the dimensions are linked, it will maintain your aspect ratio for you by changing the dimension of the other axis (change height and width is automatically changed for you).

There are other methods that will allow you to resize for web in Photoshop, another one to consider is the Save for Web & Devices option found under the Image menu.

This option will allow you to resize and choose your JPEG, PNG, or GIF file options while comparing several different options at once. Above you can see the 4-Up option (no, there is no 7-Up option). This box will also let you deal with slices for making those larger web graphics load even faster. I have to admit that I don’t use this dialog very often but sometimes it is nice to see some comparisons, especially when you want to see how different JPEG compressions will effect your image.

Finally, this brings us to JPEG. If you are running any sort of photoblog, then you want your images to look good. That immediately rules out GIF for your images. Save that for your graphics files. The PNG format isn’t bad and will allow you transparent areas but you can’t set the compression level so there is diminished control over the final image size. That leaves us with JPEG. JPEG, which isn’t actually a file format, it’s a compression algorithm, has been around for years and still works as well today as it did 10 years ago, if you use it right. I’m not going to explain how it works (I really ought to wrie down all these ideas for future posts) but I can tell you what you should and shouldn’t be doing.

Here’s a BIG DON’T for you. Don’t just compress your images to a very small size without resizing them first. They will look like crap when they re-open in a browser. I am always surprised by the number of files that people email to me that are less the 300K in size but open to 20MB in Photoshop. Here are some definite DO’s:

Do use as little compression as possible for your image. There is usually no need to go less than Medium on the quality scale.

Do keep the Preview checked on. This will give you a real-time view of how destructive the compression is being to your image.

Do keep an eye on the file size of your image which appears below the Preview Checkbox (see image below). This will tell you how large (or small) your image will be with the current jpeg settings. I try and keep all of my web images under 300K if at all possible. The majority end up around 200K or slightly larger.

So to summarize:

• Don’t use more image then you need on your site. It will load faster and your readers will be happier.
• Know what your optimum sizes are and resize using your favorite image editor (control the destiny of your images).
• Choose the appropriate file size and compression for your images.

Related posts:

1. Bridge your way to organized images
2. Why shoot RAW instead of JPEG
3. No Blog Wednesday
4. Camera Calibration – Camera Raw and Lightroom’s Secret Weapon for Better Looking Images
5. Give your Black & White Images a Different Look with Duotones

This entry was posted on Monday, February 25th, 2008 at 12:01 am and is filed under Blog Stuff. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.