June 3, 2016 | Jason O'Connell | firstname.lastname@example.org
Images and Your Website
Images, whether banner images or embedded within your page, are an excellent way to make your page pop and be noticed. This page details all you need to know about adding images and photos to your pages.
First up, we have some general things to keep in mind:
- Responsiveness: All of our webpage templates are designed to automatically display all your content properly no matter what size screen is being used to browse uwf.edu. However, this means there are some guidelines and restrictions about how and where you can place images in your content. Banner images are a special case, and images within the rest of your content must be properly sized and optimized (details down below), called in from the Media Library (details below), and any content type that supports images has a special field to pull them in from the Media Library. Never use the TinyMCE editor or any special code to bring images into your content. This will cause responsiveness and accessibility issues.
- Portrait vs Landscape Orientation: Sometimes referred to as vertically (portrait) or horizontally (landscape) oriented, this refers to the ratio of length to width of the image. Portrait images are taller than they are wide, and landscape images are wider than they are tall. Keep this in mind when choosing images to crop down into your content, many content types can support both to a point, but some such as Banners, will only support a landscape oriented image.
- Accessibility: Try to avoid using text within your images or graphics, but if you can't avoid it, make sure that text is in the description field when you upload to the Media Library (more details below).
- Quality: Ever see images that fuzzy or pixelated? That image may be improperly sized, something we go over in great detail below. But other times that image has poor quality to start. Try to start with the highest quality image you can (you can always shrink photos and retain quality, you can never enlarge them), for photographs this means using a DSLR over point-and-shoot or cell phone cameras, and always use the original source file whenever possible.
- Copyright: You can not pull an image down from Google Image Search and place it on your website. You must get permission from the owner, purchase it from a stock image website, or create the graphic or photograph yourself.
Uploading Images to the Media Library
- Click or tap the 'Content' menu at the top of T4, and then select 'Media Library'
- You will be presented with a hierarchy on the left, use the '+' symbols beside the folders to navigate to your appropriate area.
- Click or tap on the folder you wish to add an image to, and in the middle-top (under the word 'Browse') there will be an 'Add Media' button.
- Fill in these fields:
- Name: this is what you will see when searching or browsing for images.
- Description: *Extremely Important*, the description corresponds to the image 'alt' text, which is read by screen readers and absolutely necessary for accessibility concerns. If there is text in the image, that must be written out in the description. Otherwise, just briefly describe what the image is portraying.
- Media: Choose File: Select this to pull up a file browser and choose the image you plan to upload from the computer.
- Click or tap 'Add'.
Pro-Tip: You can upload over an existing image if you made an edit to size, image content, etc. and not create a whole new entry. Find the image you want to replace, select 'Advanced', then 'Modify', and choose a new file. This has the benefit of helping to keep your Media Library folders clean and uncluttered, and provides an image version history for you to fall back on if needed.
Image Quality and Size
DPI/PPI, size, resolution, file-size, what does it all mean?
- DPI/PPI: This stands for Dots per Inch or Pixels per Inch, and resolution is the unit of measurement for this image setting. Typically, print images are set for a resolution of 300 to ensure high quality results. For the Web, however, we recommend a resolution (or DPI/PPI) of 72. The higher the resolution, the higher the file-size and quality of the image. Setting a DPI of 72 strikes a good balance between quality and file-size for the web.
- Size: Size is often measured in pixels (px), for example we require standard banner images to be 880 pixels wide by 495 pixels tall. This is not resolution. This is the physical (or virtual) dimension of your image, and this also contribute to file-size.
- File-size: How much space an image takes up on your hard drive, web server, or temporary internet cache. This is measured in kilobytes (kb), or for large images, megabytes (mb). File-size needs to be as small as possible (again, striking a balance with quality) for a couple reasons. The first is page loading times. The bigger the file-size, the longer the page will take to load, and the more frustrated your visitors will be. The second is data plans. Mobile, and now increasingly home broadband, is data capped, meaning every web page, download, stream, etc. a visitor comes across counts towards their allotted data for the month. Keeping file-sizes small saves data.
How do you keep file-size down? Resize your images to the proper dimensions (in pixels), and turn the quality to 72 DPI or PPI. Images straight from your camera, especially modern ones, are massive, for example images from our campus photographer start at 7360 x 4912 px, 15 mb, and start at 300 DPI by default. You *must* run your images through an editing program to optimize them for the web. A properly optimized landscape oriented image for a ' General Content' section should be 315 x 176 px, around 100 kb, and be 72 DPI.
There is an abundance of image editing software available, some are free, some must be paid for, some are incredibly powerful and others are very simple and basic. Which one should you choose?
We won't go into every option out there, but here are some of the more common choices on-campus:
- Adobe Photoshop: Photoshop is the gold standard in the creative world for image manipulation and editing, however it is now currently only available as a monthly subscription. If you have the resources we highly recommend using Photoshop for your image editing needs as it can handle everything you might need. If you do not have a subscription, Photoshop is available for use on certain computers in the Library Skylab.
- GIMP (GNU Image Manipulation Program): Free and open-source, GIMP is often described as Photoshop-lite. It isn't as powerful, but is a very good option for many of the common tasks you'll need when preparing images for the CMS. It is available for Windows, OS X, and Linux, download at gimp.org.
- Terminal four Media Library Variants: We do not recommend you utilize this tool within the CMS, as it heavily degrades the quality of your image.
- Microsoft Paint: Automatically installed with any version of Windows, Paint can resize, scale, and crop in a pinch.