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

harry potter and friends run through the forest dressed in dark clothing

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

Characaters of the Harry Potter series walk through a dark forbidden forest

A News Article Featured Image displays between the date and the running body copy.

Size Recommendation: 943 x 500 at 72 dpi

A man stands wearing a black top while standing in front of a wall of bottled spirits.

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

woman stands in profile position smiling into camera

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 of medieval steeples atop castles under clouds

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

Sample images of Harry Potter characters in display of image cards
Sample image cards display of text

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 brick wall opens up to reveal a Harry Potter character while text wraps around the image.

A Single Image displays within running body copy but does not permit text wrapping.

Size Recommendation: 700 x 450 at 72 dpi

A collection of Harry Potter music is displayed across a tan plaque while text surrounds the image.

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

a closeup of an opened tan scroll while a pensits atop a desk acorss a booklet and glass of water with text encircling the images.

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

book covers positoned side by side illustrating the bookshelf

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