Jump to Content

Inserting images

The templates have been designed for monitors with resolutions of 800x600 pixels. Bandwidth affects download time, so images of more than 30-40kb may take too long for a user to download. Ideally keep your images at less than 15kb (15000 bytes).

To ensure that image and text complement each other you will need to view your page in the browser. You may find you have to make your image smaller (resize) or put white space around it to make it presentable on the webpage. Try looking at your webpages in different browsers to get a sense of the best compromise. See Web browsers for details. Please do not resize your image within SharePoint Designer as it does not really reduce the file size.

 


Finding and editing an image

Go to the Marketing and Development Unit's Image library (staff access only) to find an image for your website. You may also be able to buy a stock photo from an outside agency. Ask MDU for more information.

Once you have chosen a suitable image, you may need to edit it (eg change the size). Depending on the level of editing required, you can use Adobe Photoshop, Microsoft Office Picture Manager or Paint.NET (a free application) to do this. For more information on using Paint.NET go to Software help.

Please do not resize an image in SharePoint Designer as this does not reduce the physical size and usually makes the image pixellated.

 

Inserting your image into a saved template

Images in the new templates will automatically be aligned to the right of text unless they fill the page.

SharePoint Designer

  1. Open your site in SharePoint
  2. Open the saved template page you want to insert the image into
  3. Put your cursor next to the text where you want the image to appear
  4. Go to Insert and select Picture, then From File...
  5. Find the file in your images folder
  6. Select the file and click Insert
  7. Save and Preview in Browser

example of image positioning in SharepointIn SharePoint the image should be inserted  left of the text, up against the beginning of the relevant paragraph). Although in SharePoint it will look as though it is left of the text, when viewed in a web browser the image will float to the right as shown here.

Don't try to change the picture's position, as the cascading style sheet will override this anyway. If you really need to position the image in a particular way, use an inline style to position it. Instructions for placement on the left of the screen are below.

 

top^

 

Image width and size

You might need to resize an image using image editing software. Please do not resize an image in SharePoint Designer as this does not reduce the physical size and usually makes the image pixellated.

The preferred image width for the corporate web is 260 pixels wide if landscape or 180 pixels wide if portrait. To find out the width of your image

  1. Open the image file in SharePoint Designer and right click on it
  2. Select Properties
  3. Check the width of your image in the Size box

The preferred image size for the corporate web is less than 15kb. To find out the size of your image

  1. Select the image file in your images (or other) folder
  2. Right click on the file
  3. Choose Properties...
  4. In the dialogue box look at the file size next to Size:

Properties box showing image size

 

Inserting alt text

For accessibility reasons, you will need to insert a text alternative into your image.

SharePoint Designer 2002

  1. Insert your image into your saved template page
  2. Right click on the image
  3. Select Picture Properties...
  4. Look for the heading Alternative representations, under the General tab of the dialog box
  5. In the Text: box type a brief but meaningful description of the image you have inserted (if the image has a text heading don't just repeat this heading as a speech reader will read this anyway)

Picture Properties box showing how to insert Alt text for an image

 

  1. Click OK and Save your page
  2. View your page in the browser. When you put your cursor over the image the text should appear

If your image is decorative and does not need a specific title you still need to provide alt text. What you do in this case is insert a couple of space bar clicks into the Text: box. This will show in the browser as a very small empty box when you put the cursor on the image. A speech reader will recognise that this image can be ignored.

 

Fixing your image placement on the page

Following are instructions for how to fix the problem of your image not presenting well in the browser or affecting the layout of the text it accompanies.

If the webpage contents drop down from the top of the page

An image is too large for your page (more than 550 pixels wide) if the contents drop when you view your page in the browser. You can resize the image using software like Photoshop or Paint Shop Pro. The free software called Paint.NET is another option. See Images for the web (Software help) for more details.

If you want the image to appear on the left of the screen

The corporate web stylesheets are setup (except for the fullscreen template) so that images will float to the right of the screen. Sometimes you don't want this to happen and you want it on the left of the page. It is quite easy to implement this using some HTML code.

  1. Add the image as per normal with alt text etc.
  2. Select the image and then view the HTML code by selecting the Code tab at the bottom of the page.
  3. The image code will look something like this:
    <img border="0" src="../images/default.jpg" width="180" height="270" alt="Alt text description here">
  4. Add the code to make the image sit on the left-hand side of the page (new code is in bold)
    <img border="0" style="float: left; margin-left: 0;" src="../images/default.jpg" width="180" height="270" alt="Alt text description here">

If you do not want text appearing next to an image

The code above will make the image sit on the left with text appearing to the right of it.

If you want no text next to it at all it's a simple matter of inserting some extra code to the first lot of text that you want to appear underneath the image.

For instance if there is a <p> tag after the image add this code <p style="clear: both;"> so it appears like this. The bolded code will also work with headings etc.

The other way text will not appear next to an image is by making the image 550 pixels wide.

If unrelated text appears on the left of your image

This is another way of making the image sit by itself without any text next to it. You can create white space horizontally and/or vertically around your image using SharePoint Designer 2002

  1. Right click on your image in the file
  2. Select Picture Properties…
  3. In the Appearance tab dialogue box, under the heading Layout, look at the Horizontal spacing and Vertical spacing boxes. They will automatically be on 0. Increase the Horizontal spacing to create white space either side of your image and prevent the text from appearing next to it
  4. Preview in Browser to see how it looks

Note: If unsure what procedure to follow to make your page presentable in the browser once you have inserted your image, contact the corporate web team.

top^

 

Inserting longdesc (long description) text

If your image is a flow chart or complicated diagram, it may require a long description rather than a short sentence to explain its meaning for accessibility reasons. There are two ways of doing this

  1. Put a summary of the image underneath it or next to it and note that in the image's alt text
  2. Create an HTML file containing your long description and then put a link to it in your HTML view in SharePoint Designer, noting that this link exists in the alt text by adding '[with longdesc]'

Method 2

Your HTML code for an image might look like this in the HTML view in SharePoint Designer

<img border="0" src="images/chair.JPG" alt="Chair sculpture (using cotton fibre) by Lois Lane">

If you add longdesc to the HTML code it will look like this

<img border="0" src="images/chair.JPG" alt="Chair sculpture (using cotton fibre) by Lois Lane [with longdesc]" longdesc="http://www.unisa.edu.au/art/chairdesc.asp">

Unfortunately, no current browsers support this attribute. Therefore, it has become common practice to use a descriptive link. This is basically an additional text link that appears next to the image in the browser and provides a redundant link to the longdesc URL.

If you add a descriptive link to your HTML code it will look like this

<img border="0" src="images/chair.JPG" alt="Chair sculpture (using cotton fibre) by Lois Lane [with longdesc]" longdesc="http://www.unisa.edu.au/art/chairdesc.asp"><a href="http://www.unisa.edu.au/art/chairdesc.asp">Further information available from this link</a>

When you view the image in the browser this will appear as a hyperlinked 'Further information available from this link' next to your image. For an example of longdesc go to the diagram at Site structure (have a look at the HTML view as well as the Normal view).

Go to Watchfile WebXACT to test your longdesc webpage.

SharePoint Designer 2002 supports any longdesc information a user codes in by hand within the HTML view, but the user interface is dedicated to providing the functionality that is available to web users today (specifically Internet Explorer and Netscape).

 

top^