Images + Video

Image PREPARATION

Things you should know:

  1. Plan ahead how you will use your images and video on the web.
  2. All images need to be prepped for height/width dimensions and image resolution.
    • Images that are too small will be blurry and pixelated.
    • Images that are too large (over 750 K)  will CRASH THE WEBSITE!
  3. The CED website is a responsive design. This means it will resize your images to fit the device or browser. So the image width should start at the largest standard size that can be viewed in a browser. The program will correct for smaller devises.
  4. You CANNOT INCREASE the image dimensions in Photoshop or another photo editor. This will cause the image to pixelate and become blurry.
  5. If an image is smaller in width than 200 pixels, or less than 72 pixels-per-inch in resolution, it will not work on the CED website as a responsive image.  If you have no other image options, post the small image at its original dimensions and float it to the left or right in the text.

Height/Width Dimensions (jpeg or png)

Image Size Intended Use
Full-width page images Ideally 1400 pixels wide; not less than 1200 pixels wide (72 dpi)
Left- or right-float images Minimum 400 pixels wide, up to 1400 pixels wide (72 dpi)
Events images Between 200-400 pixels wide (72 dpi)
Gallery images Ideally 1400 pixels wide; not less than 400 pixels wide (72 dpi)
Syndicated "feature-box" slideshow images Ideally 1000 pixels wide by 650 pixels high (72 dpi)
Syndicated home-page slideshow images 16:9 aspect ratio (1.78:1) (72 dpi)

Aspect Ratios

Most images posted on the website need to be sized according to width only. However, images intended for syndication in the home-page slideshows and in "feature" boxes need special cropping according to different aspect ratios.

  • Images for display in the home-page slideshows will be cropped automatically to a 16:9 (1.78:1) aspect ratio. If you intend to post an item in a slideshow and do not want to lose image content, you should manually crop the syndication image to fit this ratio.
  • Images for syndication in feature boxes will not be automatically cropped, but ideally should have a "landscape" orientation, rather than a "portrait" orientation, so that the box frames are sized appropriately. Acceptable aspect ratios of images for feature-box syndication are:
    • 5:3 (1.6667:1)
    • 3:2 (1.5:1)
    • 1:1 (square)

To crop to an aspect ratio, determine whether you want to maintain the full width or height of the image.

  • To maintain full image width, divide width according to aspect ratio and crop height to quotient.
    Example: To crop to the 16:9 home-page slideshow aspect ratio maintaining the image's full width, divide the width by 1.78 and crop the height to the resulting number.
  • To maintain full image height, multiply height according to aspect ratio and crop width to product.
    Example: To crop to a 5:3 feature-box aspect ratio maintaining the full image height, multiply the height by 1.6667 and crop the width to the resulting number.

Image Resolution

All images posted on the website must be 72 pixels per inch in resolution. Photoshop's Save for Web and Devices option correctly converts images to this resolution. ALWAYS prep images using this feature, if possible; if you are using another image editor (without this function) you will need to manually adjust the image size and resolution.

WARNING: Posting a high-resolution image (greater than 150 pixels per inch) on the CED website may cause the website to crash.

Filenaming Standards

Image filenames should include relevant descriptive information such as subject name or title, author/photographer's name, and date where applicable. See Filenaming Guidelines for further information.

Adding Images to Page Content

To add an image to a regular content page on the CED website, select the "Templates" button from the content-editing buttons menu, then uncheck the "Replace actual contents" box unless you are building a page from scratch (all page content will be removed), and choose a formatting style.

Templates screen capture


Next, remove the image's height and width values.

Image insert screen capture


Then modify the caption and other text inserted by the template. For images without captions, remove the "<figcaption></figcaption>" code segment from the source code.

Image Style Examples

LEFT FLOAT Image NO Caption with Text Wrap
Photograph

Duis eu sed laboris dolore nulla eiusmod officia consectetur sed culpa eu sed consectetur commodo enim et reprehenderit culpa id Duis elit aute sint eiusmod elit mollit velit minim sed commodo ex exercitation mollit dolore dolore dolor aliquip dolore consequat elit esse Ut cupidatat dolor Ut commodo fugiat ut eiusmod exercitation incididunt incididunt ea Excepteur sint proident aute pariatur mollit deserunt sed velit veniam esse amet aliqua amet ut sed non id sint elit do aute reprehenderit commodo ullamco elit ea nostrud do elit Ut non laboris commodo ea elit est qui dolor quis pariatur ad velit ad labore nulla reprehenderit non culpa officia dolore nostrud sunt anim aliquip et nostrud Excepteur consectetur cupidatat nulla culpa culpa voluptate minim nostrud voluptate occaecat est in incididunt do pariatur quis nulla dolor exercitation Ut aliquip sit do labore eiusmod deserunt ullamco sed reprehenderit in dolore consequat ullamco aute aliqua nulla consectetur sit aliquip in pariatur officia.

Code: Left Float with Text Wrap

<figure class="left-wrap">
<img alt="Photograph" src="/images/uploads/content/piano.jpeg" />
</figure>

Right Float Image with Caption and Text Wrap
Photograph

Photo: Some Person

Duis eu sed laboris dolore nulla eiusmod officia consectetur sed culpa eu sed consectetur commodo enim et reprehenderit culpa id Duis elit aute sint eiusmod elit mollit velit minim sed commodo ex exercitation mollit dolore dolore dolor aliquip dolore consequat elit esse Ut cupidatat dolor Ut commodo fugiat ut eiusmod exercitation incididunt incididunt ea Excepteur sint proident aute pariatur mollit deserunt sed velit veniam esse amet aliqua amet ut sed non id sint elit do aute reprehenderit commodo ullamco elit ea nostrud do elit Ut non laboris commodo ea elit est qui dolor quis pariatur ad velit ad labore nulla reprehenderit non culpa officia dolore nostrud sunt anim aliquip et nostrud Excepteur consectetur cupidatat nulla culpa culpa voluptate minim nostrud voluptate occaecat est in incididunt do pariatur quis nulla dolor exercitation Ut aliquip sit do labore eiusmod deserunt ullamco sed reprehenderit in dolore consequat ullamco aute aliqua nulla consectetur sit aliquip in pariatur officia.

CODE: RIGHT FLOAT WITH TEXT WRAP

<figure class="right-wrap">
            <img alt="Photograph" src="http://ced.berkeley.edu/images/uploads/content/Pixel_That!_Photography-124.jpeg">
            <figcaption>
                <p>Photo: Some Guy</p>
            </figcaption>
        </figure>

CENTERED Image w/ Caption
Photograph

Photo: Some Person

<figure class="centered">
            <img alt="Photograph" src="http://ced.berkeley.edu/images/uploads/content/piano.jpeg">
            <figcaption>
                <p>Photo: Some Guy</p>
            </figcaption>
        </figure>

Full Width Image w/ Caption
Photograph

A GIANT Image

<figure class="full-width">
            <img alt="Photograph" src="http://ced.berkeley.edu/images/uploads/content/mud_11_settle-jennifer_2.jpeg">
            <figcaption>
                <p>A GIANT Image</p>
            </figcaption>
        </figure>


LEFT FLOAT Video WITH TEXT WRAP

Video: Max Richter - Fragment

Duis eu sed laboris dolore nulla eiusmod officia consectetur sed culpa eu sed consectetur commodo enim et reprehenderit culpa id Duis elit aute sint eiusmod elit mollit velit minim sed commodo ex exercitation mollit dolore dolore dolor aliquip dolore consequat elit esse Ut cupidatat dolor Ut commodo fugiat ut eiusmod exercitation incididunt incididunt ea Excepteur sint proident aute pariatur mollit deserunt sed velit veniam esse amet aliqua amet ut sed non id sint elit do aute reprehenderit commodo ullamco elit ea nostrud do elit Ut non laboris commodo ea elit est qui dolor quis pariatur ad velit ad labore nulla reprehenderit non culpa officia dolore nostrud sunt anim aliquip et nostrud Excepteur consectetur cupidatat nulla culpa culpa voluptate minim nostrud voluptate occaecat est in incididunt do pariatur quis nulla dolor exercitation Ut aliquip sit do labore eiusmod deserunt ullamco sed reprehenderit in dolore consequat ullamco aute aliqua nulla consectetur sit aliquip in pariatur officia.

Lorem ipsum eu ex incididunt laborum exercitation minim do nostrud reprehenderit sunt labore velit quis Excepteur elit fugiat mollit est culpa velit laboris cupidatat pariatur consequat culpa dolore anim deserunt tempor occaecat ut velit ut culpa incididunt veniam adipisicing deserunt cillum quis et in minim aliquip cupidatat voluptate velit in adipisicing laborum incididunt velit et aliquip ullamco proident aliqua sint in dolore ut consectetur laborum dolore tempor id dolore esse Excepteur exercitation ex do in minim laboris elit ut dolor reprehenderit elit non amet tempor qui ut mollit consectetur voluptate dolor irure mollit consectetur nostrud ullamco Duis nostrud culpa ea magna magna deserunt minim pariatur adipisicing dolor amet sit sint nulla eu cillum fugiat nulla in sit fugiat pariatur do dolore minim Ut voluptate aliqua adipisicing officia ut velit aliquip adipisicing pariatur magna commodo occaecat sed adipisicing deserunt nulla qui nulla ut in dolor nostrud officia labore pariatur tempor non nisi do enim reprehenderit eu fugiat reprehenderit adipisicing eiusmod anim non tempor est eiusmod dolor minim dolore incididunt et ad aliqua.