Add images

You can add images directly to a website page and align the images to the text as described on this page, without any need to possess technical skills or create code.

Before you add images to your website, the images should ideally first be adjusted to the final display size.

It is not absolutely essential to adjust the height and width dimensions of each image before uploading the image to the website. Although, doing so will keep the image file size small, which will in turn help the page load faster when viewed by visitors.

Two image folders exist within your SBI account, and it is important for anyone who plans to upload their own html files and associated images to understand the difference between these two folders, as described below.

If you intend only using BB2 to create and edit all your pages, and do not intend to upload any html created pages to your website, and only intend uploading images for direct display on those pages.

Then the following notes are not as relevant to you as they are to someone who intends uploading their own html pages and intends uploading images other than for direct display on the BB2 edited pages.

This is because the image files you upload and display at your website, will be stored in and will be available to you directly from the Image Library.



When you add image files to your website account by uploading the images through the Image Library window, or through the BB2 Select Image window, the uploaded image files are placed into the Image Library.

Image files displayed within the Image Library are actually located within a folder named /images/. Although, that folder name is not displayed to users.

Image Library files which are no longer required, can be selected and deleted through the Image Library window.

Less experienced users will initially upload all of their website images as described above. While more experienced users will for various reasons, want to upload at least some of their images as described below.



Users who wish to upload their own html pages or upload some html pages, while using BB2 to create and manage other pages at their website, should ideally do so either through the Upload Your Own HTML Page, or through the Quick Upload It window accessed through Site Central.

Uploading html files through the Upload Your Own HTML Page, will analyze your page contents and provide you with feedback about the page contents, before uploading the page to your account.

Uploading a html file through the Quick Upload It Window will upload your page without analyzing or providing feedback about the page contents.

you should ideally always upload a new html file through the Upload Your Own HTML window. This registers the page within SBI's systems so that the page can be tracked and promoted to the search engines.

You can later upload new instances of the page through the Quick Upload It! window, which is similar to an FTP upload application, and allows multiple html files to be uploaded simultaneously.

When you add image files through the Quick Upload It window, the files are placed into the image-files folder. These image files are not directly accessible through BB2 and cannot be viewed in the Image Library.

The images can however be called and displayed in published pages though html code inserted into a Raw html block in BB2, or can be called and displayed within the site design using Custom CSS that is entered into the Site Designer, Custom CSS window.

Other file types uploaded through the Quick Upload It Window, will be placed into appropriate folders determined by the file type. You can view lists of the uploaded files in the Special File Manager window.

Image files in the image-files folder which are no longer required, can be selected and deleted through the Special File Manager window.


To identify a specific size that you want an image to display at on your page. First create the page by adding your text, then Preview the page.

With the page preview displayed on your screen, take a screen shot using the Print Scrn key on your keyboard.

Then, open your preferred image editing program and paste the screen shot into a suitable sized new image file. This will enable you to assess the required size of your images and compare that size to the final page layout.

Use appropriate tools within your image editing program to identify the final width of the image you wish to insert into your page. This may either be the column width or less.

The image you add should ideally not be wider than the column into which it will be displayed, otherwise the file will be larger than it needs to be, and will take longer to download when visitors access the page.

In your image editing program, open the image you wish to display. Then adjust the width of the image to the size you want it to display at on the page. Once the width of the image is set, the height of the image should automatically adjust to the appropriate dimension.

On your computer, save the image in an appropriate format, to a suitably named file and folder. The .jpg format is usually used to save photographs, while the .gif format is usually used to save linear artwork which contains few or no gradients or variations in tone.

.png is a relatively new file format, and is used to save images that contain partially transparent pixels. This format retains the visual quality of an image, although can generate image files that are larger in file size than .jpg or .gif formated image files.

The .jpg image file format is a lossy format, meaning that each time you open and then save a .jpg image file, the image loses quality.

The .jpg image will become increasingly degraded each time it is saved, and unwanted effects known as artifacts will begin to appear in the image and will become increasingly pronounced each time you open and then re save the image in an image editing program.

Ideally you should always start with the highest quality copy of an image that you can obtain. Size the image to the required dimensions and then save it only once before uploading the image to your website.

You may need to experiment by saving your image in different formats and at different compression ratios to identify the best visual results.

When you add images containing partially transparent pixels, the images should be saved in the .png format to preserve the pixel transparency. Note that .png files are often larger in file size than the equivalent .gif or .jpg formatted files containing the same image. Although, the difference in file size is often only minor.

.gif files can be saved with both 100% opaque pixels and with 100% transparent pixels, although not with partially transparent pixels. .jpg files can only display completely opaque pixels.

Once you add images to your local computer, you can then add the images to your page in BB2 by first dragging an Image block into position immediately above or below a text block.

If you wish to add images either above or within a specific paragraph on the page, aligned to either the left or the right of the text, you will need to place that paragraph and the following text in a second text block, and drag the image block into position immediately above the new text block.

The Select Image window opens.

Browse your computer to select and add images to your website. Within the Select Images window, give the image a descriptive name, then click the Upload to Image Library and Add Image to Page button.

Alternatively, if you have already uploaded the image, select the image from the image library displayed in the Select Image window, then click the Add Selected Image to Page button.

Click the Cancel button if you wish to exit the Select Image window without inserting an image into your page.

Once inserted, the selected image is displayed within the image block, which automatically resizes to display the image.

Add a meaningful Alternate text description to the image.

If you want the image to display to the left of the following paragraph, click the Align Left button displayed in the BB2 toolbar. Next, click the Preview button to view the final layout.

You can also select to center an image or display it to the right of the following paragraph, by selecting either the Align Centre or the Align Right button.

You can add images to consecutive Image blocks and have the images display side by side on the published page by setting the image blocks to Align Left.

You can add images to each of your BB2 pages by following the simple steps described above.

In instances where a more detailed image layout is required, HTML code can be used within Raw HTML blocks to display and position images on the page.

The Initial caps page provides an introduction to using html code and CSS styles to position unique images within pages using a range of techniques. Also see the examples images shown on the Position absolute page.

Background images

You may at times want to update a background image such as your website header image.

One way to do this is to first view your website in the Firefox web browser.

Next, right click over the header image and select View Background Image from the displayed menu.

This will display the background image in the window.

Then, right click on the displayed image and select View Image Info from the displayed menu.

A new window will display, providing you with information about the image URL, the image type, the image file size and the image dimensions.

The above steps may differ slightly if you are using a Mac.

Save the displayed image to your computer by right clicking it again and selecting Save Image As from the displayed menu.

You can also download a blank header background image (with no text displayed) through the Site Designer window. This is valuable if you wish to apply a custom font which is not available through the Site Designer interface, to the header image in an image editing application.

Once downloaded, you will be able to load the saved image into an image editing program such as The Gimp or Photoshop, etc. and edit it.

You could save the new image under a different file name to the one used for the original file name, such as page-header-2.png. Then, add the edited image to your SBI website account through the Quick Upload It! page.

The advantage when you add images with new file names, is that the original image file is then still available at your website if it is needed at any time in the future.

You can then, use a snippet of CSS code similar to that displayed below, in the Site Designer, Custom CSS window, to call and display the new header image on your website in place of the original header image.

#Header .Liner { background-image: url("/image-files/page-header-2.png");}

The above CSS code calls and displays the new page header image at your website, in preference to calling and displaying the original page header image which is specified in the site's default style.css file.

Return to the top of the add images page.

Return to the website content page

Article by ©