Images

Text-only content can be visually overwhelming and make sections difficult to scan. Users whose native language isn't English may also have trouble understanding text-only content. If finding or understanding content is a barrier, then user may not be able to complete tasks.

Images add visual interest, tone and branding to textual content. They can help tell a story, demonstrate how-to complete a task or convey complex messaging to users in a visually appealing way.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Media

Demo

Configure: select the dropdowns below to display the variety of options that images support.

This is an alternative text
Dog

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


Consider using images to:


    

  • support textual content or ideas

  • add visual interest and colour to a page

  • provide a consistent look or feel (i.e. branding)




    






                
                    





    
    
    


Usage examples:


    

  • displaying decorative images

  • showing an example of a concept or idea

  • illustrating steps in a process




    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Select images with a consistent look and feel.



    





Use high quality images that are properly optimized for digital spaces.



    





Prioritize images that provide important information (higher on the page) over those that are decorative (lower on the page).



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not use more images on the page than there is textual content. If the purpose is to showcase photos, consider using an image viewer.



    





Do not use images that are "busy", convey more than one idea or confuse users about the content.



    





Do not use pixelated, blurry or low quality images.



    





Do not use a zig-zag layout for more than three consecutive images for sequential content (decorative images that don't provide essential information are an exception).



    





Do no apply a fixed width or height to images so that they are responsive relative to the page layout.