Wagtail Image Uploading Guide

This guide is all about using new images for the website:

• Optimize images for Wagtail - You'll need to process your images before uploading to make sure they're the correct size.
• Upload to the Wagtail Image Directory - Upload and attach metadata to images that can be used through the cms.

Making sure our images are correctly categorized and optimized is crucial to ensuring a healthy cms and user experience, both for cms editors and front-end users.

Filenames

Filenames help a lot, not only with human eyes (I joke) but also with search engines, making them easier to find. We have some basic rules for naming images, see Nikol's documentation on filenames to learn more.

Bare minimum

• Current year
• Your initials

Examples

• mfa_thesis_exhibition-photo001-2025-JRL
• dmba_student_written_story-thesis_work_image1-11_05_2025-JL

Metrics and target goals

We need the image to be small, otherwise it takes forever to load on people's phones (and then they won't come to CCA!!!) While there are plenty of ways to optimize images for specific use cases, this generally fits all our needs.

Image size:

• Width: 2560px
• Height: variable

File size:

• Target: 750kb
• Minimum: 500kb
• Maximum: 1024kb / 1Mb

Software methods

Photoshop

1. Open file in photoshop
2. File > export for web > save as jpeg
3. Adjust image dimensions sliders
4. Adjust image quality slider
5. Save and export

Canva

1. Open a blank template at the desired aspect-ratio
2. Import image
3. Export "design" as jpg

Image Metadata

It's important to add additional data to our image items so we can easily identify them later and display information to the user.

Collection

Root will always work as an option, but if you could be more specific, that would be awesome. Just take a look at the dropdown and make the best decision.

Tags

Kinda a free-for-all, but we at least like to add the date (month-year) and other things that seem "obvious."

Alt Text

This is incredibly important! Not only are we legally required to provide alt text for each image, but many users depend of this to help navigate and understand the site. It also helps with SEO and AI bots.

• For help writing alt text, Google "How to write good alt text"

Credit

Another legal, but helpful, field every image needs. Here are some examples:

• Photo by Nicholas Lea Bruno/CCA.
• Photo by Francisco Ramos.
• Courtesy of the Artist/Student.

How to upload and categorize images

1. Navigate to the Wagtail Image library
2. Add "add an image" at the top
3. Select any preset fields (such as collection) to be used for uploaded items
4. Drag-and-drop your image file(s)
5. Edit additional fields for each image and click update
6. Use your images on Wagtail pages!