Working with images. (Back to Help Page) (Print Page)
Images need to be of a small file size, to load quickly on your site.
Make a new folder (right click new folder) on your computer for your website photos, to keep them separate for your original images, and copy any photos you would like on your website to the new folder, ready to be resized.
The images to be used on your website are stored in your asset manager and displayed in your image directory, only delete images from your asset manager, if they are no longer required on your site.
Before uploading an image to your asset manager, it is important to make sure your image is a suitable size.
The best size for images on a website is about 400 pixels on the longest side of the image, for a normal image this would be the width, or if it is portrait shape image this would be the height. At this size the image will fit nicely on the page and be suitable for everyone to view, no matter what size screen or setting they are using to view your site with.
As well as the actual size of the image, we have to make sure the file size of the image is not to big. If you have an image file on your page that is 900KB + in size it will take many minutes for it to show if some one is trying to view site using a dial up connection, they will of gone elsewhere long before your image loads.
The best file size for your images is around 40- 100K this can be achieved using JPG compression 20% - 40% most image editing programs will be able to do this, check in the help files of the image editing program you use.
Images with a blank space in its file name, like Picture One.jpg will need to be renamed to PictureOne.jpg (Removing the blank space) before uploading or they may not display on your page.
Most image programs have a save for web option in their file menu, using this it will resize and compress the image in one go, you can usually select multiple images then use the save for web option, thus resizing them all at once. (remember to save them to a new folder if you wish to keep a copy of the original image full size)
If you have office, Microsoft Office picture manger can be use to resize your images, in the Picture menu, select compress picture, then select web pages.
Or you could try Picasa.
Picasa is a free image program from Google you can download it here: http://picasa.google.com follow the installation details provided. When you run Picasa for the first time (just the first time it runs) it will take a while for it to locate all your images, after this is done you can proceed below.
Getting your images the right size using Picasa.
On your desktop create a new folder (right click your desktop with your mouse, move your mouse pointer to new then folder and click.) name the folder web photos. You can now use this folder to store all the images you would like to use on your website.
Open Picasa, when you run Picasa for the first time (just the first time it runs) it will take a while for it to locate all your images, after this is done you can proceed.
All the images located on your computer can be found in the folders on the
left, find a folder that contains some images you would like to use on your
website, click on the folder. The images in that folder are now displayed. Click
on an image you would like to use (you can select multiple images by keeping
your finger on the ctrl key while clicking the images you would like to
use) With the images you would like to use selected, click on the Export
button at the bottom of the program. In the box that comes up, click on
Browse and browse to your desktop and click OK. In the field below put
web photos folder you have created.
The next option in the box is Image size options, select Resize to
and put 400 in the box (you wont have to add this every time just the
first time) The next option is Image quality move the slider to 80% or
90%, now you can click OK.
That's it, now all the images you selected are in your web photos folder, the right size, & right file size, for you to use on your website, you can then upload them to your asset manager to use on your site.