UPDATED on April 12, 2018
Summary: images that comply with recommended pixel dimension and resolution result in a more seamless display, faster load times and a generally better viewing experience across all platforms (desktop, tablet, mobile).
Image editing software and knowledge of pixel dimension is typically required in order to prepare images for optimal display.
Recommended Pixel and Resolution Sizes
- Image Slider
- Content Slider
- Breadcrumb Image
- Hero Unit
- Image Block
- News Feed
- Page Banner
- Additional Image Sizes
Image Slider
Homepage Image Slider
- Description: Custom rotating image slider on LCC Website Homepage. Features image, text box and click function.
- Use: LCC Website homepage only. Available to Level 10 Administrators only.
- Size: 2300 px wide x 1200 px tall, not to exceed 500 KB
Interior Page Image Slider
- Description: Pre-styled auto-rotating image slider on any interior page. See Sliders for complete description
- Use: Any interior web page. Available to all web editors.
- Size: 1600 px wide by 600 px tall, not to exceed 400 KB. (Smaller sizes can be used, ie: 900 x 450, 850 x 350, as long as all the images in the slider are the same pixel dimension)
- Examples
*Page display (no sidenav). No part of the image is cropped.
**Page display (with sidenav). Image cropped slightly on left and right to accommodate
content area.
Content Slider
- Description: Pre-styled slider that rotates on click. The layout of images, text, icons and buttons can be customized inside the slider using snippets. Typical layout features two-columns, with image on left, and text, links, icons or buttons on right. See Sliders for complete description.
- Use: Any interior web page. Available to all web editors.
- Size: 900 px wide by 600 px tall (when used in two-column layout).
- Examples
Breadcrumb Image
- Description: Image that appears in breadcrumb (title) area at top of page. Image is overlaid with a blue filter. Default HSB image applies unless changed. Visibility is dependent upon title text, screen display size, and custom breadcrumb settings.
- Use: Any interior web page. Available to all web editors.
- Size: 2300 px wide x 1080 px tall, not to exceed 500 KB.
- Examples
- Class Schedule - seasonal artwork rotates quarterly
- Programs of Study - custom breadcrumb appears
- Community Conversations - image of Rose Center
Note: Breadcrumb images are much larger than the actual title area because the image also floats behind the blue title bar at the top of the page as well as expands depending on custom breadcrumb options. Expect all around cropping. Images with faces tend to cause issues with head placement within viewable areas as well as appearing behind the title text.
Hero Unit
- Description: Pre-styled header image with custom text fields that can be used at the top of any page. See Hero Unit for complete description.
- Use: Any interior web page. Available to all web editors.
- Size: 750 x 430 px not to exceed 200KB
- Examples
Image Block
- Description: Pre-styled box for face/head shot typically used to feature a list of people. Text area accommodates, name, title, contact, etc. Attractive gray shadow surrounds box.
- Use: Any interior web page. Available to all web editors.
- Size: 300 px wide x 400 px tall, or 450 px wide by 550 px tall for typical head shot.
- Examples
*Placeholder image available in the case where a head shot is not available.
News Feed
- Description: image that accompanies any News & Noteworthy items that appear on LCC Website homepage.
- Use: LCC Website homepage only. Available to Level 10 Administrators only.
- Size: 400 px wide by 220 px tall
Page Banner
- Description: single image at top of any web page. Long narrow format recommended to maximize above the fold area.
- Use: Any interior web page. Available to all web editors.
- Size: recommended long narrow format such as 900 px wide by 300-340 or 400 px tall
- Examples
Additional Image Sizes:
In page images should be sized according to the column they display in. A full page (with sidenav turned off) is 1200 pixels wide. A full page (with sidenav turned on) is 900 pixels wide. Other typical column layouts are 9 and 3.
- col-md-12: 1200 px wide
- col-md-11: 1100 px wide
- col-md-10: 1000 px wide
- col-md-9: 900 px wide
- col-md-8: 800 px wide
- col-md-7: 700 px wide
- col-md-6: 600 px wide
- col-md-5: 500 px wide
- col-md-4: 400 px wide
- col-md-3: 300 px wide
- col-md-2: 200 px wide
- col-md-1: 100 px wide