Using Images from the Image Library in SiteBuilder
Homestead offers a large selection of stock photography for use in websites. The problem is that quite often the photos/images are too large both in size and weight to use on a web page. The following guidelines will show you the steps to take to optimize those images.
Click on the Add an Imported Image icon in the tool bar.
Click Image Library under Import New File From:
In the window that opens enter the search term for the type of photo you want. You can search by subject or color or combinations. Be creative. For this tutorial we want something pink. Typing pink in the Search box yielded 185 different photos with pink in them.
The photo I selected was quite large. In many cases when you select a photo you will get this window:
Selecting Optimize Image will reduce the graphic weight to a certain extent (usually not enough) and does not reduce the photo size.
Selecting Cancel will open the graphic on the page in its full size and original weight.
For this tutorial photo/graphic size or dimension refers to the width x height of the image.
Photo or graphic weight refers to the number of bytes or kilobytes of the image (resolution).
Once the photo is open on your edit page you can check its properties by going to preview mode, right click on the image, choose Properties from the window that opens. This tells the Size - bytes and the Dimension - width x length in pixels of the image.
The pink picture that was chosen for the tutorial was a whopping 115915 bytes (approximately113 kb) and 513 w x 768 h. Obviously this won't work. There are a couple of options to make the overall image suitable for a web page.
1. Again in Preview mode right click on the image and chose Save As. Save it where you will be able to locate it and you can then use a photo editing program to reduce the size, crop it, add a shadow, etc.
2. To optimize the image in SiteBuilder, click on it to select it, then use either the handles and drag to reduce the size or set the width and height you want in the Properties Editor. Once you have reduced the photo dimensions click on the Optimize option in the upper toolbar. This will drastically reduce the weight of the image.
Resize the dimensions of an image using the 'handles'
Original picture dimensions were 513 x 768
Weight was 115915 bytes (approx. 113kb)
Choosing Optimize reduced the weight to 85058 bytes (approx. 83kb) but didn't reduce the dimensions.
By reducing the dimensions as per above and then optimizing, the photo is now 8271 bytes (approx 8kb) and is 164 x 247
Tutorial Submitted by :: sj enterprises
Copyright 2006 - Homestead Connection - All Rights Reserved
Homestead Website Design and SEO - S&J Enterprises
Use the internal search feature to the right or the site map for easy access to information.
 | ||||
