Keep Up to Date

LibGuides automatically places a gray background color on any content added. On some monitors this background appears very light, and on other monitors, the gray is much darker. It is possible to remove the gray background from Rich Text/HTML boxes. To do so:

• In the Rich Text/HTML editor, click on source, and paste the following code as the first line of code: <div style="background:#FFFFFF;padding:5px 10px;">
• Paste the following code as the last line of code: </div>

In the edit version of your LibGuide, you will still notice a think gray line around the box, but in the live mode and preview mode, there will be no gray.

"Gray Scale" (CC BY-SA 2.5) by Tomás Castelazo

This LibGuide offers many photo and clip art sources. Always check for Creative Commons and Copyright licenses! 

Looking for UNC Images? Take a look at the UNC Image Library. 

UNC Logo files and UNC Libraries logo files will help you add branding to your LibGuides.

TinyPNG (https://tinypng.com/) is an easy method for compressing images. But do your images need to be compressed? TinyPNG also offers an analysation tool (https://tinypng.com/analyzer), that will analyze a webpage and determine if loading speeds can be increased if images are compressed.

Below is an example report of a LibGuide page that I loaded 3 images to without reducing the size of the image or compressing for a smaller file size.

The larger the image you upload to your LibGuide, the more load time the page will require, which can be a turnoff to users, especially mobile users. If you don’t want to change the size of an image, but need to reduce the file size of the image, you want to compress the image.

Check out these instructions for an easy method to compress PNGs and JPEGs.

Want to try it for yourself? Use this image.

Any time you want an image to appear more than 10% less than its original size Springshare recommends that you resize it before uploading it to LibGuides. Why? Larger images require more load time. So resizing images is important to make the LibGuide experience better for all students, but especially so for students using LibGuides on mobile devices.

There are many tools that can be used for resizing images. These instructions give a step-by-step tutorial using one of the easiest and quickest methods for resizing images.

Want to try for yourself? Download this image and try it!

Alt Tags are important for visually impaired students using a website. A screen reader will read the Alt Tag to the user, so make it as descriptive as possible, while keeping it as concise as possible. Easy, right? Well...

• Use the WAVE (Web Accessibility Evaluation Tool) http://wave.webaim.org/ to determine if the images in your LibGuides already have Alt Tags.
• If you have images without Alt Tags, add them. See instructions.