Image Optimization
Definition
Image optimization is the process of adjusting an image to achieve the best resolution for your platform and content container and to ensure accessibility without losing image quality. Meeting these goals has the added benefit of boosting search engine result rankings.
Usage
The size of an image has a profound effect on webpage loading time; slow page loads are a turn-off to users. To avoid performance issues and maintain optimum image quality, follow these guidelines:
- Use the appropriate image format, e.g., png, jpeg, svg, etc.
- Do not upload images with a resolution higher than 72 dpi.
- Images should not exceed 2000 x 2000 pixels or 1MB in size.
- Add meaningful, descriptive alt text to all images.
- Use descriptive text or keywords in file name to improve SEO.
Need free images? Visit the Columbia Photo Library.
Image File Names and SEO
Image file names are important search engine optimization opportunities; this includes the content management system (CMS) folder structure because the folder names are part of the image URL.
Use images to drive traffic to your site and improve search engine results rankings:
- Plan the folder structure. Folder names should include keywords while also helping your team locate images in the CMS
- Keep file names under 50 characters and choose the most important features, focusing on three elements:
- type of photo (horizontal, landscape, portrait, illustration, headshot)
- location (interior, exterior, campus, manhattanville)
- person or object within it (scientist, student, speaker, building, snow)
- Do not include special characters, photo credit, date, or photographer name (unless it’s a keyword), articles and prepositions (“the,” “an,” and “of”)
Specifications
Columbia Sites recommends following the specifications for content types on the platform:
Specifications by Content Type
A Hero is a large, horizontal image that appears at the top of a webpage.
Size Recommendation: 1400 x 456 at 72 dpi
A Featured Image, or Featured Content, appears at the top of the page and bleeds off the edges of the page.
Size Recommendation: 1400 x 456 at 72 dpi
A News Article Featured Image displays between the date and the running body copy.
Size Recommendation: 943 x 500 at 72 dpi
Images on Person Profile pages consistently boost search engine result rankings across the columbia.edu domain. Don't ignore this important opportunity to maximize SEO. Only use high-resolution, professional-quality images, especially for faculty, who profile pages draw significant traffic to school, department, and lab websites.
Size Recommendation: 400 x 400 at 72 dpi
Image Carousels are a display of rotating images used to tell visual stories and augment or illustrate body copy. This container is somewhat flexible, but see our recommendation below.
Size Recommendation: 594 x 500 at 72 dpi
By default, the Image Carousel height is set to 500 pixels. If the carousel height is set to 600, images should be at 594 x 600.
Image Cards are bounded page elements that give primacy to an image uploaded by the content manager. They are available only on Landing Pages, the width of which is 1170 pixels, divided into a 12-column grid.
The grid can be adjusted to use only one/12 of the grid or all 12. The number of cards used can also be adjusted. The default Image Card width is 4 or 33.3% of the grid. Four Image Cards at the default width would then spread evenly across all 12 grid spaces.
To ensure all Image Cards are the same size, they must share the same height, width, and resolution (dpi).
Size Recommendations: 250 x 250 at 72 dpi
An Inline Image appears within running body copy and allows text to wrap around the image. The image can be centered, left-aligned, or right-aligned. This container is very flexible. The maximum width is 750 pixels at 72 dpi, but if the image is less than 300 pixels wide, text will wrap.
Size Recommendation: 300 x 300 at 72 dpi
A Single Image displays within running body copy but does not permit text wrapping.
Size Recommendation: 700 x 450 at 72 dpi
Sidebar Images appear only within the Sidebar content type; however, Sidebars are available on:
- Basic Page
- News Article
- Research Project
- Service
- Bookshelf (Services With Images)
Size Recommendation: 300 x 200 at 72 dpi
Bookshelf, also called Services with Images, allows for a grid display of book jackets that can all be landscape or portrait orientation (but not both).
Size Recommendations: 286 x 432 at 72 dpi
Image content type is a stand-alone container that only populates the Gallery content type. Use Image and Gallery to enhance visual storytelling.
Size Recommendation: 500 x 333 at 72 dpi
