Image Extras

We’ve gotten some requests for more information about manipulating image files, so here’s a tutorial page showing you how to install and use IrfanView, a free and excellent image editor. Although you are free to use the graphic tool of your choice (eg. like PhotoShop, PaintShop Pro, GIMP), we recommend IrfanView because it has an included Batch Resize function. As always, be sure to click the High Quality (HQ) button when watching the videos to make it easier to read some of the text.

Width x Height

Before we start, this may be common knowledge by now, but anytime you hear the dimensions of an image or screen, eg. “640 by 480″, “1024 x 768″,  they usually mean in pixels (px), and it’s ALWAYS width first followed by height.


Installing IrfanView

A few suggestions: leave all the filetypes unchecked, and don’t install any toolbars.

Quick Resizing and Rotating Photos

This is a very straightforward video showing you how to do a quick resize on a single photo

Pro Resizing and Cropping

The narrator on this video makes some very good points, and does a great job explaining how to crop photos.

Whuddaya mean I gotta resize my photos?

Digital cameras these days are amazing things. They can easily take 10 or more megapixel photos and not break a sweat.  Unfortunately, if you’re taking pictures JUST for the web, then less is much, much more.  We want our webpages to be viewable on the maximum amount of computer screens.  At the moment, the most common smallest screen is about 1024px wide.  Doing the math, that amounts to a measly 1 megapixel photo.  What that means is… Any photo 2 megapixels and up MUST be resized to less than 1024px wide for use on a website. (As an aside, if you’re planning on emailing these pictures too, you’ll have to resize them even smaller, to about 800px or less so you don’t fill up your friends’ email accounts with your ginormous photos). Wow, that seems like a lot of resizing, eh? That’s where a program like IrfanView comes along with its Batch Resize function, which does all your files in one step.

Here’s how to do it:

ps. You may be thinking, what’s the point of my extra megapixels if I can’t see them on my screen? Well unless you’re a professional photographer, the only reason you’d want extra megapixels is if you ever print out your photos. In that case, then yes, more is better. But if you only look at your photos on a computer, then you may wanna change the setting on your camera to take lower mpixel shots. A side benefit is, you can fit even more on your memory card :)

Digital Image File Formats? JPG? GIF? BBQ?

Digital images can come in one of many file formats. The more common ones on the internet are JPG, GIF, BMP and PNG. What’s the difference? Each format uses different Compression algorithms. The more compressed a file is, the smaller the file’s size, the more files you can fit on your server, the faster your browser can download the file, the faster your website will load. Thus, JPG is the king of compression, and should be used in most cases.

You must be thinking, “So if JPG has the highest compression, then just give me that!”, but with compression comes a downside. JPG uses “lossy” compression, so the more it compresses a photo, the “chunkier” or “fuzzier” it looks. So there is a filesize vs quality tradeoff. For photorealistic (pictures of real life) images, this quality loss isn’t too noticeable. But when you have photos with sharp lines and just a few colors (think logos or cartoons), JPGs look horrible. That’s where “lossless” compression comes in.

Lossless compression means they compress the file as much as they can without chunkiness. They’re usually not as small, but they’re always super sharp. For this, PNG and GIF are the formats to beat. PNG is the more modern and compact format and should be used in most cases EXCEPT when you need your image to match a background’s color. If that is the case (ie. your picture must blend against a background), then I recommend going back to the older GIF format because PNGs can not guarantee a color match. GIFs also have the capability to animate, but that is rapidly becoming a tacky practice on the web.

So how do you switch formats? It’s simply a matter of opening your image editor, such as IrfanView and using “Save As” and selecting a format.

And what of BMPs? These are the original, uncompressed images of 20 years ago. There is no advantage or reason to ever use them. Period.

Prev Page: Links and Images
Next Page: HTML Quiz-o-matic!