Get Your Images on Your Website!
The Free Download Image and Photo Resizer for Webmasters: New or Experienced!
Original photos are almost never the right size for your web site. They usually take too long to show up on the page, because it takes time for a large file to download. They're usually to big to fit on the page where they are supposed to. And when you resize the photo, whoever or whatever was in it becomes too small.
It's hard enough learning to code the page. The last thing a budding webmaster wants to do is spend zillions of hours learning technical details of image processing. Luckily for you, today's programs bundle the most important features into a single, very affordable program. We will feature Bulk Photo Resizer in this article (it's free to try out), and we'll explain the key things. We'll cover file sizes, compression, photo resizing, and cropping. Once we're done, you'll be able to put images into your web page.
No matter where you got your photos, you'll need to make sure they are the right dimensions and file sizes for your web site. Dimensions means the size of the picture that you see on the screen. File size refers to how much data the picture contains. The bigger the file size, the longer it takes to download and appear in the visitor's browser. Web surfers are a finicky lot, so you can't afford to have a site that takes much time to bring up its images. And the more images there are, the longer it takes for them to appear.
The good news is that you can shrink the file size without giving up much photo quality, by using compression. Bulk Photo Resizer makes it easy to do.
But how big should your photo dimensions be? Start with the screen size of the average monitor. Some are larger or smaller, but many are 800 pixels across. If your picture is really important to the site, then you might want to fill the main column of your page. If it is less important, than you might fill half of your main column and have text flowing around it, or you might place it in a narrower side column. Once you decide on your page layout, you can turn that into real numbers. 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, that would limit you 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 it is very important to your site, you don't want to have more than one large picture. For a side column, you would limit the picture to 200 pixels, minus your padding around the picture.
Using Bulk Photo Resizer, you can click on Resize and then select custom size to get the exact width you desire. Just set the width, and Bulk Photo Resizer will make sure the height is exactly the right proportion to prevent any stretching of your image. Keeping everything the right shape is called preserving the "aspect ratio.”
If you have purchased stock photos or are able to create high-resolution photos, then you'll have no problem making a good impression. If the resolution of a photo is not so good, then you might try making it a smaller size so that it is not so noticeable. If you are doing your own photography, be sure to get to know your camera. You can adjust the resolution to a higher level if you need to. This will take up more of the camera memory, but it will be worth it for the really important or detailed shots.
Once you have decided on the size of the photo, there is something you'll want to do before you resize it. At least you'll want to do this with most photos. It's called cropping. When you crop your photo, you are trimming away the outer areas of the photo in order to feature the important objects or people in the photo. Our featured program, Bulk Photo Resizer, makes this very easy. If you don't like the result, you can discard the change and try again. You can use Bulk Photo Resizer for one picture at a time, or you can use it on hundreds of photos all at once. Our testers told us that it was nearly impossible to make mistakes.
I can think of one mistake you don't want to make. Be sure to save your photo with a different file name when you make a major change to it. This way, if you decide you don't like it, you can start over with the original image. I like to add an underscore, and then the number one for the major version, then a letter for the smaller changes. My first change would end in "_1b.jpg,” for example. I might even add something to remind me what I did, if the project is likely to get complicated. For example, "_1b_crop.jpg.” The nice 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 program you use to look at the directories and files on your hard drive and peripherals.
When you save the photo, you will need to know how much compression to use. At least you will want to compress it when you produce the image that will be going onto your website. If you are just saving the image but with plans to do more to it, then don't add any compression. If it is a .jpg, then keep the compression setting at the highest (meaning highest resolution). If the image is a .bmp, then it will not compress until you save it as a .jpg.
A compressed photo takes up less space, and it downloads to your visitor's browser faster. The problem with compression, though, is that you lose quality. If you do too much, then your photo can become pretty blotchy. Nearly all the images you see on the web are compressed. The .jpg files are best for images with shades of color or gradiants of light and dark. The .gif files are popular for solid color art such as typical clip art, especially if they use transparent areas to get a non-square shape. The .jpg images can't do that. They can pretend to, though, by using the exact same background color as the spot they will be in. If you do it right, the background will blend in with the website.
If you are saving your photo in its final form, then you will want to use at least some compression. Bulk Photo Resizer makes compressing your photos quite easy. For compression that is not too obvious, use 80. The scale is zero to 100. 60 is a lot of compression, but the image starts to be noticeably blotchy. You probably won't be able to tell there's compression at a setting of 90 or higher, but 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.
Let me make sure you understand the difference between image size (dimensions) and file size (kilobytes. This confuses a lot of people. The image size is how big your photo looks, the file size is how much space it takes up on your hard drive. Bigger file sizes take longer to show up on a web page because the visitor is downloading them in their browser when they go to the page.
Now that you have cropped your photo, you are ready to resize. Be sure not to enlarge the photo. Bulk Photo Resizer will prevent this. The reason is that when people enlarge digital pictures, they start to get jagged edges, that we call the "jaggies.” I'm talking about the little squares that make up the image. When they get too big, they look like the effect used on TV to obscure someone's face or license plate. That is called pixelation. You've seen pixelated images on the net, and it looks pretty amateurish.
As you might have guessed, cropping the photo gives you smaller dimensions. Bulk Image Resizer keep tabs on this for you. You will know the exact dimensions of the photo.
The web is full of great 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, though, to get you started. The image tag looks like this: <img src=”images/cousin_bill.jpg”>
That stands for "The source of the image ‘cousin_bill.jpg' in the directory ‘images.'” You can give a full address, such as "htttp://www.mywebsite.com/images/cousin_bill.jpg.”
You should give the dimensions in this tag, so that the web page will not jump around as it is forming in the visitor's browser. Like so: <img src=”images/cousin_bill.jpg” height=”100” width=”192” alt=”Cousin Bill”> We also added the "alt” tag. That shows up when you put the cursor over the image. It also helps blind people know what pictures are on the page when their screen readers programs are talking to them.
Of course, there's plenty you can learn about digital photos and putting them on your web site, but we have covered the most important things: cropping, resizing, compression, saving, and the image tag. I hope you enjoy creating your web pages!
digital photos in seconds!
FREE UPDATES FOR LIFE