Add and customize images on your website

You can add photos, artwork, and other types of images to the pages on your website to help tell the story of your business or organization. Using images on your website is a great way to show your customers what you’re all about, your products, your services, past projects, employees, and more. With your public website, you can quickly and easily add images and then customize their appearance so they look professional on your website. Watch the video below for a quick demo. The rest of this article appears below the video.

In this article


Upload images

There are a couple ways to upload pictures to your website. If you’re uploading a single image, the best approach is to browse to a web page and add the image there. If you’re uploading multiple images or folders with images, the best approach is to browse to an image library on your website and upload the pictures there. Both approaches are explained here.

Insert a single image on a page

   

To add a single image to your website, browse to the page where you want to add the image and use the page editing toolbar to insert the image.

  1. Browse to the page where you want to add an image.
  2. Click the Page tab and choose Edit.
  3. Click the Insert tab and choose Picture.
    Insert picture on website
  4. Choose the source location for the image:
  • From Computer to upload an image from your computer. Once you select a picture, choose a Destination Library, for example Site Assets or Photos.
  • From Address to reference an image that already exists online. This could be your website or a third party website. Add the Address and Alternative Text for the image.
  • From SharePoint to reference an image that already exists on your website. In the Select an Asset window, browse to the image on your website and click Insert.
  1. Customize the image if necessary and then click Save or Save and Publish.

Top of Page Top of Page

Upload a group of images to a library

   

To upload a group of images to your website and then add them to pages later, go straight to the library where the images are stored and add more images there.

  1. On your website, click Settings SharePoint Online Public Website Settings button and choose Site contents.
  1. Click the library where you want to store your images. The default location is Site Assets. You can use this, use the Photos library, or create a new library, by clicking add an app.
  2. Once in the image library, drag and drop the images directly onto the screen, where it says drag files here, as shown here.
    Drag and drop images to library

     Note    If you don’t see the option to drag and drop files, install the latest version of your browser software. This feature requires the latest version of Internet Explorer, Firefox, or Chrome.

  1. As an alternative to using drag and drop, click new document, choose Upload Existing File, and click Browse to locate the image.
  1. You can also click Upload files using Windows Explorer instead and drag and drop images using Windows Explorer.
    Upload with Windows Explorer

     Note    This option requires the Internet Explorer web browser and when signing in, select Keep me signed in.

  1. When finished uploading images, browse to the page where you want to add an image and follow the previous steps for inserting images from SharePoint.

Top of Page Top of Page

Customize images

Once you upload images to your website, you can customize the appearance of those images using the page editing toolbar. You can change the size, position, spacing, style, and so on. These changes don’t affect the source image, so if you add the same image to another page on the website, you can perform different customizations there.

 Note    You can do basic image editing with the page editing toolbar, but for advanced image customization or file compression, you should use a dedicated graphics editing program to customize your images.

  1. Browse to the page containing the image you want to customize.
  2. Click the Page tab and choose Edit.
  3. Select the image on the page and then click the Image tab.
    Image editing options
  4. Use the page editing options to customize the appearance of the image:
  • Change Picture to replace the existing image with a different image from your computer, from the web, or from your SharePoint website.
  • Pick Rendition to change the rendition used to display the image. (See next section on image renditions.)
  • Address to change the image address, which replaces the existing image with a new one.
  • Alt Text to change the alternate text that appears when users hover their mouse over the image.
  • Image Styles to change the border style that appears around the image.
  • Position to place the image inline with your text. You can choose Left, Right, Top, Middle, or Bottom.
  • Horizontal Size to change the width of the image in pixels or percentage.
  • Vertical Size to change the height of the image in pixels or percentage.
  • Lock Aspect Ratio locks the horizontal and vertical size so the image doesn’t stretch.
  • Horizontal Space to change the spacing on the left and right side of the image.
  • Vertical Space to change the spacing on the top and bottom of the image.
  1. When finished customizing the image, click Save or Save and Publish.

Top of Page Top of Page

Use image renditions

Image renditions allow you to customize the appearance of an image and save that customization as a template. Using image renditions, you can reuse the same image across your website but make it appear differently each time. In the below illustration, the original image is at the top.

Using image renditions, you could create three separate versions of the same image: the cropped logo on the left, the resized image in the middle, and the cropped background on the right. You could use all three throughout the website, originating from the same source image.

Image rendition concept

Follow these steps to set up image renditions on your website.

Create the image rendition

   
  1. On your website, click Settings SharePoint Online Public Website Settings button then choose Site Settings.
  2. Under Look and Feel, click Image Renditions.
  3. Click Add new item to create the new image rendition.
  4. In the Name field, type a name for the rendition. (For example, “Image Thumbnail Small.”)
  5. In the Width and Height fields, enter a width and height, as a pixel value. (For example, 50 pixels by 50 pixels.)
  6. When finished, click Save.

Edit image rendition settings

   
  1. On your website, click Settings SharePoint Online Public Website Settings button then choose Site contents.
  2. Browse to the library where your website images are stored and upload the new images there. The default location is Site Assets. You might use this library, the Photos library, or a custom library.
  3. Place a checkmark beside the image you want to use to create the image rendition.
  4. Click the Design tab and then click Edit Renditions.
    The Edit Renditions page shows all of the image renditions as previews with the option to change each one.
  5. Next to the image rendition you created earlier (“Image Thumbnail Small” in the example), choose Click to change.
  6. Use the selection tool to pick the portion of the image you want to display.
  7. When finished, click Save.
  8. On the Edit Renditions page, click OK.

Add the image rendition to a page

   
  1. Browse to the page where you want to add the image rendition.
  2. Click the Page tab and choose Edit.
  3. Click the Insert tab, choose Picture, and select From SharePoint.
  4. Browse to the existing image on your website and click Insert.
  5. Select the image on the page and then click the Image tab.
  6. Click Pick Rendition and then choose the image rendition you created earlier.
    The image displays on the page according to the size you specified in the image rendition.
  7. Click Save or Save and Publish.

Top of Page Top of Page

Learn more

In addition to working with images on your web pages, you can add other content to the page, like text, links, tables, and video. See Public Website help for Office 365.

Top of Page Top of Page

 
 
Applies to:
Office 365 Enterprise admin, Office 365 Midsize Business admin, Office 365 operated by 21Vianet - Enterprise admin, Office 365 operated by 21Vianet - Midsize Business admin, Office 365 operated by 21Vianet - Small Business admin, Office 365 Small Business admin, SharePoint admin center, SharePoint Online Enterprise (E1), SharePoint Online Enterprise (E3 & E4), SharePoint Online Midsized Business, SharePoint Online operated by 21Vianet - Enterprise (E1 & E2), SharePoint Online operated by 21Vianet - Enterprise (E3 & E4), SharePoint Online operated by 21Vianet - Midsized Business, SharePoint Online operated by 21Vianet - Small Business, SharePoint Online operated by 21Vianet - Website, SharePoint Online Small Business, SharePoint Online Website, SharePoint operated by 21Vianet - admin center