Fast, Affordable Web Hosting!

Web Design Tutoring!

Custom Web Design!

<-- Back To Tutorial List                                                             Printer Friendly Version

Once you have XnView set up, you're ready to go to work on the pictures for your site.  Generally speaking, in order to be used on the web pictures need to be in jpg format, 640 X 480 resolution, and no bigger than a 100k file size.  The reason for this is that half the world is still on smaller monitors and/or a dialup connection.  So your site needs to be "friendly" to ALL your potential customers, not just those on broadband!

XnView makes all that easy by using something called "batch conversions" where all those changes can be made to multiple files at once.  Here's how it works:

Open XnView and find the folder in the directory tree that your pictures are in.  Right-click on that folder and select "New folder" to create one under it.

I usually call mine "Web Ready"

Now return to the folder with all your pictures in it, and highlight them all.  Next you can either use the "Tools" pull-down menu to get to "Batch Conversion" or find the "Convert" button on the toolbar.  Either one brings up the "Batch Conversion" dialog box.

In the top "Input" window are all the files you highlighted.  (If they're not there, or if you also want files from another folder, you can use the "Add" or "Add Folder" buttons to achieve that.)

Next is the "Output" section, and the first thing we want to do is enter our desired output directory, (the "Web Ready" folder we made).  You can browse to it by using the button to the right of the "Directory" textbox that has the three dots on the bottom of it.

Next is the output format.  If it doesn't already say "JPG - JPEG / JFIF" then change it to it.  Next we want to hit the "Options" button next to it, and make sure when the "Options" box comes up that the "Quality" slider next to it is set at 80%.  Then OK your way back to the "Batch Conversion" box.

Now we want to click to the "Transformations" tab up top.  This is where we'll resize our pics to 640 X 480 (or thereabouts!).  First, find the "Resize" listing in the left window, then either double-click on it or click once and click "Add" so that it appears in the top right window.  Once it does, you have to click on it there to highlight it, and then all the resizing options will appear, as below.

The only thing we want to change here is to fill in the 640 number in the "Width" textbox.  Since you typically want to maintain the width/height ration, (and the "Keep Ratio" box is already checked), we won't specify a height.

Finally, you click the "Go" button at the bottom left.  Depending on how many pictures you have and the speed of your computer, it may take a few minutes.  But when it's done, you should have all your pictures re-sized, re-formatted, web-ready and all in one folder!

Let's check and see what we've got.  Browse to your "Web Ready" folder and click once on a picture thumbnail just to highlight it.  Now look in the lower left corner of your screen on the "status bar".  You should see all the picture details there, and the file size will be in [brackets].  Each picture should be less that 100k.  Doing all these processes individually on one picture at a time used to take hours if not days, and XnView does them all in 5 minutes!

Xnview is also a great picture viewer.  Double clicking on any thumbnail brings the picture up by itself in view mode.  Double-clicking also returns you to the browser mode.  While you're in view mode if you like all the windows stuff out of the way, the F11 key toggles between the normal view and full-screen.

Cropping is easy as well.  While in view mode, just click and drag to form a box around the part you want to save.  Then right-click and choose "Crop", and save your cropped picture.

XnView is capable of much more, i.e., 3-D picture borders, text over pictures, color and red-eye adjustment, unusual effects, etc.  The help file will teach you a lot.