Image Guidelines

The larger your image file, the longer it will take the page to load. The goal is to have images that are under 100k. Prior to uploading your images to Sharepoint, we recommend compressing your images. Image compression lowers the file size of the image without compromising the resolution. A great tool for compressing images is called Squoosh.app.

How to use Squoosh:

1. Drag and drop your image and Squoosh will automatically compress your image. 
2. The box in the lower left part of the screen will show you the size of your original image:
   

3. The box on the right will show you the size of the newly compressed image:
   

4.  You can slide the blue bar in the middle of the screen back and forth to see the difference in quality between the original (left) and compressed (right) version:
   

5. If you are satisfied with the quality, download the image by clicking the blue download button:

Cropping an image is different than resizing. Cropping is when you want to use only part of the image or change the dimensions or shape to fit a specific area (like the homepage rotator). If you are not sure what size image to use, see the recommended image size section below.

• How to crop and resize an image
  

For photos, we recommend using JPG files. For graphics (e.g. logos or images that have a transparent background) we recommend using PNG files. 

*Please avoid images of text—this is a violation of web accessibility. An image of text refers to when readable text is presented inside an image.

• Why it is important to use text vs. images of text
  
• How to upload an image to Sharepoint
  

If you insert an image in the content area of your page, you will have to add the image responsive class to ensure it will look great in mobile. This step requires some familiarity with HTML.

How to add the image responsive class:

1. Navigate to the page you inserted your image on.
2. Select Settings Wheel > Edit Page.
   
3. Select the Format Text tab and click Edit Source:
   



4. Find the image tag and add: class="img-responsive". Your code should look like this:
   

                           
       <img class="img-responsive" src="YOUR IMAGE URL HERE" alt="YOUR ALT TAG HERE"/>     
          
                           
                           
                           
   

   Copy Code Snippet

As an alternative, you can choose to hide your image from mobile by adding the noShow class. If you decide to hide the image instead of making it responsive, your code should look like this:

                        
      <img class="noShow" src="INSERT YOUR IMAGE URL HERE" alt="INSERT YOUR ALT TAG HERE"/>
                      

Alternative image description, also known as an image alt tag, is a word or phrase inserted in HTML that tells users the nature or content of an image. Any image that is conveying information not available elsewhere on the page needs an alt tag. 

How to insert an alt tag:

1. Go to the page you inserted your image on.
   
2. Select Settings Wheel > Edit Page.
   
3. Click on your image. You will see the Image tab appear in the ribbon at the top of your page:
   



4. Under the Image tab, navigate to the Alt Text field and complete your alt text:
   

• Everything you need to know about alt text
  
• Web accessibility guide for editors