background image

Inserting Photos using the Page Editor

Most web pages will include not just text but also photos and/or graphics. This helps to add visual interest to the page, and make it easier for visitors to read. No one likes long pages of text, so make sure that you include images in your pages by making full use of the facilities in the page editor.

This image was resized to 250 x 150 pixelsResize your Images BEFORE Uploading

Images for display on web pages must always be resized to the required display size before uploading. This ensures that your images will display at the best quality, as well as load fast for quick page displays.

For example, if your website page width is 940 pixels then if you want to insert a photo that is half the page width, simply resize your photo to approx 470 pixels wide. The example photo on the right is 250 x 150 pixels.

In PhotoShop use File / Save for Web where you can change the image dimensions, set the compression quality, and view the before & after effects
This ready-made feature will also auto-resample your photo to 72 dpi.

The JPEG quality option in your image editor is the level of compression used to reduce the image file size. This should be set to approx 70% for best quality.

Save Photos as JPEGS & at 72 ppi Resolution

Photos for use on websites should be saved in the JPG format, and at a resolution of 72 or 96 ppi (pixels per inch). Anything higher than this will make the image file size too large, and therefore display very slow. All image editors provide the facility to change the image resolution, and in PhotoShop this is automatically done when you use the File / Save for Web option.

Inserting a Photo

insert a photo tool

Click in the page where you want to insert a photo (this can also be inside a table cell) and press the Image icon in the tool bar.

If you have already uploaded your photo into the Media folder, simply press the Browse Server button and select your photo.

If you have not yet uploaded your photo, press the Upload tag, then the Browse button to select your photo from your computer. Then press the Send it to the Server button.

Your photo will then appear in the Preview window shown below.

image properties

You should then enter a very short description in the Alternative Text field (this is the mouseover text). In order to make the mouseover text apear in all browsers you should also enter the same text in the Advisory Title which is under the Advanced Tab

If you want your image to align to the right of tyhe page (like the sample photo above), then select Align Right.
To make your image align to the left, select Align Left.
If you want any content (text etc) to display below the image, then select Align Bottom.

If you want your image to be a link to another website then enter '0' in the Border field, then click the Link tab and enter the website address, and select Target - New Window.

Using the Instant Templates

This feature is fully explained here, and you can use this to quickly insert a professional page layout anywhere into your page complete with placement photos that you can replace with your own. The advantage of this method is that these placement photos include the image dimensions, so you can easily resize your own photos at the correct size.

Adding Rows of Photos

If you want to insert a row of four photos, all neatly aligned, then you need to resize your images all at the same height. This will ensure that they will line up correctly. Then, create a table with one row and four columns, and a width of 100 percent. See instructions on how to add a table here.

When you have inserted your table you can then insert a photo into each table cell, just like the example below. To centre align the images in each cell, click on the image and press the Centre Justify button in the tool bar.

image resized to 120 pixels height to maintain alignment image resized to 120 pixels height to maintain alignment image resized to 120 pixels height to maintain alignment image resized to 120 pixels height to maintain alignment

For batch resizing & file renaming software you can download free tools such as Irfanview and FastStone Photo Resizer.

www.irfanview.com - www.faststone.org