Recommended Images Sizes

It's no secret we love images and for websites, they are especially important. Images add visual appeal to a website and can make it more attractive and engaging. They can also help break up long blocks of text and make the content more digestible. Images can communicate ideas and concepts quickly and effectively. For example, an image can convey the benefits of a product or service more effectively than a block of text.

In our Drupal templates, there are different methods for adding images and we have recommended sizes and aspect ratios for the images you display.  Our templates also allow you to set the focal point for image, which is a great tool in helping your images display how you've intended.

 

Hero Image:

  • 2:1 aspect ratio

  • Landscape Orientation

  • 1600 x 800px (recommended minimum size)

The template does a good job of maximizing the image for the user’s screen, but we recommend using an image with at least a width of 1600px and a height of 800px.  The design is intended to use wide landscape images using a 2:1 ratio, rather than tall and thin profile images.

screenshot of drupal guide homepage
Hero/Banner Image 1600 x 800px recommended size

Card with Optional Image:

  • 2:1 Aspect ratio:

  • Landscape Orientation

  • 812px x 406px (recommended image size)

If one card is used in a Section (Custom Configurable Layout) the card will display 812px wide. For a single Card with Optional Image, we recommend an image in landscape orientation with a minimum width of 812px.  If two cards are used, we recommend at least 600px width, and with 3 or more cards 400px width is fine. 

screenshot of card with single image
Single column card: 812 x 406px

Card Teaser Display Image

1:1 ish Aspect Ratio

Square orientation

280 x 296px (recommended size)

The image will be placed to the left of the text in this card with the image taking up a max width of 280px. We recommend using a squarish image with a width of at least 280px.

screenshot of teaser card image
Teaser card display: 280 x 296px 

Event Image

  • 2:1 Aspect Ratio

  • Landscape orientation

  • 600 x 300px recommended size

This image is part of the Event content types and will be shown at the top of the page and for associated cards.

researcher
Event image: 600 x 300px

Image Embed Centered

  • Landscape orientation recommended
  • 812px recommended minimum width
engineer stands in large machine called a detector
Image embed: 812px recommended minimum width

Image Embed Centered Wide

Note: this image is displayed in full width on pages that do not have left hand navigation, otherwise it will display as wide as Image Embed Center

  • Landscape orientation recommended
  • 1240 px recommended minimum width
aerial photo of Stanford Research Computing Facility (SRCF)
Image embed wide: 1240px minimum width recommended

Image Overlap

  • Landscape orientation recommended
  • 1128px recommended minimum width
lcls researchers posing in group photo outside of LCLS building
Overlap image: 1128px minimum width recommended