SiteSpinner Pro Tutorials: Images on Web Pages

Adding Images to Your Pages

See first: Introduction to Images. In this tutorial, we cover the following topics:

Loading an image
Re-rendering an image
Image formats
Creating thumbnails (small images)
Popup images
Rotating and skewing an image
Adding transparency to an image
PNG 32 image format
HTML Code Rectangles
Blend Edges
Importing images with transparency
Contrast, brightness and color adjustment
Anti-aliasing (smoothing) images
Watermarks
Images embedded in text

Loading an image

SiteSpinner supports several image file formats including PNG, JPG, GIF and BMP. To use an image on your page, select the Mona Lisa button on the Tools (left) toolbar, or select the Image command in the Object menu. This will open the standard File Open Dialog. Navigate to the folder that holds the image you wish to use, select it and click Open. The image will be displayed at its full size in the center of your screen.

Let's do an actual example:

Select the Mona Lisa button or press Ctrl+I to start the File Open Dialog
Navigate to the /ClipArt/ directory where you installed SiteSpinner
Select the file "Arrowside-1.gif". You should see a red arrow in the preview pane. Click Open to load the image
The arrow will be positioned at the center of the workpage. Use your mouse to move the arrow to any location on the screen. If you wish, you can also stretch the image on the X and Y axes with your mouse. (Drag an edge.)

Re-rendering an image
SiteSpinner can either use the original image that you have just loaded or it can re-render it (create a new image file) to provide numerous additional features. When you re-render an image, you can do the following:

Generate a thumbnail (small copy) of the image
Skew, rotate and stretch the image
Add transparency to the image (let the background show through)
Change the contrast, brightness and color
Anti-alias (smooth) a rotated or skewed image

PNG is the default setting. It is actually PNG 24 which means that it provides 24-bit color in three color channels, Red, Blue and Green with each having 256 levels of brightness. It gives good results for all image types, but can result in large image file sizes -- particularly for photos.

PNG 8 operates on a palette restricted to 256 discrete colors -- which can be any of the PNG colors. It usually gives the best results for the smallest file size. We used PNG 8 for many of the images in these tutorials. If in preview, you see color banding like that just showing below, that is an indication that you need more than 256 colors -- select another format.

PNG 32 supports 256 levels of transparency. Because the file size of PNG 32 is larger than for the other PNG types. We suggest you don't set that format as your project default. Rather, set PNG 8 or PNG as the project default and use the Geometry Editor > Options tab settings to change the format for particular images. PNG 32 example.

GIF is an older image format, again 256 colors, comparable to PNG 8. Generally, PNG 8 is superior, but there are some types of image, particularly small ones with just a few colors, where GIF will give a smaller file size. GIF is the only image format that supports animation.

JPG format is best for photos, but also gives good results for other images involving text and lines at higher quality settings. If you reduce the quality setting too much. your image will take on a spotty appearance around the edges. We did the example Title on the left at 20% quality -- too low.

BMP Don't use BMP format without special reason. It gives excellent results, but with a very large file size.

Use Picture's Format. Where you are creating, say, thumbnails from source images, the thumbnails will be the same types as the source. If your photos are JPG, the thumbnails will be JPG. If your other source images are GIF, your processed images will also be GIF. We suggest you check this box.

Include Background. For non-transparent images it can be useful to include
the background in a re-rendered image.

Blend Edges. Demonstrated in Blend Edges

Size (JPG only) This is also an image quality reduction. Reducing the quality of the JPG image will reduce the file size of the image -- always desirable on a web page. Reduce this setting to a point just enough to keep your image quality acceptable. At this point the image file size will be as small as you can reasonably make it.

Apply to all Objects
Click this button to have SiteSpinner apply the current image format to all objects that already exist in your project.

Overriding for individual images
To change an individual re-rendered image from the default set here:

select the object
select the Geometry Editor > Options tab > Rendering File Format. There you will find the same settings overriding the Project Options settings for that one image.

Creating thumbnails (small images)

A thumbnail is scaled down version of a larger image. The idea behind this is that the thumbnails, being small, will load a lot more quickly than the larger images. The intention is to download the large images only to those visitors who click on the thumbnails. So the page is faster for everybody else.

Here's how to make a thumbnail from a full-sized image:

If the Quick Editor is not visible, click the Quick Editor button on the tools toolbar to the left (or press Ctrl+Q)
Select the the arrow that you loaded earlier by clicking on it
Select the Object tab of the Quick Editor. Make sure that Re-Render is checked - this will cause the new image file to hold the image at whatever size you change it to
Scale the image smaller by dragging the edges
If you hold the Ctrl key as you drag, the image will keep its proportions
If you have difficulty dragging to the exact size you want, turn Snap Grid off
You can also enter new scale values into the Quick Editor.

To create a link from the thumbnail to the original image, go to the Quick Editor > Link tab. Check the Pop-up full sized image check box. The image above shows this. There is a similar option on the right-click context menu.

Now preview and click the thumbnail image. The original image will open in a new popup window. If you use the Gather option when you publish, the original image will be uploaded to your site automatically (along with the thumbnail which will be uploaded anyway).

When you are using a series of images for a gallery, you can select multiple images from the File Open Dialog by using the the Shift and Ctrl keys:

Select the first image of a group, then select the last image of a group while holding down the Shift key. All the intervening files will be selected too.
Hold down Ctrl while you click on another file -- it will be added to your selections

With the full-size images stacked on your workpage, select all of them with a marquee selection. Now you can scale all at once by dragging, or by entering scale values into the Quick Editor > Object tab.

JPG format is by far the best choice for photos. Likewise, thumbnails of photos also work best in JPG format. By contrast, line drawings and text may well be better in PNG or GIF. Set up the project image formats to take care of your most common re-rendered image.

See also: Tables for photo galleries.

Rotating and skewing an image

The Manipulation tutorial discusses rotating. Here, we look at other ways to rotate -- but first a little preparation:

Select the Objects layout tab if in Dual Layout mode, or the Desktop tab if in Single Layout mode
Click on the red arrow to select it ready for rotation or skew.
Here we go ...

Rotate an image

Rotate the arrow to any angle by holding the Ctrl key down on your keyboard and pressing the Up or Down arrows. This gives a very fine adjustment -- notice the actual angle shows on the status bar at the bottom of your workpage. For a complex image, this can be very sluggish
Enter an angle directly into the Rotate box in the Quick Editor > Object tab
Use the Up/Down arrows next to the Rotate box
Don't forget the Rotate and skew tool

Skew an image

Use the Skew arrows in the Quick Editor to skew the red arrow on the horizontal and vertical axes
Enter numbers into the Skew boxes
Return the Skew values to zero
Use the rotate and skew tool. Identify the skew handles and skew the arrow by dragging
If you have difficulty dragging to the exact skew you want, turn Snap Grid off
Use the Reset Button in the Quick Editor to restore the arrow to its original state.

Adding transparency to an image

You can make an image appear transparent by adding shading. It is not really transparent -- it is just the background as at preview or publish showing through. Try this test:

Select the picture of the leaves at the left and copy it
Open the Quick Editor > Shading tab
Use the Transparency slider (Trans.) to adjust the transparency of the copied image
In the Geometry Editor > Options tab, set Render Background on.

Don't place a "transparent" object over a text object since it can produce misalignments when publishing -- you can't guarantee the exact location where text, after the first character, will appear on your published page. Title objects are OK, creating fixed image files, but in text objects, text size and font are very much under the control of your visitor's browser.

PNG 32 image format is the one exception to all this -- you can use it anywhere -- covered further below.

The two images on the left are clones of each other, in PNG format, and use the same image file. One is placed on top of the text, and looks fine on the workpage although in preview or published form the misalignment may be showing -- depending on your browser. The one in the margin is an exact replica of the one in the text. In preview, you can drag both of those "transparent" objects with your mouse, and confirm that the transparency is faked -- they are "transparent" only while in a particular place.

SiteSpinner supports four image formats that can be truly transparent:

GIF: When it saves a GIF image, it saves the background color, one single color, as transparent -- it does this automatically
PNG 8: When it saves a PNG 8 image with Render Background off (Geometry Editor > Options tab), it also saves the background color, one single color, as transparent
PNG: Really PNG 24 -- 24-bit color; works the same as PNG 8
PNG 32: This uses a fourth color channel, similar to the normal Red, Blue and Green, that gives varying levels of transparency from fully transparent to fully opaque.

Below are some examples of fully transparent rectangles. The last one, JPG, is not transparent, but we include that for comparison. In preview, drag them with your mouse to confirm the transparency, or lack of it:

GIF PNG 8 PNG PNG 32 JPG

These have a two-pixel non-transparent border, just so you can see where they are. You can easily remove the borders via the Quick Editor > Outline tab > and setting the Thick(ness) to 0.

Another interesting property of these rectangles is that they can carry a Link or an "alt tag" -- called a "Title" in the link editor. We have added titles to the rectangles here. These rectangles can be useful when making buttons -- you can have an invisible layer on top of a button that carries the link. Or maybe make a secret door to another page -- there's one near here on this page -- can you find it?

PNG 32 image format
PNG 32 supports 256 levels of transparency. We showed a PNG 32 rectangle above with a fully transparent body. Here is another using the graduations of transparency. It looks similar to the transparencies just above, but the big difference is when the image shifts over its background. In preview, try dragging the image.

HTML Code Rectangles

There is another category of transparent rectangle that your browser can build entirely out of HTML code. This means compared to other rectangles, no image file is required. To make such rectangles, use the Quick Editor > Object tab to set Anti-Alias and Re-render both off. This forces SiteSpinner, if it can, to do without an image file.

However the disadvantages of code rectangles are:

They can't carry links or Titles
If you drag them over other objects, the browser will tend to select those objects. In preview, try the rectangle on the right
Browsers vary in how they place the borders -- some place them inside the rectangle and others outside. For these reasons, they are not suitable if you want an exact-sized rectangle -- for that you need an image file, or a borderless rectangle
Therefore SiteSpinner won't allow borders of more than two pixels -- if you try, it will produce a rendered rectangle (image file).

Blend Edges

Transparency does not always give perfect results. When you specify anti-alias, and also no background, SiteSpinner anti-aliases the image against the page background color which is usually white. Under these conditions, may see a white halo around the image when you place it against a new darker background.

Sometimes you may like this effect, but if you don't, try the Blend Edges option in the Geometry Editor > Options tab. SiteSpinner will then anti-alias the edge against the actual background of the image as it appears on your workpage.

In preview for the images below, this change has an obvious effect where the white halo on the left-hand rectangle without Blended Edges is missing from the right-hand rectangle.

Examine the three buttons: Contrast (Cnt), Brightness (Brt) and Lock (Lock). Click each and note that each has two states. When the button is in the lighter state it is unselected. In the darker state, it is selected
Unselect (lighter state) the Lock (Lock) button if it is selected
Select the Contrast (Cnt) button (darker state)
Use the RGB sliders to adjust the contrast of the Red, Green and Blue components. Levels from -127 0 to 0 will reduce the contrast. Levels from 0 to 127 will increase the contrast
Select the Brightness (Brt) button and use the RGB sliders to adjust the brightness of the Red, Green and Blue components. Levels from -127 to 0 will make it darker. Levels from 0 to 127 will make it brighter
Select the Lock (Lock) button and notice how all three sliders move together when you move any one
Close the Quick Editor

If you don't see the changes applying to your workpage, in the Quick Editor > Object tab, check the checkbox High Render work window. (This setting does not affect your previewed or published page.)

Changes are applied only to a re-rendered version of the image. The original image is not affected.

Anti-aliasing (smoothing) images

A rotated or skewed image may display significant aliasing (jagged edges) depending upon the angle you rotate it to. Minimize this by enabling Anti-Alias. You can see the effect of anti-aliasing in the workpage if the High Render option is enabled, but this may cause screen updates to appear sluggish with a complex project or a slow computer. Anti-aliasing cannot repair an image that already displays aliasing.

Select the leaves (again!)
Use the Quick Editor or keyboard to rotate the image to about 10 degrees
Check the Anti-Alias box in the Quick Editor > Object tab
Toggle the High Render box on and off the see the effect of anti-aliasing
Rotate the image with the High Render option on and off to see the effects of anti-aliasing at different angles
Try the same tests with the arrow

Our code assumes the image is the image folder of your site. If instead you will put the image in your root folder of your site, you can simplify the code to this:
<img src='smile.gif' alt='smile'>

In order for this to work in preview, you need the image to be in your preview folder, or in an image folder of your preview folder. See Adding Files to the preview folder.

To get the image into your publish folder, you could use an embedded object via Embed File or Media. The way we did it though was to include the image once somewhere in the project as a regular image -- see left. This puts it into the normal /image folder on your site, where the special code can also access it.

The other way is to use a separate FTP program to do the copy.