Mercury Dokumentation

Set different image formats for desktop and mobile

In the element settings of many elements, you can now set a different image format for desktop and mobile devices. This allows you to optimize the display of images for large and small output devices.

A typical use case

On a detail page, the key visual image is often displayed at the top in landscape format, filling the entire page (e.g., “2.35:1 widescreen”). The images in the following paragraphs are displayed next to the text of the paragraph and are therefore significantly smaller.

However, this only applies to large “desktop” screens. On mobile devices with small screens, all images are usually displayed in full screen width. The key visual in landscape format is therefore often smaller—because it is less tall—than the images in the following paragraphs.

This can be optimized with the new settings options, as shown in the example below. For example, the key visual can be displayed as a square for mobile devices and the images in the following paragraphs in 16:9 landscape format. This makes the key visual larger again – because it is taller – than the images in the following paragraphs. 

To see the effect on large “desktop” screens, you need to reduce the size of the browser window.

Compare this with the display of images on small screens when the image format is NOT adjusted.

Reveals new possibilities:Sample article with many paragraphs

This article has several paragraphs with images. This makes it ideal for demonstrating the display options available in the detailed view.
Sonnenuntergang fotografiert von der linken Rheinseite. Man sieht den Kölner Dom und die Hohenzollernbrücke. Sonnenuntergang fotografiert von der linken Rheinseite. Man sieht den Kölner Dom und die Hohenzollernbrücke.
Date:
Mar 12, 2023
By:
Arno Autor

First paragraph

Blick vom Kölner Dom Blick vom Kölner Dom

This is a typographical dummy text. It can be used to check whether all letters are present and how they look. Sometimes words such as Hamburgefonts, Rafgenduks, or Handgloves are used to test fonts. Sometimes sentences containing all letters of the alphabet are used—these sentences are called “pangrams.” This one is very well known: The quick brown fox jumps over the lazy old dog. Foreign language phrases are often included in typographic dummy text (AVAIL® and Wefox™ are testing aussi la kerning) to test the effect in other languages. In Latin, for example, almost every font looks good. Quod erat demonstrandum. Since 1975, numbers have been missing from most test texts, which is why, according to TypoGb. 204 §, numbers will be mandatory in 86 of the texts from 2034 onwards. Non-compliance will be punished with a fine of up to €245 or $368. Âçcèñtë are now just as important, but they are almost always included in newer fonts.

Paragraph number two

Kölner Dom bei Nacht Kölner Dom bei Nacht

Far away, behind the mountains of words, far from the lands of vowels and consonants, live the blind texts. They live secluded in Letterville on the coast of Semantics, a large ocean of language. A small stream called Duden flows through their town and provides them with the necessary rules. It is a paradisiacal land where fried sentence fragments fly into your mouth. Not even the almighty punctuation rules over the blind texts – a truly unorthographic life. But one day, a small line of blind text, whose name was Lorem Ipsum, decided to go out into the wide world of grammar.

Paragraph of the Transport Infrastructure Financing Company

Kölner Dom am Abend Kölner Dom am Abend

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.