Skip to main content
Pepperdine | Community

Web Images

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

 

 

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

Faculty Profile Pages

  • Faculty Image: 325x360 pixels

Community Announcements

  • Listing Image (thumbnail): 360x360 pixels
  • Images within article copy can follow standard page image grid sizes

Newsroom

  • Main Image: 550x550 pixels
  • Social Share: 1200x675 pixels
  • Images within article copy can follow standard page image grid sizes

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

  • 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.

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 Circle Crop

  • Image edges are auto croped into a circle, images should begin as squared.