Website Image Quality - Good Shot !!

The quality of the images on your website is very important. Professional website builders know that there’s nothing worse than blurred, out of focus or pixilated images, especially if they’re the images of the products you’re trying to sell. Consumers commonly judge the quality of products they see online by the quality of the image portraying it. Can you imagine Marks & Spencers, one of the market leaders in high quality food and produce, promoting a new food range with a pixilated image? Or Land Rover, launching a new vehicle with a grainy, low resolution image. It just wouldn’t work but then it wouldn’t ever happen. Now I know you’re not M&S or Land Rover but the principle is still the same and you could well share some of their customers.

If you’re fortunate enough to have access to professional photography for your products, fantastic! These images will most like be available in a range of sizes and formats too, so you should have no problem uploading them to your website. And I bet they look great!

If you’re doing your own photography, you’ll need to edit your images using an Image Editing Programme prior to uploading them to your website. There are a number of programmes you can use but first, we’re going to look at Picasa, a great little programme provided FREE by Google, which comes highly recommended by us all at Reason8.  

First of all, your images need to be in the correct format. We take: .JPG, .GIF and .PNG. However if your picture is in the correct format and you’re still having problems then it may be that it’s simply far too large. If the image came straight from a digital camera, it could well be a couple of thousand pixels wide – way too big for the internet. Your website image library is designed to reduce images to a maximum of 400 pixels wide. (Web Safe size - A previous blog on this subject will explain the reasons fully). Not only will it take quite a while for the library system to resize your enormous image but it will most likely affect the quality too. This is why we always recommend resizing and compressing your images properly with an editing programme. You’ll keep the quality of your images and your web pages won’t take half an hour to load!


Just follow the instructions below and you will be able to upload images to your website in seconds. (please note however, that although the instructions here are accurate when this guide was written, we have no control over the Picasa system  and they may change their user interface)

1.       Go to the Picasa website and download their latest version.
2.       Once downloaded, open Picasa and Click: File > Add Folder To Picasa, then browse and select the folder on your computer where your images are stored.
3.       To select all the images in the folder, click to select one, then press the [Ctrl] key and Press A. To select certain images, hold down the [Ctrl] key and click all the images that you want to configure using your mouse.
4.       Once you have selected your images, click the export button at the bottom
Now lets do a simple reduce and compress.
Select the first image you want to edit. It will open in the main window of Picasa. At the bottom of this window you will see its current pixel size and file size (KB / MB). You need to reduce it to no more than 400 pixels.
To do this, Click the Export button at the bottom of the screen.


Location of exported folder

This is where the resized images will be saved. Picasa will automatically select the same folder the original image came from but you can select a different folder if you wish by browsing for it. Picasa also saves the edited images into a “Recently Updated” folder within your chosen folder, so you can easily find all your new images.

Image Size Options

Check the circle next to “Resize to” and enter the pixel size you want. Remember, it must be lower than 400. (Unless of course you are creating a larger image  for a Lightbox effect - see Blog). A good average size would be 350. From this size, you can fine tune the size without problems once you’ve uploaded it to your library if you need to.

Image Quality

 Automatic is the easiest option here, which preserves the original image quality.Now click ok and your new resized, compressed image is saved into your new folder.

Now login into your website. Go to the page (Step 3) or item (Step 4) you want the image to appear on and upload it. If everything has worked correctly, the image will load quite quickly and the quality will be good. Now fine tune the size and position etc and enjoy the knowledge that the images on your site are looking their best for your customers. We’ll look at some of the other things you can do to your images next time. 

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');