Preparing Digital Photos for Your Weblobe Site
Step 1: Save as...
Images displayed on screen and images in print are very different beasts in terms of size and colour. As such, it's a very good idea to save an alternate version of your digital photos for use on your website. Open the original file from your camera in an application like Photoshop, choose File, Save As... to make yourself a version of the image you can edit without ruining your original file.
Just to be sure, we'll just mention again; you really shouldn't perform any of the following edits to your original images. Save as, make a copy, duplicate, whatever... Just please be sure you're not ruining your precious originals.
Size:
Weblobe takes care of image resizing for you. You feed it a single master file and it makes all the required thumbnails, medium and full-page versions for you, all scaled according to the constraints of the design and layout of your website.
The bigger the better:
Weblobe's image manager, like all image processing software, can only scale images down; it can take a huge image and reduce it, it can't take a tiny file and blow it up. So it makes sense to upload the largest image you can...
But not too big:
While you can upload any size image to Weblobe's image manager, there are a couple of limitations in the real world. Specifically, the amount of hard drive space that images take up, and how long it takes you to upload the master files.
Because most modern digital cameras make the huge files that are required to get good prints it's generally a good idea to scale your website versions of images down to more manageable sizes.
As a rule of thumb 1000 pixels along the longest edge is good starting point.
Currently around 800 pixels across is the average monitor size, but 1024 pixels across is gaining fast. Once you've taken into account things like scroll bars and other window clutter it seems pretty unlikely that your website will be able to use images larger than 1000 pixels, at least for a good few years. This will change in the future, but by the time we're all using 20 million pixel high-dynamic-range projectors on a regular basis image formats themselves will have changed.
Resolution
The resolution setting (dpi) really doesn't matter when it comes to images on the web. If you find this statement too infuriatingly confusing, you may want to read more about The Irrelevance of Resolution on the Web...
Colour:
Colour Space, ICC device profiles and colour management are complex things, and impossible to completely cover in a short article like this. Working on the assumption that those that care about colour management will already know something about it and probably be able to make sense of the following advice:
Generally speaking, the sRGB colour space works most consistently and reliably on websites. Web browsers are pretty bad at dealing with anything else. A lot of digital cameras use this colour space by default, but many, particularly high end cameras like digital SLRs, can and do use things like AdobeRGB colour space. While AdobeRGB is great for recording colour it's not the best way of displaying it on the average monitor.
If your camera uses anything other than sRGB, you can convert your web version images using applications like Photoshop. Under the Edit menu in Photoshop you'll find an option called Convert to Profile. Choose this and select sRGB from the profile drop-down (it'll generally have a version number like sRGB IEC61966-2.1).
The Intent drop-down list is generally best set to Perceptual, but sometimes you'll find Relative Colormetric works well. The Preview check box allows you see the effect this conversion will have on your image. Use Black Point Compensation is best left checked. As is Use Dither.
Your image editing application's own documentation will contain more info on all of these options.
File Type:
Once you've resized your image and converted it to sRGB, you'll need to choose a format to save it in. JPEG seems to be the way to go.
In Photoshop, choose File, Save As... Under the Format drop-down choose JPEG
Embed Color Profile:
It's best to leave the Embed Color Profile unchecked.
Weblobe preserves color profiles, but doesn't read them.
If you upload an jpeg with an attached profile it will completely ignore the profile when it makes all of its alternate sized versions, then attach the profile to these versions. Most browsers can't (or won't) read profiles, so you end up with a pointlessly bloated file. Unless you seriously expect your users to download a copy of your images and open them up in a profile-aware application like photoshop.
When you hit Save, you'll get a set of JPEG Options:
Quality
Weblobe's image manager does a clever thing when it comes to image quality. If you save an image as a maximum quality JPEG, Weblobe recognises the fact you must really care about the quality of this image, and so the different sized versions it makes are saved at a similarly high quality setting. Which means that all your images, from thumbnails right up to gallery view images will look fantastic, but take a while to load. Equally if save your web master at a very low quality JPEG, Weblobe follows your cue and creates images with maximum compression. They'll load very fast, but will show some signs of compression.
A happy compromise seems to be Quality setting 8 in photoshop's Save As.. JPEG, which produces great, fast loading images with no visible signs of compression.
Format Options
Baseline (Standard) works just fine. There are other options, but they're beyond the scope of this article.