Using pictures on your Web site

Using images is a great way to boost the appeal of your Web site. Pictures also convey a lot of information quickly, and they make your site much more interesting. This article gets you started with adding images to your site.

Before you begin, consider the intended purpose of the images you want to use. For example, an image that you plan to use for print material should be of high quality, which results in a larger file size. However, if you plan to use an image only on your Web site, it is important to keep the image file size smaller, to ensure that the Web page loads quickly. If you have an image that serves multiple purposes, you should create different versions of it, with each version being of a size and quality setting that is appropriate for each purpose.

 Note   If you partially redirected a domain name to your Office Live Small Business account: Before you can make changes to your Web site after partial redirection, you must change the primary domain to your free Office Live Small Business domain that ends in .officelive.com. For more information, see Make changes to your Web site after partial redirection.

• Use the Image Gallery

• Add an image to a Web page

Use the Image Gallery

You can add an image to a Web page from two sources: your computer or the Image Gallery. You can upload images and store them in the Image Gallery and conveniently reuse those images throughout your site. For information about uploading images to the Image Gallery, see Add or remove an image.

 Tip   It is a good idea to remove the images that you don't use from the Image Gallery. This makes it easier for you to find the images you need and helps you to avoid running out of Web site storage for your account.

To add an image to the Image Gallery, do the following:

1. Sign in to Microsoft Office Live Small Business. On the Home page, at the top, click Web Site.
2. In Page Manager, on the left navigation bar, click Image Gallery. The Image Gallery appears.
3. On the actions bar, click Upload. The Image Uploader appears.

   

4. Click Select Image, and browse to the image on your computer or in a network folder.
5. Select the image, and then click Open. You can add an image file in any of the following file formats: JPEG, BMP, GIF, and PNG.
   • To optimize the images being uploaded, select the Optimize my images text box. Optimizing your images will help them load faster on the Web page. You can also use photo editing software to convert your high resolution images to JPEG files 800 x 800 pixels or smaller before you upload them to the Image Gallery.
   • To change the title of the image, click the current title and type a new title. Note that this only changes the title in the Image Gallery. The file name of the image on your computer does not change.
   • To rotate, crop, or change the brightness and contrast of the image, click Edit Photos.

     

6. Repeat steps 4 and 5 to select other images to upload.
7. When you have finished selecting your images, click Upload.
8. Click OK, and then click Close.

If you use Windows Internet Explorer, you can use the Multiple Image Uploader, which makes it easier to add pictures to the Image Gallery. This requires that you install a Microsoft ActiveX control. For information about the Multiple Image Uploader and the Image Gallery, see Add or remove an image.

To remove an image from the Image Gallery, do the following:

1. On the Office Live Small Business Home page, at the top, click Web Site.
2. Click Image Gallery.
3. Select the check box at the top-left corner of each image that you want to delete, and then, on the actions bar, click Delete.

    Note   When you remove an image from the Image Gallery, it is removed from your Web site.

 Top of Page

Add an image to a Web page

You can add an image to a Web site page from two sources: your computer or the Image Gallery. The Image Gallery contains images that you have already uploaded to your account. After you upload an image in the Image Gallery, you can place it anywhere on your Web site. The following procedures describe how to add, move, remove, and wrap text around images on a Web page to get the exact look and feel that you want for your site. For information about adding a logo, see Branding your site with your company logo.

To add an image

1. On the Office Live Small Business Home page, at the top, click Web Site.
2. In the list of Web pages on your site, click Edit next to the page where you want to add the image.
3. Place your cursor where you want to insert the image.
4. In Page Editor, on the actions bar, click Image. In the Insert Image dialog box, you can select images from your computer's hard drive or from the Image Gallery, if you have uploaded images there.

   

Do one of the following:

• To add an image from the Image Gallery, select My uploaded images, click the image that you want to use, and then click Insert image.

   Note   The My uploaded images page displays a maximum of 24 images per page. To view additional images, click the page numbers at the lower-right corner of the page.

• To add an image from your computer, select My computer, and then click Browse for an image. Select the image you want, and then click Open. If you want to optimize your image for Web site viewing, select the Optimize my image check box .

 Note   If you select this option, the image is converted to JPG if it is not already in this format, and the JPG conversion quality level is set to 100%. The image is resized to a maximum of 640 pixels, maintaining its aspect ratio. These settings help the image load faster in Web browsers.

5. To resize the image, click the anchor at the bottom right of the image, and then drag the corner of the image until it is the size that you want.

To add an image as a link

When you add an image to your site, you can set it up so that the image is also a link, either to another Web page on your site or to an external site. You can also choose to have the link open in the same browser window or in a new browser window. To add an image as a link, follow these steps:

1. On the Office Live Small Business Home page, at the top, click Web Site.
2. In the list of Web pages on your site, click Edit next to the page where you want to add the image.
3. Place your cursor where you want to insert the image.
4. Click Module, and then click HTML. The HTML module appears.
5. Click Images. The Insert an image dialog box appears.
6. Do one of the following:
   • To add an image from the Image Gallery, select My uploaded images, click the image that you want to use, and then click Insert image.
   • To add an image from your computer, select My computer and then click Browse for an image. Select the image you want, and then click Open.
7. The HTML code for the image appears in the HTML module. In front of the image code, type the code for the URL that you want to use. The following examples illustrate how the code should appear in the module:
   • Link to another page on your Web site  <a href="default.aspx "><img src="/images/PortfolioPiece.jpg"/></a>
     If you don't know the file name for the page, navigate to the page in Page Editor, and then click Page Properties. The file name is displayed in the Web address box.
   • Link to an external Web site  <a href="http://www.microsoft.com"><img src="/images/PortfolioPiece.jpg"/></a>
   • Open a link in a new browser  <a href="http://www.microsoft.com" target="_blank"><img src="/images/PortfolioPiece.JPG"/></a>

To move or remove an image

After you place an image on a Web page, you can reposition it on the page if you want. To do this, drag the image to the location on the page where you want it to appear.

To remove an image, click the image, and then press DELETE. Note that this only removes the image from the page, and the image remains in the Image Gallery and on your computer.

To wrap text around an image

You can decide how you want to position the image relative to the text on a page. To select the option that you want, right-click the image on the page, and then select one of the following:

• Float Left The image is displayed at the left margin of the zone, and the text is located to the right of the image.
• Float Right The image is displayed at the right margin of the zone, and the text is located to the left of the image.
• No text wrapping The text does not wrap around the image, but appears below it.

By simply adding images, you can quickly achieve a polished and professional look for your site. And because the process is easy, you can change or move the images on your site whenever you want. A few clicks, and you can have a new look!

 Top of Page