Web Images

The following information is for the newer version of Pepperdine websites redesigned between 2018-2019.

See old web image guide

 

Saving Images

Images used on websites should be optimized for the fastest page speed without compromising the quality. See our guide on how to save images for web.

 

Image Sizes

Image widths should align with the site grid system. Suggested heights are given for universal standards, but can be custom cropped as needed.

Standard Pages

  • Impact edge-to-edge: 1440 x 430 pixels
  • One Column Full: 1120 x 525 pixels
  • Two Column Full: 886 x 415 pixels
  • Three-quarters: 835 x 440 pixels
  • Two-thirds: 740 x 370 pixels
  • Half: 550 x 355 pixels
  • Third: 360 x 240 pixels
  • Quarter: 265 x 265 pixels

Blog Posts

  • Featured Image (thumbnail):
    360 x 240 pixels
  • Full-Width Image (inside post):
    820 x 410 pixels

Homepage

  • Featured Event Image: 740 x 334 pixels
  • Impact Image (desktop): 1440 x 960 pixels
  • Impact Image (mobile): 768 x 615 pixels
  • Slideshow Images (desktop): 1800 x 550 pixels
  • Slideshow Images (mobile): 600 x 500 pixels

Image Style Options

To add an image style make sure the image is surrounded by a paragraph. Then on the paragraph click on the "Styles" dropdown and select one of the following options:

Image Default with Border

  • Image is on its own row no text wraps around it.
  • A small border is added around the image.

Image Left with Border

  • Image aligns to the left of the content, the text wraps around the image.
  • A small border is added around the image.

Image Center with Border

  • Image aligns center on its own row.
  • A small border is added around the image.

Image Right with Border

  • Image aligns to the right of the content, the text wraps around the image.
  • A small border is added around the image.

Image Default

  • Image is on its own row no text wraps around it.

Image Left

  • Image aligns to the left of the content, the text wraps around the image.

Image Center

  • Image aligns center on its own row.

Image Right

  • Image aligns to the right of the content, the text wraps around the image.