Images have an important role to play on a content site. They can provide information to your visitors. They break up text. And they draw your visitors deeper into your page, and your site.
Images can also drive traffic to your site from Google Images, as well as from Pinterest.
Add images on your pages where you feel they'll enhance your content and your visitor's experience.
If you need to edit any of your images (resize, crop, etc.), Pic It! is a browser-based image editor, built in to SBI!, that lets you do just about anything you need to do to an image.
Click here for help on using the Pic It! image editor.
Important Note
If you upload .webp images to the library and edit them with the Pic It! editor, saving the images will convert them to .png images. If you need to edit any .webp images, do that first in an image editor that supports .webp, then upload the images to the Image Library.
For instructions on using the various tools in the Pic It! editor, see this TNT article...
https://sbitips.sitesell.com/customizing-images-with-pic-it.html
Use only high-quality images. Make a positive first impression.
Use only .jpg, .gif, .png and .webp formats. File names should be in lowercase. All extensions (e.g., jpg) must be in lowercase.
Keep image file size as small as possible, so your page loads fast. The maximum file size for any image file is 1.5 MB.
To keep file sizes as small as possible, be sure to optimize all images for the web. Most graphics applications have a save or export feature that will do this for you.
Or use TinyPNG to optimize JPG and PNG images. Squoosh is another option for optimizing images.
Note that SBI!'s built-in PageSpeed functionality also optimizes your images. Do the TinyPNG or Squoosh optimization first though, for best results.
Give each image a descriptive name that will help you identify it quickly. (For example, "view from window at Nat's" clearly jogs the memory of the owner of anguilla-beaches.com.)
The more images you place in your Image Library, the more important "fast recognition" will become.
You can preview each image as well. And the Image Block's image selector also previews each image when you click on its name, which can help you narrow down to exactly the right image.
You can upload up to 10 images at one time to the Image Library.
Click on the Browse button (Choose File if you're using Safari) to select up to 10 images.
If you select fewer than 10, you can use the button again to add the balance, up to the limit of 10.
The image's file name must have a lowercase extension (e.g., .jpg).
Click in the text box for each image to Add a Descriptive Name. If you forget to add a descriptive name, you'll see a message advising you add one.
SBI! will use the Descriptive Name you give the image when you upload it as the default alt text when you add the image to a page. You can replace it with custom alt text whenever you add the image to a page.
Click on the X to the right of any descriptive name to remove that image from the ones to be uploaded.
If you want to edit the image in Pic It! after uploading it, click on the button next to Edit this image after upload. If you're uploading more than one image, you can select the Pic It! option for only one image.
If you need to edit more than one, upload them individually and click the button. Or open the Details panel for each image and click on the Edit in Pic It! button.
Click on Upload Image(s) to upload the image(s) you included.
You can upload a new image to the Library via an Image Block during the process of building or editing any of your pages.
In general, though, make efficient use of your time. Plan ahead and upload several images to the Image Library before you begin building.
If your site's niche lends itself to people searching for images (e.g., a travel site), optimize for Google's Image Search by using one of your Topics in the image's file name.
See this article about Image Search for more information.
Don't do this to every image on a page, however. Google may think you're keyword spamming. Use the Topic in the file name of the most important image, and use a synonym in each of the other image file names on the page.
This applies to alt text as well. Use the Topic in your most important image's alt text. Use synonyms in the alt text of the other images.
You can upload a new version of an existing image. Ensure the file name is the same. If you gave the original a descriptive name, the new version will use that same name.
If you want to change it, or you did not give the original a name, and SBI! used the file name, replace it with a descriptive name during the re-upload process.
You can manage the images you store in the Image Library...
Use the filter tool (with the magnifying glass icon) above the images table to quickly find any image based on the characters in the file name.
Create "virtual" folders, including subfolders, into which you place images (e.g., one folder for each TIER 2 Topic).
Edit existing folders to change their names. Or delete them.
Show all images, or only those you've not put into folders.
View images by file names, descriptions, or file names + descriptions. Or view thumbnails of the images.
If you elect to view the images in the table, show (or hide) the image details (width, height, file size, and date uploaded). Use the slider to adjust the size of the thumbnails.
When you first start building your site, a list of 5, 10, even 20 images is manageable.
But it becomes hard to deal with increasing numbers of images. So use folders to divide your images into groups of related images.
When you create a folder, you do not create a "real" folder on your site.
These are "virtual" folders, for visual organization only, to help you work with smaller, related groups of images (rather than one long list of all your images).
If you upload your own HTML, do not change how you organize your images and work locally. Folders are simply organizational aids for people using BlockBuilder and the Image Library.
You cannot delete a folder that contains an image (all images must be removed from that folder first, or they must be moved to another folder).
Folders don't move. You can create a subfolder inside a folder, but you cannot drag one folder into another one. Subfolders are indented, to make it easy to see them.
You can also rename a folder, should you save a typo or change your mind about the folder name.
The owner of anguilla-beaches.com has 10 images related to "Anguilla celebrities." Let's see how she creates the first folder...
She clicks on the icon of the folder with the + symbol to create the new folder. She names it "Anguilla Celebs" and clicks on the checkmark to create it. (Or press Enter to save it.)
She then moves all "Anguilla celebrities" images into this folder.
The process for moving an image into a folder is simple...
Click and hold on the image file name or name. Drag the image to the desired folder.
If you want to move multiple images, hold down the Ctrl key (Windows) or Command key (Mac) and click on each image you want to move. The text will become bold for each selected image. Drag them to the desired folder.
Drag the highlighted images into the folder of your choice.
Move related images into the appropriate folder. Continue until all related images have been dragged into the folder (e.g., all celebs-related images are in the "Anguilla Celebs" folder).
Here's a good tip for doing this quickly...
Click on the Not filed link. This shows you all images not yet filed into folders. Then find image file names containing a certain word by typing that word into the search box at the top right of the table.
You might find it easier to decide where images belong if you choose to view them by Desc (the descriptive name you gave each image) rather than by Name.
Continue by creating more folders, naming according to major categories or "sub-niches" of your site (e.g., "food," "real estate," "tours" and "hotels"). As you do this, the list of folders grows (listed alphabetically, A to Z).
How many folders should you have? As many as you need to work comfortably, allowing room for site growth, but no more!
Keeping the number of folders down will cut down on the length of the folder list (reducing the amount of scrolling).
You may want to create a folder for each TIER 2 Topic and one for your admin pages (About Us, Contact Us, Privacy, etc.) if you have images on them, and some for any other content-based categories that will help you organize your images.
And you may want to create one for images that you have not yet added to any page.
You can also use the drag feature to move images from one folder to another folder or subfolder.
Do you have some images that just don't fit neatly into a group? Leave them as "Not Filed."
It's better to have 15 or 20 "miscellaneous" images as Not Filed than to expand your folder list by 10.
Work with your images in this section, where you see the image file names or descriptions displayed...
Show Choose which images to display in the Library Images section.
All is the default view. Click on it and select Not Filed to see all the images not filed in folders.
When you select a folder, you automatically see all images (displayed in the table) that are in that folder.
Selecting All always displays all images from all folders, even when a folder is selected (it becomes de-selected).
When you upload a new image, it will be Not Filed until you move it into a folder.
View by Name is the default view. You'll see all the images by their file name (e.g., upper-shoal-stitched-high.jpg). Select Desc to see the description you gave each image (e.g., Upper Shoal stitched).
Select Name + Desc to see the file name and description of each image. Select Image to view a thumbnail of each image.
Select Image, which then gives you the option to show or hide each image's width, height, file size and date uploaded. Use the slider to choose the view size of the images in the table (this does not affect the file size of the uploaded image).
In the table, the column headers are sortable.
Display your images...
alphabetically
by file Size
by the Width
by the Height
by the Date (last uploaded)
Another way to quickly find the image you need is to use the filter tool. Type some characters into the text box to the right of the small magnifying glass.
As you type each letter, image file names containing that exact character string remain, and all other files drop off.
Soon you're left with just a handful or so of images whose file names contain the character string.
Can't remember in which folder an image resides? Click on the image. The Image Details panel (below) opens. In the Image Info section is the folder that image is in.
When viewing by file Name, hovering your mouse over the name will display a tool tip window with the image's Desc. And vice-versa.
Click on the image's file Name or Description to open its Details panel. If you're viewing the images instead, click on the image information to open the panel.
The top of the panel shows the file name (in bold text), followed by the image's URL. Click the copy icon to the right of the URL to copy the full URL. Note: this is the image's URL, not the URL of the page the image is on.
Below the URL is the Descriptive Name you gave the image. Click on the pencil icon on the right to edit the name.
The view of the image is a large thumbnail. Click on the image to view it full size in a new window/tab.
Below the image are...
the red Delete Image button. If you click it, you'll be asked to confirm that you want to delete the image. Review the information on that confirmation page. It lists every page that the system knows displays that image, including in any Raw HTML Blocks, as long as you used the lt;img src> tag.
Click to view each page. Read the text above and below the image. If it refers to the image, edit the page in BB2 to remove the reference to that image. Or note all the pages in a document and edit them after working in the library.
the Edit in Pic It! button. Click on it if you want to edit the image (crop, change to sepia tone, etc.). You can also download the image from Pic It! if you prefer to edit it in your image editor.
Pic It! opens in a new window/tab. When you've clicked on the Save button to save your changes, or the Cancel button to escape the changes, the window/tab closes.
the Replace Image button. If you want to keep the file name and change the image itself, click this button to replace the original. Select the new image file. Click the radio button if you want to edit the image in Pic It!. Then click the blue Upload button.
This section displays the file size, dimensions (width x height, in pixels), date uploaded, and folder(s) where the image is.
This tells you which pages the image is displayed on. If you plan to delete the image (see above), use the information to view the pages first to see if they need to be edited.