Get the Free Image and Photo Resizer Software Download for Webmasters: New or Experienced!
Original photos are almost always never the right size for web sites. They usually take too long to show up on a browser because it takes time for a large file to download. Also, they’re usually too big to fit on a page; and in most cases, when you resize these photos, whoever or whatever were in them becomes too small.
It’s hard enough to learn to code a web page. It would be very frustrating for a budding webmaster to spend zillions of hours learning technical details of image processing. It’s just very fortunate that one of today’s programs bundle the most important image processing features into a single, very affordable program. We are featuring Bulk Photo Resizer in this article (it’s free to try out). We’ll explain the key things like file sizes, compression, photo resizing, and cropping. After reading this article, you’ll be able to put images into your web page effortlessly.
Whatever the source of your photos is, you’ll need to make sure they are of right dimensions and file sizes for your web site. Dimensions mean the size of the image that you see on the display. File size refers to amount of storage space the picture takes up or how much data the picture contains. The larger the file size, the more amount of time it takes to download and appear on a visitor’s browser. Web surfers are very finicky, so you don’t want to have a site that takes too much time to bring up images. The more images there are, the longer it takes for them to load and the site to show completely.
The good news is that you can reduce the file size without giving up much image quality. This can be done through a process called compression. Bulk Photo Resizer makes this procedure painless to do.
But what should your photo’s dimensions be? You need to consider first, the screen size of the average monitor; some are larger or smaller, but most people have 800 pixels across. If a certain picture is really important to the site, then you would want to fill the main column of your page. If it is less important, than you may just fill half of the main column and have text flowing around it, or you can just place it in a narrower side column. Once you have decided on a page layout, you can now come up with the perfect dimensions of the images. For example, let’s say you have a single side column of 200 pixels and a main column of 600 pixels. For the largest, most important picture, you would limit the width to 600 pixels minus whatever margin you have (padding) around the picture, so it doesn’t sit flush against the sides of the column. Unless your site really requires a lot of large pictures, you don’t want to have more than one. For the side column, you would want to limit the picture to 200 pixels minus your padding around the picture.
With Bulk Photo Resizer, you simply click on Resize and select custom size to get the exact width you desire. You only have to set the width and Bulk Photo Resizer will make sure the height is exactly the right proportion to prevent any unsightly stretching of your image. Maintaining everything in the right shape is called “preserving the aspect ratio.”
If you are able to create high-resolution photos or have purchased stock photos, then you have no problem making a good impression. If an image’s resolution is not so good, then you can try making it a smaller size so that the low image quality would not be so noticeable. Be sure to get to know your camera if you are doing your own photography. You can adjust the resolution or image quality to a higher level if you want to. This will eat up more camera memory, but it is the recommended setting for the really important or detailed shots.
After you have decided on the size of the image, something you’ll want to do before you resize it is to crop it. You’ll want to do this with most of your photos. When you crop an image, you’re trimming away its outer areas in order to feature the important objects or people in the photo. Bulk Photo Resizer, our featured program, makes this very easy. If the results don’t impress you, you can discard the changes you have done and try again. You can use Bulk Photo Resizer for one picture at a time, or on hundreds of photos all at once. Our testers reported that it was nearly impossible to make mistakes.
There’s actually one mistake you don’t want to make – not saving a backup of the original image. Make sure to save the image you are resizing under a different file name when you’re making a major change. This way, if you decide you don’t like it, you can start over with the original image. What I do is add an underscore, then a number for a major version, then a letter for the smaller changes. The file name of the first change would end in “_1b.jpg,” for example. I also like to add something to remind me what I did if the project is likely to get complicated, for example, “_1b_crop.jpg.” The good thing about 1b, 1c and so forth, is that it keeps the image versions in chronological order when they are sorted by name in Windows Explorer, the Windows built-in program you use to look at the directories and files on your hard drive and peripherals.
When saving a photo, you will need to know how much compression to use. You want to compress the image that will be going onto your website. If you’re just saving an image and plan to do more to it, then don’t use any compression. If an image has a file type of .jpg, then keep the compression setting at the lowest (meaning highest resolution). If the image is of .bmp file type, then it will not allow any compression unless you convert it to or save it as a .jpg.
A compressed photo takes up less space and downloads to browsers much faster. The problem with compression, though, is loss of quality. Too much compression can cause your photo to become pretty blotchy. Almost all the images you see on the web are compressed. The file type that is best for images with shades of color or gradients of light and dark is .jpg. The popular file type for solid color art such as typical clip art, especially if they use transparent areas to get a non-square shape is .gif; .jpg images can’t do this although it can be simulated by using the exact same background color as the spot they will be in. If you do this correctly, the background will blend in with the website.
If you are saving an image in its final form, then some compression is usually recommended. With Bulk Photo Resizer, compressing images is very easy. If you want compression to be not that obvious, use 80. Compression scale goes from zero to 100. 60 is a considerably high level of compression since the image starts to be noticeably blotchy at this setting. There should be no noticeable effect of compression at a setting of 90 or higher, although it will still reduce the file size a good bit.
Remember that other web sites, such as picture posting sites, social networking sites, and dating sites all have rules as to how many kilobytes a photo can be. If they say it must be less than 100 KB, then check the size of your photo in a program such as Photo Resizer to see if your photo needs to be compressed or made smaller. Either action, resizing down or compressing, will give you a smaller file size.
Before we proceed further, let me make sure you understand the difference between image size (dimensions) and file size (kilobytes) since this causes confusion to a lot of people. Image size, simply defined, is how big your photo looks while file size is how much space it takes up on your hard drive. Larger file sizes take more time to be displayed on a browser since the greater the file size, the more time it needs to be downloaded.
After cropping your photo, you are now ready to resize. Enlarging a photo is not a good idea. One of Bulk Photo Resizer’s features is that it prevents this to be done. The reason for this is that when digital pictures are enlarged, the images start to get jagged edges (also called “jaggies”). Pixels are those little squares that make up the image. When these pixels get too big, the effect is similar to the one used on TV to obscure someone’s face or license plate. This effect is called pixelation. I’m sure you’ve seen pixelated images on the net; and it looks pretty inexpert.
I’m sure you already have a hint that cropping an image gives you smaller dimensions. Bulk Image Resizer has tabs which will let you know the exact dimensions of the photo.
The internet is full of excellent resources to help you give your web pages the right structure, as well as how to position things like photos on your page. Here are a couple tips to get you started. An example of an image tag is as follows:
That command, in layman’s terms, stands for “The source of the image is ‘cousin_bill.jpg’ in the directory ‘images.’” You can also give a full address, such as “htttp://www.mywebsite.com/images/cousin_bill.jpg” if you want.
It is also recommended to give the dimensions in the tag, so that the web page will not jump around as the image is forming in the visitor’s browser. Following is an example: . We also added the “alt” tag which makes the text show up when you put the cursor over the image. This tag also helps blind people know what images are on the page when their screen reader programs are talking to them.
There’s plenty of other stuff you can learn about digital photos and putting them on your web site, however, we have covered what we believe are the most important things: cropping, resizing, compression, saving, and the image tag. We hope you have fun creating your web pages!
