Option 1: Photoshop
Optimizing images for the web is the easiest way to prepare photos for websites. Within Photoshop, in one step, you can:
- reduce the file size (not the dimensions–how big the file is in terms of memory used to store it and download it) as much as possible without compromising the final image quality
- set the color profile for good web browser compatibility (see below)
- downsizing the image to the dimensions desired
- apply sharpening to the downsized image
- change file types/formats/extensions
To get started, go to “File” => “Save for Web & Devices…”
Make sure that “JPEG” is selected as file format (unless you are creating images with transparency, then pick PNG), set your image output size (width & height dimensions) and turn down the quality value. Keep an eye on the file size in the lower left corner and watch how the quality looks on the “optimized” tab preview. Try to get the file size as small as possible without noticeably sacrificing image quality – don’t be afraid to set it low! Let your eyes be your guide – if you can tell that quality is lost in the image preview, bump it back up until you’re satisfied. (Save your setting, as a Preset at the top in case you want to use it quickly and easily later.)
If uploaded images look dull or the colors appear to be off when viewed in certain web browsers, it may be because they are saved with a “color profile” that cannot be displayed by web browsers. Modern browsers will typically display your images properly if saved in the sRGB IEC61966-2.1 color profile. The good news is that this is automatically selected when exported with the “Save for Web & Devices…” Photoshop tool, described above. For extra info, click here to read more.
Manually Downsize Images in Photoshop
If you have a special case where you want to apply other effects or have a specific workflow which does not work with the method above, you can use the Photoshop controls to manually downsize your images to the appropriate dimensions by going to “Image” => “Image Size…”
Set the longer dimension (width for landscape orientation) and click OK. As long as you “constrain proportions” (indicated by the little link icon) the other dimension will take care of itself:
Optionally, you can add a bit of sharpening after downsizing, or don’t sharpen at all, it’s up to you and what you think looks best on-screen.
If you know your way around Photoshop a bit, you may want to create a couple of actions which automate a workflow for you — this can save a lot of time, since you can select a group of images and apply all the ‘output’ steps you like to all of your images in one or two total clicks! (hint: read about Batch Processing in your software help files)Optimize images
Option 2: BlogStomp
Let’s face it; not everyone uses Photoshop. And that is increasingly true for ProPhoto users who have non-photography sites. For those that don’t have image editing software, or that just find the process too complex, there is a easy, low-cost solution.
We highly recommend BlogStomp. Not only can you sharpen, compress, resize and watermark your images, but it also gives you rich customization options for image collages. It is an excellent tool for quickly and easily preparing your images for web display. Watching their video tour below will give you a good idea of its capabilities. You can download a trial version to give it a test-ride.