Images

Images are used in different ways for different audiences. Images in content for scientists and CERN people should be used to illustrate and clarify, whereas images for the public, students and educators should be used to inspire and drive a desire to learn more about a topic.

Finding images

Contact the Visual Media Office in building 510 for photo requests to CERN's official photographer. They may take bespoke pictures for your story, or point you to existing images on the CERN Document Server, which holds images suitable for many CERN stories. 

If you cannot find what you are looking for on CDS, contact your group leader for permission to use group money to purchase images from a service such as Reuters or Getty

Inline, background and content images

Images are used in a variety of ways on the website:

Images in updates

This screenshot shows two types of images. At the top of the screen is a background an image that serves as a texture and to inspire wonder. The main image used in this update for the public is designed to draw the reader in, to want to find out more.

Updates on mobile devices

Note how the same update appears on mobile devices - the image is now a key leader into the article. The texture behind the navigation has much less prominence at mobile sizes.

Images in views

Lists of content will often feature smaller thumbnail versions of images. It is a challenge to select images that perform well both in these small formats and when seen at larger sizes.

Significant updates

Significant stories sometimes warrant a more interruptive presence on the homepage. Images for such stories must be carefully prepared in advance and be extensively tested before being published.

Formatting images for use on the CERN website

The CERN website is responsive: it looks and behaves differently according to the size of the viewport. Navigation on a smart phone, for instance, is more compact than the navigation that will be shown to users with larger screens. This poses a particular challenge for those selecting and formatting images for the CERN website. File size is an additional consideration: we want to make sure that the website loads as quickly as possible and correctly compressing images can help greatly in this.

Here are some guidelines, but note that not all images are the same and good judgement should be applied in each case.

jpeg, png, gif?

Use this rule of thumb:

  • Photographs should be compressed as jpg
  • Images such as logos that feature blocks of solid color should be compressed as png

Size

When you upload an image to the CERN website it will be processed and a variety of smaller formats will be automatically generated. For the input file we want large images in terms pixel width but small file sizes. Ideally images should be:

  • Larger than 1440px wide at 72dpi
  • Smaller than 200kb in file size

Homepage images (for use in significant updates, for instance) should be at least 2500 pixels wide.

Aspect ratio

Please use landscape-orientated images wherever possible with an aspect ratio of around 4:3 (so an image 1400px wide needs to be around 1050 pixels high).

Photoshop tip: large it, compress it

When using Photoshop to compress images in jpeg format, try and keep very large images with a very high compression. This allows the browser to resize images and gives a good balance of quality versus file size when the image is displayed within the theme.

Inserting inline images

You may use images as fields or inserted inline. Here's what this means:

  • Images attached to fields may be used in a variety of displays and formats - updates, for instance, can display a large image on the article itself and a smaller thumbnail view when seen in lists such as search results
  • Images inserted inline into content form part of the flow of the content. They cannot be extracted and shown in different contexts. Keep inline images to a minimum.

When inserting images inline, Drupal offers the option of setting the image's size. Remove all size references to allow the site to correctly determine the display of images across a range of device types.

Display options for inline images

You can align inline images in several different ways on the CERN website. 

To see the effects of this markup, see http://home-dev5.web.cern.ch/about/updates/2014/03/testing-new-content-css

Breakout left

Pulls an image out of the flow to the left

<figure class="breakout-left">

            <a href="#">

                        <img alt="" src="http://home.web.cern.ch/sites/home.web.cern.ch/files/u4/conference.jpg" />

            </a>

            <figcaption>

            Head of CERN’s Medical Application Programme, Steve Myers addresses the ICTR-PHE conference in Geneva, Switzerland (Image: CERN)

            </figcaption>

</figure>

Video

Mark up a video using <figure>, remove any protocol (e.g. http: or https:) up to the double slash at the beginning of a URL, and add the code ?rel=0 at the end of any Youtube link

<figure>

<iframe width="100%" height="400" frameborder="0" src="//www.youtube.com/embed/ebH7DKoxX_s?list=PLAk-9e5KQYEqdW9xuRMYPgnlz0RFsoyDK&amp;cc_load_policy=1&amp;?rel=0" allowfullscreen></iframe>

<figcaption>(Video: Noemi Caraban Gonzalez)</figcaption>

</figure>

Breakout both

Gives you a large image that spans the whole width of the page

<figure class="breakout-both">

<a href="#">

            <img alt="" src="http://home.web.cern.ch/sites/home.web.cern.ch/files/u4/conference.jpg" />

</a>

<figcaption>

            Head of CERN’s Medical Application Programme, Steve Myers addresses the ICTR-PHE conference in Geneva, Switzerland (Image: CERN)

</figcaption>

</figure>

Align left

Image aligned left within the flow

<figure class="align-left">

<a href="#">

            <img src="http://home.web.cern.ch/sites/home.web.cern.ch/files/u4/slava_rychkov5.jpg" alt="">

</a>

</figure>

Banner images on topic pages

Topic pages such as "The Large Hadron Collider" or ""The search for antimatter" on the CERN website are branded with a Banner image that runs along the topic of the screen. 

Banner images have the following specifications: 

Size:     2600 by 500x

DPI:     72

Format: Compressed JPG

  • More abstract that concrete, but aligned with the topic of the page
  • Keep the left hand side empty so people can read the logo, title, and navigation of the webpage
  • Use a single style across topics

You are here