Images

Note: the links in the left-hand menu actually work in this section! There's a lot to say about presenting images.

The ideal

The goal is that images on elixir-europe.org will be of three types:

  1. SVGs: for illustrations and icons. The Platform and Use Case icons are SVGs. SVGs are resolution-independent so they scale cleanly and look sharp on high definition displays.
  2. Icon fonts: for icons. The main ELIXIR site uses FontAwesome for bullet points and other icons.
  3. Bitmap images with srcset, picture and sizes: SVGs and icon fonts of course don't work for continuous tone graphics like photographs. For photos we would ideally use these HTML5 elements and attributes to ensure our photos looked good on screens of different sizes and pixel densities.

The reality on the main website

Most images on elixir-europe.org are legacy images (png or jpeg). They are not optimised to be responsive or to appear sharp on high definition displays.

Some images on the site are presented using the Retina images module in Drupal. This gave a quick fix in a time when the srcset attribute was not supported in Drupal. It uses a simple technique described by Thomas Fuchs that you can use in any system. See the Retinafy page.

Which technique to use?

Choose from the techniques in the 'The goal' list above if you can. The retinafy technique is a bit of a hack and doesn't make the images responsive. It works on older systems that don't support newer HTML tags and attributes, or systems where it's not easy to automatically generate multiple versions of the same image.

A note for Drupal users

As you probably know, Drupal 7 assumed the picture element was going to be the main element to handle images in HTML5. In fact the srcset attribute for img become more important because it covered the most common use cases. This left the Picture module slightly irrelevant. The ability to use srcset was added to the module later (see this issue).

If you're not sure what picture and srcset do see Bitmaps with HTML5.