Friday, January 25, 2013
Batch Resizing of Images For Your Website
Do you need to upload lots of images to display as thumbnails on your website? Then have it show enlargements when you click on the thumbnail? Maybe you are showing off photographs or paintings? You may have a graphics program that can resize an image one at a time, but that is not efficient if you need to resize more than just a few images.
Side Note: Our content management system Gigshowcase.com can resize a photo while you upload it. You don’t even need a graphics program. But I still find it easier to batch resize an entire folder of images at one time before I upload them if I have more than just a few.
Here’s Why:
Your photo or other graphic image on your computer may be very large. Size of an image has three main aspects. These are actual file size in kilobytes, pixel size, and print size.
First let’s mention file size. A photo downloaded from your camera may have a file size of several megabytes, and sometimes these files are quite large. A photo that large on your website would make your web page very slow to load. So we want to reduce the file size as much as possible.
Two other aspects of an image file I listed above were pixel size and print size. Print size (and resolution) matter if you were printing these images. Pixel size is what really matters on websites. A 400 pixel wide photo will take up 400 pixels on your monitor no matter what the print size is. Because we are discussing images for the web we will ignore print size and only worry about pixel size.
Note: print size would be important if your images were intended to be downloaded and then printed by your site visitor.
A computer monitor has a certain number of pixels displayed depending on the resolution set on the monitor. For more info on monitor resolution see my previous article “Screen Resolution …”.
If your monitor has a horizontal resolution of 1024 pixels for example, a 250 pixel wide photo would display about one fourth the width of your monitor. That original photo of yours may be 3000 pixels wide. An image this size can be displayed on your website at 250 pixels wide by forcing the HTML to this display size. But the site visitor’s computer would still need to download a several megabyte file even though it is only displaying at 250 pixels wide. A properly resized photo file that is 250 pixels wide would only be about 40 kilobytes (One megabyte = 1,024 kilobytes, but for ease of calculation just think one megabyte is about one thousand kilobytes).
In gigshowcase.com’s Site Administrator you can resize files while uploading, but it is important to understand how this is done. The file has to completely upload to our server first, and then it is resized on our server. So if you have a 5 megabyte photo it may take a while to upload if you don’t have a fast internet connection. Uploading a 40 kilobyte file is almost instantaneous.
All right, this article was supposed to be about batch resizing. Let’s get to that now. So you have a folder with several photos you need to resize as thumbnails. Also, you would like to have larger images to view when you click on the thumbnail. What size do you make them? How high, or how wide? At times the width of the image is most important while at times the height is. A monitor has a certain width and you don’t want someone to have to scroll horizontally back and forth to see your web page. It is customary to have to scroll vertically though. In this case we want to resize our images to a specific width. Let’s say you have an area on your website that is 800 pixels wide where you want to display a row of thumbnails. If you wanted to display those 4 across and also have a little space between them, you could resize your photos to 185 pixels wide. Four photos at 185 pixels each would total 740 pixels. This would leave a 20 pixel space between the photos (3 spaces after the first 3 photos, the last would not need any).
Software Needed for Batch Resizing
In looking for software to batch resize I needed to have some specific features. I need to be able to select an entire folder of images, or select individual images to resize. There are many free software downloads that fit this need. I downloaded and tested several. BUT, to my amazement most all didn’t have what I consider an absolutely essential feature.
The typical size options I saw on these software was the following. One option was to resize by percentage. What percentage do you resize to get your photo to exactly 185 pixels wide? 12%, 16%? Who knows? The second option was to select an exact pixel size. Ahah! This should work. So I select that option and now it asks for two things. Enter a width and enter a height. But wait! I have 20 images in a folder of different sizes. But not only different widths, but different proportions. The resulting images cannot all have the same height if they are to keep the correct proportions. Even if you only use horizontal images, some may be long and narrow while others may be almost square. I want them all to be 185 pixels wide, but the heights will vary.
Now I know you may say that your camera’s photos are all in the proportion of .75 to 1. And maybe most of the time your images may all be the same proportion. But that is not always the case. You may have cropped some images or taken photos of paintings or other artwork that have all different proportions. Why use software that only works with photos with the same proportion?
Here is what you need. You need an option that allows you to enter an exact width and the height will be adjusted accordingly to maintain aspect ratio (proportion). Or do the opposite and enter an exact height and width will be adjusted accordingly.
After testing various software I ended up with the same one I had been using for a few years. I thought maybe something else that came out might be better, so I thought I should check before I wrote about it. But this software has great reviews, it does what I need, and it’s free. It is called FastStone Photo Resizer. The website is http://www.faststone.org/FSResizerDetail.htm. I don’t have anything to do with them, I just like their software. There is one caveat though. It is a Windows program only. I certainly don’t intend any disrespect to Mac users as our Gigshowcase.com product fully supports Mac. It is just that the FastStone Photo Resizer really worked for me.
Note for Mac users: There is a google software called Picaso (http://picasa.google.com) that works on a Mac. It doesn’t have the “keep proportional” feature I mentioned above, but if all your images are the same proportion then it does the job. Here is an article on batch resizing with Picaso - http://graphicssoft.about.com/od/picasa/ss/resizemultiples.htm.
Real Life Example
We recently designed a website for Victoria Cycles (www.victoriacycles.com), a custom builder of high end classic bicycle frames. Dave needed to show photos of his completed frames/bikes for prospective customers to see. He has one row of 4 thumbnail photos for each bike that open enlargements when you click on them. I created a YouTube video showing how I used FastStone Photo Resizer to batch resize a row of bikes. I took the 4 original photos of a bike from his camera and resized one batch to thumbnail size and one batch to enlargement size. I then repeated this procedure for each row of bikes. I could have resized all of the thumbnails at once, but it is easier to keep them organized by doing each row separately. It was only a few clicks more to do it this way.
One more side note: I see some websites that show enlargements when you mouse-over them. In my opinion it this is not the best way to show enlargements. One way to show enlargements by mouse-over is to preload all the enlargements at the time the page is loaded. That means loading several large images which really slows down page loading. When the page is finally loaded the mouse-over is instant at that time at least. The other way to show enlargements by mouse-over is to have the image start loading after you mouse-over. This causes an annoying and confusing delay. I prefer to have the enlargement load in a separate browser window just large enough to show the image in the center of the screen. Even though there is still a slight delay in opening it is more obvious why there is a delay. Also, the original page only has to load the thumbnails. Gigshowcase.com has an automated feature so that when you click a thumbnail the window that loads automatically calculates the size of the image and is only as large as the image and doesn’t have toolbars. You can see that in Frames/Bikes area of the Victoria Cycles website.
Here is the YouTube video showing how I resized the Victoria Cycles photos using FastStone Photo Resizer:
Conclusion
This article was specifically on resizing multiple images at one time. For image editing and/or resizing one or a few images a good graphics program is all you need. One of the classic graphics program is Photoshop, but it is pretty pricey. There is a free open source software called Gimp (www.gimp.org). It does just about everything Photoshop does but it is free. Because it is capable of doing so much, Gimp does have a learning curve to overcome. Once you learn the basics it is an incredibly useful program.
Note: I have no affiliation with Fastzone or Gimp, I just really like these software.
Please feel free to comment on your favorite tools for either image editing or batch resizing.
Websites for the software
FastStone Photo Resizer: www.faststone.org/FSResizerDetail.htm
Gimp: www.gimp.org
No comments:
Post a Comment