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>
<figure>
<iframe width="100%" height="400" frameborder="0" src="https://cds.cern.ch/video/CERN-MOVIE-2013-108-001" 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