Note: the links in the left-hand menu actually work in this section! There's a lot to say about presenting images.
The goal is that images on elixir-europe.org will be of three types:
- 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.
- Icon fonts: for icons. The main ELIXIR site uses FontAwesome for bullet points and other icons.
- Bitmap images with
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
srcset do see Bitmaps with HTML5.