Or return to existing edits

HELP
NEW IMAGES
PLACE NEW IMAGE

New Image - Place

Before you start, remember that images have to be online first to use Place or Insert.

If you need more help understanding the basics of New Image check our full guide here

VIDEO: Understanding the difference between Place and Insert

PLACE IMAGE - explained

When you "Place" an image on a page using Buildor/Lite, you are giving the image an absolute value for placement. Basically, this means the image can sit anywhere on the page using coordinates and you can simply drag the image to its required position.

This is great for placing images where you know other content CANNOT overlay it and is a really quick way to get started.

It does however come with drawbacks...

The web is basically a fluid environment - text can grow and shrink for all sorts of reasons and change the way your page looks. Most designers will allow for this and everything will simply scale down the page as other things grow.

If you Place an image in an area of content that is designed to be fluid it won't move when the rest of the content moves and it will end up obscuring it.

This image was Placed and shows how it can overlap content with dodgy results

If you would like your image to be fluid with the rest of the content then you must use Insert

The New Image / Place control panel explained

When you add a new image to a page you can either Place or Insert the image.

This control panel lets you add images that already exist online - either on your server or one of the many image sharing sites.

Remember to respect people's Copyright and only use images you own, have licensed or are Creative Commons exempt.

From the web - enter address of an image already online:

Enter the URL of the image you'd like to Place. If you need to work out the URL you can Right Click [PC] or CTRL-Click [Mac] on the image which will bring up a menu:

Fire Fox

Internet Explorer - select Properties...

...then copy the image URL

Alt: and Title:

The "Alt" tag of an image is a required value and is used to increase the usability levels of a page by displaying alternative text for an image. If a visitor is viewing your page without images or is using a screen reader then this functionality is essential. Do your best to get into the habit of including "Alt" tags for all images.

The "Title" tag is optional but valuable for Search Engine Optimization and to tell visitors more information about an image. You'll notice that on most major web browsers, when you 'hover' over an image (or indeed any element with a Title tag) more info will be displayed - hover over the image below for an example:

Height: and Width:

The height and width of an image can be somewhat complex.

All bitmap images (gifs, jpegs, pngs) have a defined height and width (which you can view by right clicking and selecting "View Image" - FireFox or "Properties" - IE).

It is possible to 'force' the height and width so that the browser overrides these values but it is not usually recommended as you either end up with an image that:

Has incorrect proportions:

Apples

Is stretched and blurry:

Apples

Or is smaller than it could be using up unnecessary bandwidth:

Apples

If you are placing a new image onto a page and you want it to be a specific size we'd recommend resizing the image first using one of the online services such as Picnik.com or software such as Photoshop.

Position:

You can use these input boxes to adjust the exact coordinates of a Placed image on a page.