Working With Images

Modified on: Thu, Jul 24, 2025 at 1:21 PM

Working with images on a website does take a little bit of thought and planning, but you need not be an expert nor a professional photographer. The biggest thing to remember is consistency, if you consistently use rectangle photos (16:9) they will work well in most widgets and places on the website. If you are troubleshooting issues with images on your site then look below at the information provided.

Notes and Tips for images:

Widgets that display images like a Photo Gallery or Image widget will only allow you to pick (and upload) acceptable image file types (JPG, PNG, SVG).
File types like PDF are not acceptable image files and would not be available to choose (or upload) via such a widget.
It is recommended that most images be 1920 wide by 1080 in height (16:9 ratio) or larger and in JPG, PNG, or SVG format. While this size or ratio are not required, this recommended size typically works best.
Each time you upload an image, up to 5 reduced-size copies of the image are created (called thumbnails)
HEIC (Apple) Format is not accepted at this time.
Some widgets do not support images.
- For example, a Text Widget is strictly for text, you would not be able to upload an image into a text widget.
- Whereas a Photo Gallery widget is for images, when choosing images for a gallery, the system is not going to display invalid file types like PDFS to be selected.
Widgets that have an Image display options include but limited to: Image, Photo Gallery, Image and Text, List, Accordion, Slider, and more.
Avoid images with text in them. It is not SEO friendly, nor Accessibility compliant, not to mention hard to read on mobile, so in general avoid it. Post-card type images are great for print not for websites.
Always fill in the Alternative Text.

Why does my photo look cropped?

This is the most common question and issue when working with images on a website. There is nothing wrong with the website, it just may not be a great photo for where you are trying to use it. This is a responsive platform, and widgets like the Photo Gallery and Slider widget will need to zoom on the photo based on the space it is placed in, causing some of the photos to become cropped. This is done in order to get a best fit for the space and to display multiple photos in a consistent fashion. IF this were not done, you would either get "jumps" and or large empty spaces, when photos of mixed sizes/ratios are used.

The cropping is due to responsive design and inconsistent size or framing of subjects
- The system zooms to the middle of the photo to produce a best fit for the space in which the widget is placed.
  - In the example above, the photo is taller than it is wide (portrait), yet the Image Slider widget displaying the photo is in a rectangular (wider) space, mixed with other photos sizes.
  - IF the Slider were either narrower or in a narrow space, the issue goes away, but then other photos may not look as good in this space (hence do not mix portrait and landscape photos).
- Most widgets provide a built-in position selection option, which adjusts the focal point. Adjusting the position sometimes solves the problem.
- The photo below, is the opposite, it is narrow in height and very wide, so in this case some cropping from the left and right is happening as the system zooms in in order to fill a best fit for the photo to the space. While this photo may still work it may just not be a good choice or fit for this space.
- Whereas this photo is already relatively similar in shape to the space and less cropping is needed or apparent.
To avoid cropping ensure that photos are consistent in size, ratio, and subject. Typically landscape 16:9 photos work best (1920x1080).
Adjust the Position option when possible
Avoid mixing landscape and portrait oriented photos in the same widget
Some widget offer a "display full image" option, only use this if necessary as it can cause empty space around some photos. (not recommended)
Do not expect or force photos to work in all locations.
Understand not all photos will work in certain locations.
Ensure that there is enough space around the subject matter (like headroom)
When possible, review photos before uploading them, and if necessary, crop them offline first.
You can add edit a photo using the built-in editor, but that wont guarantee a perfect fit, but it can help with some photos.
- When editing, try to crop a photo to a consistent ratio like 16:9.
Remember that this is a public website only use photos that you want accessible to the world.
- Ensure if displaying students you have a photo release or waiver on file
- Do not include names of students with their photo when possible
- Do use photo of or with copyrighted materials in them like logos.
Always fill in the Alternative Text (Alt-Text)!