Tip of the Week #9: Images, Part I

27 Feb

totw-banner.jpgJason Nguyen

Anybody who designs a website, be it a wiki or any other kind of site, will eventually come to realize that an all-text site is one of the most boring things ever, and although some of that is helped with some well-placed colors and styles, you’ll eventually need some images to spice things up.

PBwiki makes the image upload process very easy, and the basic layout options are simple. However, before we even begin the layout process, the first step to making optimum images begins well in advance. This week, we’ll take a look at how to prep your images before you upload them, and next week, we’ll discover some neat ways to present them in your wiki.

Software

PBwiki stats tell me that most PBwiki users are on Windows-based machines, so there’s really only one good option for your basic image-editing needs:

Irfanview

Use it. Love it. It converts practically every format into every other format, resizing/resampling and doing basic effects with ease. You can’t go wrong. For folks using a Mac, I really have no idea, so tell me if you know a good free option. Linux users can fend for themselves.

Formats

For most cases, I like to classify images into two categories: photographs (and photograph-like images) versus graphics. The basic rule of thumb here is that the first category, photos, includes anything with rich colors, and/or gradients. The second category, graphics, includes images with many solid-colored spots and a limited palette, which are often computer-generated.

To demonstrate the difference, I’d like everyone to meet Oscar the panda, first with a photo (from the Wikimedia Commons):

Oscar Photo

And now a graphic (drawn by me):

Oscar Graphic

The two formats traditionally used online are JPEG (the ones that end in .jpg) and GIF (the ones that end in .gif). The JPEG standard uses a compression that optimizes for gradients and many colors, like the Oscar photo. The GIF standard uses a palette (256 color or less) and a compression scheme optimum for solid colors, like the Oscar graphic.

To again demonstrate the difference, take a look below. The image shows a detail of a rainbow from an image at the Wikimedia Commons in both formats and blown up 4x. The one on the left is from the JPEG, showing smooth, vivid colors. The right, the GIF, shows evidence of a limited color palette and definite blotchiness.

Comparing JPEG and GIF

Therefore, if you’re bringing in pictures from your digital camera, make a JPEG, but if you drew a graph in Microsoft Paint, go with a GIF.

Sized to Fit

The Internet is about speed, and to get optimum speed, your graphic file sizes need to be as small as possible. You’ve already taken the first step by choosing the right kind of image, but you also need to choose proper image dimensions.

Too often, people upload giant photos to their wiki, then resize them using HTML (or by dragging the little resize bar in the Point-and-Click Editor). This does not ease your load time at all, and in many browsers, the resized image may show distortion. The example below is a large photograph that has been resized before uploading:

More Oscar

The full-size image, which can be accessed here, is well over 200Kb in size. That translates to as long as a full minute loading for somebody on a dial-up modem. On a high-speed connection, it’s more like a few seconds, but with ten or more images, you’d really feel the lag. Furthermore, if you’re using a free wiki, you get only 10 megabytes of space. At over 200Kb a pop, you’d be able to upload less than 50 photos to your wiki. Get that down to 40Kb, like the image above, and we’re talking 250 photos.

If you use Irfanview, you’ll be given the option to either Resize or Resample. Resampling will almost always give a better result, as it recalculates the individual pixels that make up the image, while resizing simply matches a pixel with the closest pixel from the original image.

Conclusion

Streamlining your images is a winner for everyone: it makes your visitors happy (the page loads more quickly), it makes PBwiki happy (their servers don’t get overloaded needlessly), and thus you’re happy. That just so happens to make Oscar happy too:

Oscar!

See everyone next week as I discuss layout options with images as well as the ever-popular thumbnail approach! As always, e-mail me at dochuyen84@gmail.com or leave a comment below!

One Response to “Tip of the Week #9: Images, Part I”

Trackbacks/Pingbacks

  1. The Daily Peanut » Blog Archive » Tip of the Week #18: 5 Rules of Net Etiquette - May 2, 2007

    [...] to prep your images for efficiency. You can visit my tip series on images for more information: Tip #9 and Tip [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 88 other followers

%d bloggers like this: