Using Images

We get a lot of questions about how to use images on the web. What size they should be? What dimensions? We have a few general recommendations and some tools to help you out!

Both CU Denver and CU Anschutz have digital asset systems to provide quality images that a university approved. 

• CU Denver approved images are provided through Brandfolder. You can request an account here.  
• CU Anschutz approved images are provided through Image Relay. You can request an account here. 

You can also use free stock images. Here are some of our recommendations: 

• Unsplash
• Pixabay
• PicJumbo

Accepted file types

Sitefinity accepts the following file types webP, .gif, .jpg, .jpeg, .png, .bmp, and .svg

Now that you have your images, the next step is to optimize them! When we optimize images, we're trying to make the image as small as possible, while sacrificing as little image quality as possible. There are three main tools we currently recommend. You may like one more than the other depending on whether or not you have to optimize many images (batch) or just a few.

ImageOptim (Mac)

If you need to optimize many images, we like ImageOptim if you're on a Mac OS. It allows for batch image optimization as we mentioned, and it's very easy to use. You just download the program, and then drag/drop images to optimize them. It's that simple. Here is a two-minute video tutorial for ImageOptim.

TinyPng (PC)

Options for the PC platform are plentiful, but we like TinyPng. There's no need to download software for this option, but there's also no way to adjust compression levels, so you're a bit limited. But it is drag/drop and very easy to use!

Squoosh

An impressive new option we like is called Squoosh. It comes from Google and it works on both Mac and PC. Just like TinyPng it is a browser application, so no download is necessary. Like all the other options on this page, it is free to use.

Although Squoosh doesn't allow you to optimize multiple images at once, it offers a real-time preview to see how your settings affect your image before committing. It also allows you to resize the image too!

Use Recommended Image Sizes

The following image sizes represent the maximum size an image should be in various contexts for optimum page load times. Users should not exceed the maximum of either recommended height or width. In some cases, an image orientation is also recommended. 

Images smaller than the recommended size will load faster, but the image fidelity and/or layout may be compromised with image pixelation or the image may not display at full width of the widget. These height and width values represent the largest possible display size of each on the page.  

Name the image file correctly

---

So, you have your high quality images in the right size. Now you it's time to upload right? Not quite. Before uploading your image into Sitefinity, you need to rename the image file to something that describes the image. When the file is named correctly, it will autofill the image title and alternative (alt) text. This is mainly for accessibility and can help increase your search engine optimization (SEO). 

What's a correct way to name a file? Look at the image below.

Originally, the image was named IMG_001. Instead of uploading with that file name, you can change the name to be more title and alt text friendly, like "Golden retriever puppy laying in the grass." 

Upload Images

You done all the work to name, size, and optimize your image(s). Now it's time to upload them: 

1. Go to the Content tab at the top of the Sitefinity dashboard.
2. Select Images.
3. Click Upload images.
4. Select images from your computer or drag and drop them from your computer.
5. Choose the library you would like to store the image(s) in. 
6. Publish.

Libraries are like folders for your images and should be used to organize your images. Learn more about libraries.

Display Images

You are ready to use your images on you pages! In order to display your images, open the page in edit mode and choose the media widget you would like to use. If you are not sure which widget to use, the image widget is a good place to start. 

Accessibility

You need to ensure that the way you use images is accessible to all users. Review the accessible images resource to learn more.

Ask yourself: Do I really need to use this image?

Many times, simple text is better. If the image doesn't help convey your message, you may not want it taking up space (and load time) on your page. You may think the image looks nice, but most people don't come to your site to admire your artistic aptitude. People come to your site to accomplish a task or quickly gather information. Get to the point.

If your image is necessary, make sure your dimensions aren't unnecessarily large. Don't use an image that is 2000 pixels wide when it will only occupy a space of 200 pixels on your page. Aim to make your image dimensions no larger than they have to be. You can find more information about recommended image sizes here. 

Do not use text in your images. Ever. This is not accessible for screen reader users. If that text really is important, you're better served by search engines when you actually type that text on the page. Also, when that image scales down on a mobile device, that text becomes unreadable.

No image on your page should be heavier than 200kb. Even the largest images on your page can be kept around 200kb after using the optimization tools listed below.