Image Best Practices

Next-Gen CMS creates an array of images from every one uploaded, then serves the best size based on the screen width request, so starting with an optimized image of a large size will serve the best image to the most users.

Recommended image sizes by content type / component: 

  • Built-in Builder Page Hero, Display Banner Component (full width), Slideshow Component (full width), Tandem Component (float): minimum 1600×900, preferred 2400×1350
  • Display Banner Component (less than full width), Slideshow Component (less than full width), Tandem Component (fade or basic): minimum 1200×675, preferred 1600×900
  • News Content Type: minimum 1200×675, preferred 1600×900
  • Card Component: minimum 1200×900, preferred 1600×1200
  • Person Content Type (when overriding image field from Directory): minimum 1200×1200, preferred 1600×1600

Naming Your Images

All images should be saved in a "kebab case" naming style as a .jpg (photographs) or .png (illustrative), with no spaces in the title and descriptive file names. For example, an image of Love Library could be called "love-library.jpg" or, if possible, with even more specific details like "love-library-cupola-night.jpg" or "love-library-north-commons-winter.jpg". 

Optimizing Your Images

Additionally, all images should be run through an image compression processor prior to uploading. Two free online applications are Squoosh and TinyJPG.