The Retina “technology”, if you can call it that, consists of a pixel density high enough for the eye (hence the name retina) to discern the pixels on the screen. However, with such a density, so that everything does not appear minuscule, the pixel value of each element is doubled. Concretely, this means that in your CSS sheet, any item you define, for example, with one width: 100px;will actually be 200px. Everything is multiplied by two.

At such resolutions, let’s say that your images can quickly appear to be pixelated at least. It is therefore necessary to think of the different sizes of screens, but also to the different densities of scales. A 22 “HD (1920 × 1080) will not need the same picture quality as a 22” 4k (4096 × 2016). Let’s see how to think our images so that they are vibrant in any situation.

Definition and resolution

Let us begin by clarifying two concepts that are very often confusing. The definition of a digital image refers to its dimensions in pixels, ie 1000x1000px, 1920 × 1080 etc. This is simply the number of pixels in length times the number of pixels in width. The operation gives the total number of pixels in the image.

As for the resolution, it concerns the information density of an image (or a screen). Thus, for a given size, an image may have more or less information. We usually speak of ppi or ppp in French for digital images and dpi or ppp in French for printing.

In the case of digital, one counts the number of pixels per inch, while in the printing press it is the number of points (small ink drops) per inch.

Thus, an image of 1000x1000px at 100dpi will be 10 “x10” (25.4cm). If you want the same image to have a resolution of 300 dpi, it should be displayed on a 3.33 × 3.33 “(8.5cm) surface. If you want to keep the same physical size of image for a resolution of 300dpi, then our source image will have to be 3000x3000px.

It is therefore understood that resolution is a relationship between the definition and the dimension that the image occupies. That’s why, on digital media, talking about the resolution of an image has little meaning. An image of 300x300px displayed on a screen will be displayed at the size of 300x300px, the ratio is therefore 1: 1.

And the retina was

There is a small exception to what I have just said: high-density screens – more commonly known as retina. This type of screen has a very high pixel density. So much so that the eye can no longer discern the points of the pixels (hence the name retina …).

Humorous illustration of Apple's retina screens

Retina is a brand of Apple, most of the manufacturers now offer high pixel density screens. The term retinas is used generically to refer to high-resolution screens.

There is no particular standard for defining that from a certain density of pixels per inch, a screen is retina or not. From a certain distance, any screen becomes retina . For this reason, telephone screens – which are closely monitored – usually require a higher density than computers.

This may have varied from time to time and manufacturers, but traditionally the screens had a resolution of 96 dpi. Thus, the retina corresponds to 2 × 96, ie a resolution of 192 dpi, but densities are much higher.

With this type of screen, if you kept a 1: 1 ration, everything would be very small. So to keep proportions reasonable, everything is displayed with a ratio of 2: 1 or more. The result ? An image of 1000x1000px is displayed as a 2000x2000px image. Thus, several physical pixels of the screen display the same pixel of the image, hence the visible loss of quality.

For an optimal result, it would be necessary to provide an image of 2000x2000px to display in 1000x1000px. That way, each pixel of the image corresponds to a pixel of the screen. Obviously, for screens with even greater density, you need images of even better quality.

Image formats

At each situation its solution. There are countless formats of images, between vector and matrix images, let’s see the best option for each use case.

The vectors, adorned in all circumstances

Obviously, a vector image ignores the notions of pixels. It is vectorial, so it does not contain a set of points to display, but rather the geometric coordinates of the shapes to be rendered. Thus, it resizes to infinity. So whether it’s density or size, a single SVG all configurations.

For everything that is logo and image created with tools such as Illustrator or Inkscape, do not hesitate, use the SVG! It is light, very well supported by browsers and it will always be of a perfect quality. Keep in mind that the various editing software does not necessarily optimize SVG files. Before putting them online, I advise you to undergo a small slimming course .

The disadvantage is that the SVG is not suitable for photos for example. Translating a landscape or portrait into vector elements is like making an extremely heavy file or losing a considerable amount of detail. In these cases, no choice, it will fall back on the matrix formats.

Bitmap formats

The raster , bitmap or matrix images in French are those that contain the information of the pixels, as opposed to the vector images. There are hundreds of formats. We will only see those usable on the web.

You probably know the three most popular formats and we will introduce a fourth:

gif
It is a lossless format, the quality remains constant, it allows transparency (one color only), animation and works with a palette of 256 colors. It is therefore to be used for images with geometric shapes mainly. Between svg and PNG, except for animations, it is no longer very competitive today.
pNG
It is also a lossless format and it exists in two versions: the png8 (for 8 bits) which embeds a palette of 256 colors; and the png24 (24 bit) that works in direct color mode and covers several million colors. Since it is lossless, images with clearly defined shapes will benefit from the clarity of the PNG. It will have good results in terms of compression on images having large homogeneous color zones. Generally, however, it is much bigger than jpeg.
jpeg
This is the only rights formats to be lossy. That is, compression of the jpeg removes information from the image. We lose details. Because of this, it is also the format that provides the lightest files. We can define the compression quality of jpeg. The lower the quality, the more aggressive the compression and the more detail will be lost. The jpeg is very suitable for images with many details and noise. Due to the operation of its compression algorithm, there will soon be a deterioration in the quality of color gradations and precise shapes (text, for example) as long as the level of compression is somewhat high.
webp
This is an open source format created by Google with and without loss, which supports transparency, animations and works in direct color mode. At equal quality, it offers a 20-40% lower png in its lossless mode and jpeg in its lossy mode. Where the bottom hurts is that the browser support is still very low …

In summary, in most cases for the photo, try the jpeg. If there is large solid color where very precise geometric shapes that “drool” a bit in jpeg, try the png. For the webP, we will see that it is possible to use it in addition to other formats in some cases. However, he can not go it alone for the moment.

Place to code

Fairly discussed theory, let’s see what we can do concretely!

Images in CSS

A non-negligible part of the images used on our sites are for decorative purposes. For this purpose, it often happens that they are managed by CSS via the property background.

.header {header {
  // image of 768px wide// image of 768px wide
  background-image: url ('/ img / meeting-s.jpg');- image : url ( '/img/meeting-s.jpg' );

  // the image is centered and completely covers the area// the image is centered and completely covers the area
  background-position: center;- position : center ;
  background-size: cover;- size : cover ;
}}

@media (min-width: 769px) {@media ( min - width : 769px ) {   
  .header {. header {
    // image of 992px wide// image of 992px wide
    background-image: url ('/ img / meeting-m.jpg');- image : url ( '/img/meeting-m.jpg' );
  }}
}}

@media (min-width: 992px) {@media ( min - width : 992px ) {   
  .header {. header {
    // image of 1200px wide// image of 1200px wide
    background-image: url ('/ img / meeting-l.jpg');- image : url ( '/img/meeting-l.jpg' );
  }}
}}

@media (min-width: 1200px) {@media ( min - width : 1200px ) {   
  .header {. header {
    // image of 2500px wide// image of 2500px wide
    background-image: url ('/ img / meeting-xl.jpg');- image : url ( '/img/meeting-xl.jpg' );
  }}
}}

This is a classic example of a background image that is managed in CSS and that responds to different screen sizes. By default, a small image is used, then, using the media queries , depending on the screen sizes (> 768, 991 and 1200px respectively), a larger image is used to match the width of the screen, screen.

The media queries also can target screen resolutions. It is also very well supported by browsers . So we only have to adapt our scenario so that it uses an adequate image according to the definition and the resolution of our screen!

.header {header {
  // image of 768px wide// image of 768px wide
  background-image: url ('/ img / meeting-s.jpg');- image : url ( '/img/meeting-s.jpg' );

  // the image is centered and completely covers the area// the image is centered and completely covers the area
  background-position: center;- position : center ;
  background-size: cover;- size : cover ;
}}

@media (min-resolution: 192dpi) {@media ( min - resolution : 192dpi ) {   
  .header {. header {
    // image 2x larger: 1536px wide// image 2x larger: 1536px wide
    background-image: url ('/ img/meeting-s@2x.jpg');- image : url ( '/img/meeting-s@2x.jpg' );
  }}
}}

@media (min-width: 769px) {@media ( min - width : 769px ) {   
  .header {. header {
    // image of 992px wide// image of 992px wide
    background-image: url ('/ img / meeting-m.jpg');- image : url ( '/img/meeting-m.jpg' );
  }}
}}

@media (min-width: 769px) and (min-resolution: 192dpi) {@media ( min - width : 769px ) and ( min - resolution : 192dpi ) {      
  .header {. header {
    // image of 1984px wide// image of 1984px wide
    background-image: url ('/ img/meeting-m@2x.jpg');- image : url ( '/img/meeting-m@2x.jpg' );
  }}
}}

@media (min-width: 992px) {@media ( min - width : 992px ) {   
  .header {. header {
    // image of 1200px wide// image of 1200px wide
    background-image: url ('/ img / meeting-l.jpg');- image : url ( '/img/meeting-l.jpg' );
  }}
}}

@media (min-width: 992px) and (min-resolution: 192dpi) {@media ( min - width : 992px ) and ( min - resolution : 192dpi ) {      
  .header {. header {
    // image of 2400px wide// image of 2400px wide
    background-image: url ('/ img/meeting-l@2x.jpg');- image : url ( '/img/meeting-l@2x.jpg' );
  }}
}}

@media (min-width: 1200px) {@media ( min - width : 1200px ) {   
  .header {. header {
    // image of 2500px wide// image of 2500px wide
    background-image: url ('/ img / meeting-xl.jpg');- image : url ( '/img/meeting-xl.jpg' );
  }}
}}

@media (min-width: 1200px) and (min-resolution: 192dpi) {@media ( min - width : 1200px ) and ( min - resolution : 192dpi ) {      
  .header {. header {
    // image of 5000px wide// image of 5000px wide
    background-image: url ('/ img/meeting-xl@2x.jpg');- image : url ( '/img/meeting-xl@2x.jpg' );
  }}
}}

In this example, we only expect conventional density screens and 2x, 192dpi and higher. However, you can plan different intermediaries, including 1.5x for 120dpi screens and 3x for 300dpi screens and more (recent smartphones for example). Some smartphones like the range of “+” Apple (6+ etc) as well as the iPhone 10 have even resolutions of more than 400dpi.

You have nothing more to do if the background-sizeis set to coveror contain. On the other hand, if your background had “just the right size”, you’ll have to force background-sizethe background with the correct size and resolution. Otherwise it will simply be twice as big on the screen but without quality gain.

Images in HTML

Until now, we only had the classic image tag <img src="…">to include images in our pages. It was somewhat limited. We used hacks by detecting the resolution of the screen via JavaScript and injecting the source of the image a posterior. All this is over because HTML has finally given us the right tools.

This new syntax allows to answer four different needs:

  • serve responsive images (different sizes),
  • serve images appropriate to the density of the screen,
  • serve images in different formats (hello webP),
  • serve different types of images according to contextual rules (image cropped on small screen for example).

We will use respectively the terms size , dpi , mime and art for the four needs mentioned above.

We will see the introduction of two new tags. For older browsers that do not support them, no problems. There is in all cases the tag imgthat will serve as a fallback, the rest will be ignored. Anyway, be reassured, as well pictureas sourceare very well supported.

In cases where the browsers take into account the new tags and attributes, these overwrite the values ​​defined in the srcde img.

Using images of different sizes

This is simply a matter of making the classic responsive. If the screen is larger, the browser is offered a different image.

<img
  src = "buzut-400.jpg" alt = "Buzut AFK IRL"src = "buzut-400.jpg" alt = "Buzut AFK IRL" 
  sizes = "100vw"sizes = "100vw"
  srcset = "buzut-200.jpg 200w, srcset = "buzut-200.jpg 200w,
          buzut-400.jpg 400w,
          buzut-800.jpg 800w,
	  buzut-1200.jpg 1200w ">>

We see that the tag imggains some properties. Here, sizeshas only one value and indicates that the image will have to make 100% of the width of the viewport. The browser can therefore choose between an image of 200, 400, 800 or 1200px wide.

<img
  src = "buzut-400.jpg" alt = "Buzut AFK IRL"src = "buzut-400.jpg" alt = "Buzut AFK IRL" 
  sizes = "(min-width: 640px) 60vw, 100vw"sizes = "(min-width: 640px) 60vw, 100vw"
  srcset = "buzut-200.jpg 200w, srcset = "buzut-200.jpg 200w,
          buzut-400.jpg 400w,
          buzut-800.jpg 800w,
	  buzut-1200.jpg 1200w ">>

In this example, the browser is given an additional instruction using the media query . If the width of the browser window is equal to or greater than 640px, the image will only be 60% of the width of the viewport, otherwise it will be 100%. The images are the same as in the previous example. The browser chooses the one that suits him best.

Using high-resolution images

Step number two of the responsive, as we saw above in CSS, it is about defining images for retina screens.

<img
  src = "buzut-1x.jpg" alt = "Buzut AFK IRL"src = "buzut-1x.jpg" alt = "Buzut AFK IRL" 
  srcset = "buzut-2x.jpg 2x, buzut-3x.jpg 3x">srcset = "buzut-2x.jpg 2x, buzut-3x.jpg 3x" >

Here, the browser is provided with a default image, another corresponding to twice the definition, and finally a third corresponding to the triple. Depending on the screen used, the browser will choose the most appropriate one.

Using different formats

For this case of use, two new beacons appear. It is about sourceand picture. The first allows you to specify different media with elements that allow the browser to decide whether or not to use it. The second allows to group the tags sourceand media.

<Picture>
  <source<source
    srcset = "buzut.webp"srcset = "buzut.webp"
    type = "image / webp">type = "image / webp" >

    <img src = "buzut.jpg" alt = "Buzut AFK IRL"><img src = "buzut.jpg" alt = "Buzut AFK IRL" >  
</ Picture></ Picture>

Using different images depending on the context

<Picture>
  <source<source
  media = "(min-width: 1024px)"media = "(min-width: 1024px)"
  srcset = "buzut-paysage.jpg">srcset = "buzut-paysage.jpg" >
	
  <img<img
    src = "buzut-portrait.jpg" alt = "Buzut AFK IRL">src = "buzut-portrait.jpg" alt = "Buzut AFK IRL" > 
</ Picture></ Picture>

A close-up image is provided here by default. If the browser is at least 1024px wide, it is specified to use the image in panoramic format.

We mix everything

We now go free by using together the four possibilities seen above.

<Picture>
  <source<source
    media = "(min-width: 1280px)"media = "(min-width: 1280px)"
    sizes = "50vw"sizes = "50vw"
    srcset = "buzut-paysage-200.webp 200w,srcset = "buzut-paysage-200.webp 200w,
    		buzut-paysage-400.webp 400w,
    		buzut-paysage-800.webp 800w,
    		buzut-paysage-1200.webp 1200w,
    		buzut-paysage-1600.webp 1600w,
    		buzut-paysage-2000.webp 2000w "
    type = "image / webp">type = "image / webp" >
  <source<source
    sizes = "(min-width: 640px) 60vw, 100vw"sizes = "(min-width: 640px) 60vw, 100vw"
    srcset = "buzut-portrait-200.webp 200w,srcset = "buzut-portrait-200.webp 200w,
    		buzut-portrait-400.webp 400w,
    		buzut-portrait-800.webp 800w,
    		buzut-portrait-1200.webp 1200w,
    		buzut-portrait-1600.webp 1600w,
    		buzut-portrait-2000.webp 2000w "
    type = "image / webp">type = "image / webp" >
  <source<source
    media = "(min-width: 1280px)"media = "(min-width: 1280px)"
    sizes = "50vw"sizes = "50vw"
    srcset = "buzut-paysage-200.jpg 200w,srcset = "buzut-paysage-200.jpg 200w,
    		buzut-paysage-400.jpg 400w,
    		buzut-paysage-800.jpg 800w,
    		buzut-paysage-1200.jpg 1200w,
    		buzut-paysage-1600.jpg 1800w,
    		buzut-paysage-2000.jpg 2000w ">>
  <img<img
    src = "buzut-portrait-400.jpg" alt = "Buzut AFK IRL"src = "buzut-portrait-400.jpg" alt = "Buzut AFK IRL" 
    sizes = "(min-width: 640px) 60vw, 100vw"sizes = "(min-width: 640px) 60vw, 100vw"
    srcset = "buzut-portrait-200.jpg 200w,srcset = "buzut-portrait-200.jpg 200w,
    		buzut-portrait-400.jpg 400w,
    		buzut-portrait-800.jpg 800w,
    		buzut-portrait-1200.jpg 1200w,
    		buzut-portrait-1600.jpg 1600w,
    		buzut-portrait-2000.jpg 2000w ">>
</ Picture></ Picture>

You summarize all that? For browsers with a width of at least 1280 pixels, the photo will be only 50% of the viewport and the photo is used in panorama mode. For intermediate browsers – between 640 and 1279px – the same photo is used but it will make 60% of the viewport and for even smaller browsers, it will be 100%. In each case, the browser is offered a choice of different image sizes.

When the widths of the images are specified, the notations are not used nx. The browser can do the math itself. Finally, if the browser supports webP, it will use an image in this format.

So, we went around all the information you need to know about the responsive and retina! From hardware considerations to choosing the best image in HTML or CSS through the various formats you should be unbreakable. And your sites will have to be perfect in any situation.

Author

With a natural and eclectic curiosity, internet surfer, I am interested in everything related to digital: from programming to entrepreneurship, via webmarketing and social networks.

Pin It