Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
bandwidth
bandwidth
bandwidth
This page is about scaling or stretching images to reduce image file size. Also there is a section about tiling images, another way to save image space. On this page:
Scaling images down or up
Where you have multiple copies of the same image appearing at various places on your site at different sizes, you can arrange to download only one image (the largest) and have the browser take care of making the smaller images.
It is not a good idea to start with a small image and expand it, as your large image will lose quality -- unless that is the effect you are looking for.
- Scaling images down or up
- Transparent gifs and image maps
- Stretching gradient fills
- Tiling background images
- Tiling foreground images
Scaling images down or up
Where you have multiple copies of the same image appearing at various places on your site at different sizes, you can arrange to download only one image (the largest) and have the browser take care of making the smaller images.
It is not a good idea to start with a small image and expand it, as your large image will lose quality -- unless that is the effect you are looking for.
The large image here is always loaded. If you also want smaller images on this or other pages, you don't need smaller copies of the same image. Instead, you can scale down the larger image using HTML.
As there is only one image to download, and it may have earlier been downloaded for another page, your page will load faster.
As there is only one image to download, and it may have earlier been downloaded for another page, your page will load faster.
This large image (18K) is always downloaded
To set up the base image, on your SiteSpinner work page, click on the Mona Lisa icon and select the image file to display. This is what I did for the image above.
To make a smaller version of the same image:
To make a smaller version of the same image:
- Make a copy of the first image
- Drag the edges of the copy to make it smaller
- In the Quick Editor, make sure you have re-render turned off.
In this way, the smaller images are all regenerated by your browser from the large image. If you use re-render, SiteSpinner will actually generate the extra images. When you publish your project, these extra images will be included as image files in your published project. Not what you want if you are trying to save bandwidth!
The next group of images are all scaled down from the larger one.
The next group of images are all scaled down from the larger one.
To show how the quality deteriorates if you expand an image, here's an expansion of my starting image. I don't recommend this for normal use.
The only saving grace of an image like this which is scaled up from an existing image is that it is fast.
Transparent gifs and image maps
Suppose you want an image with a number of links superimposed, each link pointing to a different page or perhaps a bookmark. This is called an 'image map', There is a simple, contrived example just above -- the large image has four independent links, each pointing back to this paragraph. Hover over each quadrant with the mouse and notice that each shows a different message in the little popup.
You could make your image as a number of rectangles and butt them all together -- and that would work. You can create these rectangles easily in SiteSpinner by placing the smaller rectangles on top of the large image and rendering the background of each. (Geometry Editor > Options tab). Each would have a normal link to wherever you want to go.
You can be more devious than that. Start again with a large one-piece image and place a number of transparent gifs on top:
SiteSpinner is smart enough to not make an image file until it is actually needed. So only when you put a link on the rectangle, does that force an image file.
This image will be completely transparent -- you can place it over any part of your base image and it will remain invisible. Any link you place on it will work like a regular link.
The link hot-spot will remain rectangular, even if you use a circle object
This generates one image file for each rectangle. They have very little content, so the file size should be quite small for even a big rectangle. If you want to go one better than this, and I would,
you can do it all with one small rectangle that you stretch to the size you require. Here's how:
First make your rectangle transparent as above, say 10 pixels x 10 pixels. Drag the image from your preview page back into the workpage. Save your project now you will save the image as an image file, not as an object. SiteSpinner will ask what file name to save the image as -- I suggest use something like "SeedTransp.gif".
You now have a regular image you can use via the Mona Lisa icon. When you use it:
You can have as many of these as you want and all are based on one small seed image.
This works fine for rectangular hot spots. If you want irregular shaped hot spots or circles, consider a real image map . Also very economical in terns of bandwidth, but sorry, code involved
Suppose you want an image with a number of links superimposed, each link pointing to a different page or perhaps a bookmark. This is called an 'image map', There is a simple, contrived example just above -- the large image has four independent links, each pointing back to this paragraph. Hover over each quadrant with the mouse and notice that each shows a different message in the little popup.
You could make your image as a number of rectangles and butt them all together -- and that would work. You can create these rectangles easily in SiteSpinner by placing the smaller rectangles on top of the large image and rendering the background of each. (Geometry Editor > Options tab). Each would have a normal link to wherever you want to go.
You can be more devious than that. Start again with a large one-piece image and place a number of transparent gifs on top:
- Make the rectangle as a gif (or png8). Set the file rendering format in the Geometry Editor > Options tab.
- Use no shading and no border
SiteSpinner is smart enough to not make an image file until it is actually needed. So only when you put a link on the rectangle, does that force an image file.
This image will be completely transparent -- you can place it over any part of your base image and it will remain invisible. Any link you place on it will work like a regular link.
The link hot-spot will remain rectangular, even if you use a circle object
This generates one image file for each rectangle. They have very little content, so the file size should be quite small for even a big rectangle. If you want to go one better than this, and I would,
you can do it all with one small rectangle that you stretch to the size you require. Here's how:First make your rectangle transparent as above, say 10 pixels x 10 pixels. Drag the image from your preview page back into the workpage. Save your project now you will save the image as an image file, not as an object. SiteSpinner will ask what file name to save the image as -- I suggest use something like "SeedTransp.gif".
You now have a regular image you can use via the Mona Lisa icon. When you use it:
- Set anti-alias off and re-render off
- Stretch it to the size you want
- Place the link on it
You can have as many of these as you want and all are based on one small seed image.
This works fine for rectangular hot spots. If you want irregular shaped hot spots or circles, consider a real image map . Also very economical in terns of bandwidth, but sorry, code involved
If you want to avoid this step, here is my seed at the center of this rectangle. Just drag it from there to your workpage. Or right click and save the image to your disk in the usual way. Only 49 bytes -- not many images smaller that this!
Stretching gradient fills
SiteSpinner has the ability to make colored rectangles like the one just above. Notice that the graduation is even from top to bottom, but there is no graduation from left to right. This means you can start off with a small seed image, and stretch it horizontally. This need not create an extra image file. Heres how:
SiteSpinner has the ability to make colored rectangles like the one just above. Notice that the graduation is even from top to bottom, but there is no graduation from left to right. This means you can start off with a small seed image, and stretch it horizontally. This need not create an extra image file. Heres how:
Original rectangle object -- gradient fill, 270 degrees rotation
Preview the project, then drag the image from the preview page back onto your workpage. This is an easy way to get at the image file that SiteSpinner creates. Then save your project, and SiteSpinner will prompt you for a name for the image. Give it one like GradientSeed.png.
The image looks perfectly fine -- but not so fast!. Look what happens to it when you place it on a dark background. (Top image). There is a visible margin to the top and left. So the next step is to load the image into your favorite image editor and crop off the margins. I suggest crop at least 2 pixels off the left-hand edge. As well as the one-pixel margin, in this example, the second pixel in showed a slightly different color to the rest. This showed as a band when I stretched. So I'd take about a 10 pixel slice out of the middle, and use that as my seed image. (bottom image)
Now you can make a copy of your seed image, and stretch away. To avoid creating an image file, make sure you set anti-alias off and re-render off. You don't gain much by going for an excessively small image -- my original image is 233 bytes, the sliver is down to 188 bytes.
Don't try to stretch an image like this vertically, unless this banding effect is the one you want. Again this image and the one above are based on my 188 byte sliver.
You can do a similar kind of stretching with vertical lines. All these lines are stretched versions of the small one on the left. The seed image this time is only 94 bytes. Again to avoid creating image files, make sure you set anti-alias off and re-render off.
Tiling background images
A tiled image is just like a tile in a bathroom, a small pattern repeated across and down the whole area. Using a tiled background is an economical way to fill your whole screen with a repeating image. Below are some small images designed to be tiled -- with matching opposite edges . Click on any of the images below and the whole page background should tile.
A tiled image is just like a tile in a bathroom, a small pattern repeated across and down the whole area. Using a tiled background is an economical way to fill your whole screen with a repeating image. Below are some small images designed to be tiled -- with matching opposite edges . Click on any of the images below and the whole page background should tile.
){kind=small}
){kind=small}
)
)
1138 bytes
1208 bytes
2087 bytes
3673 bytes
0 bytes
The above are just some of images from http://www.squidfingers.com/patterns/. Except the last -- I am the creative genius behind that 
. I had to use an actual white image there (103 bytes) -- because I wanted to place a javascript link to revert the screen to standard white. But I still show the size as 0 bytes -- because that is what it would cost you compared to the other images.
There are many other tile patterns available on the web. Here are two more examples that I quite like, but which suffer from an obvious disadvantage if placed behind raw text! Fortunately SiteSpinner allows you to modify the color and brightness settings of an image, and that is what I did to create the second two examples:
. I had to use an actual white image there (103 bytes) -- because I wanted to place a javascript link to revert the screen to standard white. But I still show the size as 0 bytes -- because that is what it would cost you compared to the other images. There are many other tile patterns available on the web. Here are two more examples that I quite like, but which suffer from an obvious disadvantage if placed behind raw text! Fortunately SiteSpinner allows you to modify the color and brightness settings of an image, and that is what I did to create the second two examples:
)
)
6324 bytes
5179 bytes
1170 bytes
1279 bytes
When you are using SiteSpinner to make the images, it puts an extra, often white, line at the top of the image. This is what is responsible for the horizontal white lines you see when you use the last two faded images above as backgrounds. This will be a problem for tiled images, so you will need to crop it off with your favorite image editor.
If you don't mind messing with CSS, you can tile a background only in the x direction or only in the y direction. More on this in the future...
If you don't mind messing with CSS, you can tile a background only in the x direction or only in the y direction. More on this in the future...
)
)