Images
Image Selection
Photography is a key component in a successful website relaunch. In general, the photography style should be clean, bright, and colorful with natural lighting, a genuine feel, and optimistic attitude.
Photos can be broken down into four categories: Academic, Campus Life, Portraits, and Campus Environment.
- Academic photos should show individual students pursuing their passions, student/faculty collaboration, and engaged classroom learning.
- Campus life, co-curricular, and extracurricular activities photographs should capture the college experience outside of the classroom. From athletics to fine arts, leadership, and community engagement - you will want to use images that define the culture and distinguishing characteristics of UT Tyler.
- Portraits of students and faculty used for spotlight stories or testimonials can be featured in a variety of communications.
- Campus environment photography should highlight the student experience within UT Tyler’s unique architecture and the surrounding campus environment. Shots should be wide and expansive, with multiple individuals socializing, studying or moving through the spaces.
Responsive Design and Image Cropping
The responsive design system adapts how images are rendered on different size screens and across different types of devices. The image dimensions and ratios listed below are required for the HTML but will not always be the exact dimension/ratio in an image that appears. That is, the system will automatically crop images to fit the design across screen sizes.
The front-end code will always maintain a focal point in the center of each image. Because the center of the original image will always be in the center of what is displayed when rendered on the web, centered images are preferred.
Recommended Image Dimensions
| Component | Dimension + Ratio |
|---|---|
| Hero Videos CTA Panel |
1600 x 900 - 16:9 |
| Home Student Stories Carousel Hero Images |
1600 x 600 - 8:3 |
| Feature Panel (All Variations) Visual Router Grid Testimonials Router List w/Image Optional Announcement News Listing College Landing 3-Up |
900 x 900 - 1:1 |
| Home College Image Carousel Full-Width Image Image Carousel |
1200 x 800 - 3:2 |
| Featured Event Listing | 800 x 400 - 2:1 |
| Tab Section Inline Image | 500 x 400 - 5:4 |
| Faculty Headshot Program Finder Tiles |
200 x 200 - 1:1 |
| News Hub Hero Feature | 300 x 400 - 3:4 |
Image Optimization
Ensuring your images are the correct dimensions is the first step in providing optimal images for your website, but it’s also important to consider the file size of each image. Since each image is a file that needs to be downloaded by the browser, the smaller those files are, the faster they will appear on the page (and thus, the faster your page will load).
Once your images are sized appropriately, taking one more step to optimize them for the web can significantly improve the user experience. There are many online and downloadable applications that can automatically optimize your photos without significantly affecting image quality. Here are a few that we recommend: