Are your images killing your website?

Is your website a little sluggish? Do you notice that images take a long time to load? There are a lot of reasons a website can load slowly, but one of the easiest to fix is properly resizing images for web viewing.

What is the difference in sizes?

Sure, your camera can produce digital images that print beautiful 4×6 prints, but do you need all of that image information when you are showing that same image online? No. Your camera resolution refers to the number of pixels in an image. For example, an image that is 2048 pixels wide and 1536 pixels high contains 3,145,728 pixels, which is the same as saying 3.1 megapixels. And that size looks great when printed 4 inches x 6 inches, because your photo printer will most likely print out at 300 pixels per inch, which means the perfect image size is 1800 pixels by 1200 pixels. A computer monitor only uses 72 pixels per inch, so that same 3.1 megapixel image shows at (approximately, depending on monitor settings) 28 inches x 21 inches, which is most likely way too large for web viewing. So how can you take your original image and resize it to efficiently show on your website, but not lose any image quality? You’ll need to resize it.

Resizing Your Images

The first thing you will need to find out is the size you want it to be. Most image resizers will show you a preview of the new size, so you can get a good idea of your final size before you create the new image. If you already have an image in place on your site, you can usually right-click on the image and click “Properties” and it will show the image size. Different browsers have different ways of showing this information: some will say “Inspect Element” or “View Media Info”, but all should give you the final size of your image.

Once you have your correct final size written down, you can resize your image. If you have programs such as Adobe Photoshop, Google Picasa, or iPhoto available, you can use them to resize images easily. If not, here are a few online resizers you can try out:

http://www.picresize.com – will let you rotate and add simple effects to your photo
http://www.shrinkpictures.com – a little more limited, but very straightforward
http://www.resizr.com – will let you resize photos already online or from Facebook

Once you have your new resized images, replace your original image from the website using FTP or other uploading software (check with your webmaster for more details).

An Easier Way

Some newer websites that use content management systems (such as the ones we create) will take care of the resizing as you upload the image to your website. This can be a huge convenience, as you rarely have to think about the image size – just take your photos and throw them on the site and let the software do the work for you. After all, that is what technology is for, right?

Resizing your images to the correct size for your website helps give your site viewers a better experience and will help them focus on your site’s content, instead on it’s loading speed.

Comments are closed.