WebDwarf 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

WebDwarf 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 to start the File Open Dialog
Navigate to the /ClipArt/ directory where you installed WebDwarf
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
WebDwarf can either use the original image that you have just loaded or it can re-render it (create a new image file) to provide a number of 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 caution in using it, as you will set all images on the page to PNG 32. 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 WebDwarf apply the current image format to all objects that already exist in your project.

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 Alt 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.

Popup images

If you clicked the lake image above, you will have not seen a true popup -- an image in the center of the screen and in a window sized to match the image. And a window that closes automatically when you click something else. The best we can do in WebDwarf is to open the image in a new window, which is what we did above. In this section we describe how to produce that effect.

To create a link from the thumbnail to the original image, go to the Quick Editor > Link tab. Check the Open in a new window check box. The image above shows this.

To preview, you will first need to copy the image to your WebDwarf preview folder -- if you follow the example above, it will be need to be in the image folder that you create in the preview folder. For details, see the Adding files to the preview folder. Now preview and click the thumbnail image. The larger image should open in a new window.

Unfortunately WebDwarf will not gather the larger image when you publish. You can instead use an external FTP program to do that upload -- to the image folder of your site in this example. Or, use the built-in Windows FTP.

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 will be better in PNG or GIF. Set up the project image formats to take care of your most common re-rendered image format.

Rotating and skewing an image

The Manipulation tutorial discusses rotating. Here are some other ways you can rotate:

Rotate an image

Click the red arrow to select it
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

And of course, you can rotate and skew via the drag handles which appear when you select the object.

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
Identify the skew handles on the arrow and skew it 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 page background color mixed with the image colors. Try this test:

Select your image
Open the Quick Editor > Shading tab

Use the Transparency slider (Trans.) to adjust the transparency of the copied image.

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 WebDwarf, 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. Try the code rectangle just above
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 WebDwarf 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, WebDwarf 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 Options > Project Options (for GIF image format only). WebDwarf will then anti-alias the edge against the actual background of the image as it appears on your workpage.

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 your image (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, include it once somewhere in your 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.

You will see the white color of the background mixed with the image. If your page background was some other solid color, that will be mixed with the image colors.

If you want the actual background to show through, in Options > Project Options, set Include Background to on.This can be a mixed blessing, as it affects all images on the page, and you need to exercise caution as to what kind of background you allow -- as the next example shows.

Don't place an "include background" 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 as backgrounds 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.

WebDwarf 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 Include Background off (Options > Project Options), 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