Skip to Main Content
Longwood University Logo
Greenwood Library, Celebrate Curiosity logo with link to homepage

Style Guide

Reference for library staff for creating and maintaining guides. Style sheets, font information, logos, etc.

Embedding Responsive Images

Responsive Images  

Responsive images will grow or shrink in size according to the screen size.  It uses percentages rather than pixels so it knows exactly how much of the container it needs to use.   

To see what a responsive image does change the width of your screen and see how the image changes sizes. 

Screenshot of WYSIWYG for image manager

Image setup using WYSIWYG

Step 1: Upload your image into the Image Manager.  

Step 2: Select your image and either copy the URL or click on the image icon and it'll transfer it for you

Step 3: Enter your alt text, if needed in the appropriate box. 

Step 4: Set width to 100% and leave height blank or delete the value inserted.  The little lock icon on the right of the boxes should "unlock" and that means it will be responsive.  

Alt Text (Alternative Text) for images

Alternate text allows users who use screen readers to be able to gain the purpose and importance of the image.  Images can be decorative, links, or contain information.   It is important to include any vital information from an image in the alt text, especially if it is a function that can be use such as a link to another page. You can use the Alt Tree link in the sidebar to help determine what information is needed. 

Good rules of thumb for alt text: 

  • If it is a decorative image with no text, the alt text can be left blank. 
  • If an image contains text, summarize in the alt text such as for web banners of event information, the alt text is usually the title of the event, where it is and time it will take place
  • If you are linking from the image, alt text is required telling the user where the link goes

For example, consider the book covers used on the Southside Reads page:

A Woman is No Man: A Novel by Etaf Rum book cover with link to Goodreads description page
The picture has text and is a link to the GoodReads page so the alt text should look like:

alt="A Woman is No Man: A Novel by Etaf Rum book cover with link to Goodreads description page">

Sectio Aurea sculpture in Greenwood Library