Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

Preparing Photos for the Web

Filed in:The Web
Web Dev

Preparing Photos for the Web

November 23rd, 2007  · stk

A 10-step, practical guide for preparing digital camera images for display on your website or blog. The software-independent guide covers important steps for editing, optimizing and working with photographic data files in JPG format. Several links to freely available, quality image-editing software packages are also provided.

A Practical "How-to" Guide for Using Digital Camera Images on the Internet

As a web-developer and b2evolution forum moderator, I often work with people (or companies) that are new to blogging, authoring web pages, the Internet or even *gasp* the computer. Most want to use digital camera images on their new blog or website. Many think that they can just upload the image files that they get from their digital camera.

A website has 30 seconds to impress. Take the time to prepare your digital images.

"Hey, it's a digital camera, right?"

In one sense, they can. The file format generated by most digital cameras is a JPG file, which is an ideal format for the Internet. But, even though it is possible to transfer the image straight from the camera, to a website, it would be a mistake.

This article will tell you why.

It will also provide a practical, 10-step guide for preparing digital camera images for the web. It will cover several basic, but important steps for editing, optimizing and working with photographic data files in JPG format. The guide is software-independent, but several links to freely available, quality image-editing software packages are provided.

If you are new to digital cameras, image-editing or JPG files and want to use your digital images on the Internet, on your blog or website, you will benefit from reading this practical guide.

Why Images Require Preparation - Size Does Matter

Whoever said that "a picture is worth a thousand words", didn't work with digital camera images. Pictures from our 8 mega-pixel digital camera are worth about 786,232 wordsThe number of 5-character words, including spaces, that can be stored in a 4.5MB file (average size of a JPG file from our 8 mega-pixel camera).!

Digital images are comprised of millions of pixels (short for "Picture Elements"). When you zoom in on a digital image, you can see the individual pixels. They look like tiny colored blocks. They are the smallest unit of digital images (which are also called a bit mapped images or raster graphics).

The size of a digital image is determined by the number of pixels. Our 8 mega-pixel camera yields digital images that are 3,264-pixels wide by 2,448-pixels high (landscape mode) and contains approximately 8 million pixels, which is why it's an 8 mega-pixel camera (1 mega-pixel = 1 million pixels).

Here's a handy Mega-pixel Calculator. Input the pixel height & width of a digital image from your camera and calculator will yield the mega-pixel size and estimates for how many photos will fit onto various sized memory cards, how large of a high-quality (300dpi) photo print you can make, etc.

Digital cameras are designed to replace traditional 35mm film cameras. To do this, they must generate comparable photographic prints. In order to make a high-quaility (300 dpi) 8-inch by 10-inch paper print, a digital image file must contain a lot of data, which is why the mega-pixel ratings on digital cameras keep increasing. Generally speaking, the higher the mega-pixel rating, the higher the quality of the image file and (ultimately) the final photographic print.

Fat Pictures | Small Straws

In the quest to match the print quality of traditional film cameras, digital cameras far exceed the requirements for displaying photos on the Internet. On the Internet, there are two limiting factors: screen resolution and bandwidth.

Screen Resolution: Monitor resolution settings are selected by computer users. Not too long ago, most monitors had a resolution of 800x600 pixels. As prices have dropped on larger monitors, the resolution settings have increased. Now about 80% of monitors are set at 1024x768 or higher. (Source)

25 monitors are needed to see a full-size, 8 mega-pixel digital image at 800x600 resolution.

Regardless, two things are clear: (a) Your blog or website needs to look good at a variety of resolutions; (b) Even the highest resolution setting won't display a full-size 8 mega-pixel image, directly from a digital camera.

IMPORTANT: Re-size your digital camera images!

Bandwidth: Page sizePage size is the total file size for every element on a web-page.

In order to see a web-page, all HTML files, CSS files, JavaScript files, image files & graphics files, must be transferred across the Internet.

The larger the combined size of these elements, the longer it takes to move them across the Internet connection (the straw).
matters for everyone, especially for people on a dial-up connection. As of November, about 14% of U.S. Internet users still access the Internet on a dial-up connection, at speeds of 56Kbps or less.

If I loaded three, 8-mega-pixel images straight from our digital camera (4.5MB each, total 13.5MB), it would take about 33 minutes to download just those three images, over a 56Kbps modem - 4 minutes over a 'high-speed' ADSL connection. Visitors won't wait long for a page to load!

Here's a free, online 'page load' analyzer. It show how many elements are a web-page, their size and speed estimates for each element and the whole page, using various web connections. Just type in your URL and go!

IMPORTANT: Keep image files small! Use a select number of images!

 

10-step Guide for Preparing Your Digital Camera Images for the Web

  1. Transfer - Cull - Rotate - After transferring your images from your digital camera to your computer, delete any blurry, out-of-focus or badly composed shots. Then rotate your images (you can use your image editing software or do it in Windows XP File Explorer. For Windows File Explorer, set your viewSetting your view-type: In Windows File Explorer, click on the folder icon holding your images -> click the "Views" toolbar icon -> choose "Filmstrip".

    Setting Your Folder Type: If "Filmstrip" isn't an option, Right-click your folder icon -> go to "properties" -> click the "customize" tab -> select "Pictures" (and check the sub-folders box) -> then hit "OK" or "Apply".
    to "Filmstrip".
    • To rotate in Windows File Explorer: Click one of the two small "green & blue icons" below the image.
  2. Saving - Most cameras have their own naming convention and automatic numbering. I just leave the names alone. Renaming is tedious. For me, "saving" involves setting all the files to "read-only" (protection from accidental overwriting).
  3. Backups - If your hard drive failed, you would lose all your pictures, so it's always a good idea to backup your pictures to a CD, DVD, a tape or another hard drive, just in case.
  4. Editing - Now you're ready to begin preparing an image, applying changes to the original. Open the originalHINT: Always start with the original image. Each time you save a JPG file, you lose image quailty. Saving, re-saving, and saving again, degrades the image.

    (It's a bit like making a copy of a copy. Copied enough times, the page quality is really horrid).
    , read-only image file into your favorite image editor. Work on it (following the guidelines below) and save it into a different folder (e.g. "My Internet Photos") with new, short, but descriptive name. (Remember - You can't "save" the file, because it's read-only ... you'll be making a copy of it, using "save as" or "save for web", in most applications.)
  5. Planning - Avoid choosing lots of photos on a web-page. This affect page size and slows loading times for your page. It is best to choose only a few great images. They must be relevant to your blog post, web-page or article. Good photos will enhance the visual appeal of your web-page. ;)
  6. Crop - Because image size is important, crop the image tightly around the subject matter. This will maximize the visual impact of the photo. Make 'square-ish' photos (extreme aspect ratios are difficult to view).
  7. Tweaking the image - Most image editors have a variety of tools to adjust a photo. The basics: brightness, contrast, gamma (color), red-eye and sharpness. As you gain skill, you can play more, but a good photo shouldn't need a lot of adjustment.
  8. Important! Optimize it.
    Resize it.
    Resize - IMPORTANT! Resize your images! Most web-designers anticipate a minimum screen resolution of 800x600 pixels. If you include the margins, padding, scroll-bar, sidebars and other things, not all of the 800x600 will be available for an image. The largest dimensions don't need to be more than 600px wide and 500px tall. If you have a larger picture you want to show, consider a link to the JPG file, but show a smaller version on the web-page. Remember, that's the largest, most will be 350px to 500px wide.
  9. Optimize + Save - IMPORTANT! Optimize (compress) your image for the Internet. You should be able to obtain an order of magnitude (10X) reduction in file size, from the original image. This means that your 4.5MB starting image, should end up (no larger than) 45KB, as a general rule. (Results depend on the complexity and size of the final image). Many image editors have a "Save for Web" option (an acknowledgement file sizes need be much smaller on the Internet). Most have a "Save As" option. Either will work.
    • How to optimize: Select the amount of compression (often called "quality"), with a sliding control scaled from 1 to 100, where 1 results in the smallest file. While compression is necessary, it comes at the expense of quality. Don't compress too much, or the image will look blocky (pixelated or jagged).
    Choosing the amount of compression is an art. Good image editing software will let you preview the result and provide an approximate file size. On the others, you just move a slider. The amount of compression you use may vary from 20-100% and 50% is a good place to start. Each image should be done on a case-by-case basis, however. Even large image sizes (600px by 400px) can be compressed to astonishingly small file sizes, without an appreciable loss of quality. We try to ensure that none of our image files exceed 50KB, and often we're in the 19-35KB range. Results depend on both the complexity and size of the image.
  10. File Names - Save yourself grief, follow these few guidelines:
    • Use short, descriptive names (e.g., bill_in_paris.jpg, beach_sunset.jpg). Descriptive names help search engines catalog your images. Keeping it short means less code and avoids auto-truncation.
    • Case counts! "rose.jpg" and "ROSE.JPG" are not the same file on the server. (The convention on most servers is to use lower-case, which I'd recommend).
    • No special characters & spaces. The underscore "_" and dash "-" are acceptable, but avoid using spaces, punctuation and special characters (i.e., !@#$%^&*()][{}|/"'?><,./~`) in your file names. (Windows XP allows some, but the server will be more stringent.)

Image-Editing Software

I only know the software I use, which is pretty limited. I use MS Photo Editor (Microsoft Office Shared Application) and PhotoShop (version 7). I prefer PhotoShop, despite it's complexity, because it allows a preview of the optimized image and an approximate file size.

You may not have access to either, so I thought I'd hunt down a couple of decent freebies:

Picassa (by Google) is a decent choice. The editing interface is very nice, but there is a lot of clutter with regards to the whole "Organize & Share" stuff. One big drawback, is that it doesn't allow you to preview (or see a filesize estimate) of optimized images.

GIMP (freely distributed) is a lot like PhotoShop. It is very powerful, but complex. However, it is open source software - we support open-source ;) - and, like PhotoShop, allows one to preview your optimized photo and get an approximation regarding the final file size.

Conclusions

When you select, edit, optimize, transfer and post photographs to your own website, you wear many hats: You are a photographer, an IT specialist, an art director, possibly a graphic designer, a copy editor, author, web-master, SEO specialist, an advertisement executive, programmer and web developer. The list goes on.

Suffice it to say - the more you know about each role, the better your web-site, blog or article will be. Better sites, blogs and articles are read by more people and will (hopefully) yield more sales, visits, enquiries - whatever your goal might be.

Focus on the goal.

And if nothing else, remember to (a) select a FEW really GOOD images (not lots of mediocre ones); (b) resize them so they're viewable on an 800x600 computer monitor; and (c) optimize them, so they're not a grapefruit being sucked through a straw!

Now go out there and have fun!

(Permalink)
Views: 75043 views
6 Comments · GuestBook
default pin-it button
Updated: 15-Jan-2008
Web View Count: 75043 viewsLast Web Update: 15-Jan-2008

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.


Subscribe to Comments

Auto convert line breaks to <br />

1.flag Gary Comment
11/25/07
Interesting post, I will try not to make my photo's look like a 'grapefruit being sucked through a straw' those flash ones I use are a bit heavier on power, but i seem to like them.

Gz ;)
2.flag Ken Comment
08/14/08
GREAT job!!! I'm a web designer/developer and I can't tell you how many times I've had this same conversation with clients and co-workers. Thank you very much for summing it up so nicely... If it's OK, I'm going to link them to this page whenver the issue comes up (saving me a lot of wasted breath repeating myself) :)
3.flag stk Comment
08/26/08
Ken - Thanks! Sure @ linking (saving my breath is why I took the time to write the article). Same with the one about "quirks mode" and "why not to use tables for layout". ;)
4.flag Rob Comment
09/14/08
Excellent article written in easy to understand language.
Thank-you so much!
5.flag Angela Comment
01/03/09
Exactly what I needed to know.
Thanks!
6.flag stk Comment
01/03/09
Rob & Angela - Thanks for your comments. Glad it helped you!