...

Certaines de ces solutions ne sont pas compatibles tous navigateurs, pour plus de détails vous pouvez consulter le tableau de Can I Use.

Les media queries :

Très utilisés pour le RWD, les media queries sont également pratiques pour déterminer la densité de pixels d’un écran :

.icon{

  display: block;

  width: 110px;

  height: 110px;

}

@media only screen and (-webkit-max-device-pixel-ratio: 1.5),

 only screen and (-o-max-device-pixel-ratio: 3/2),

 only screen and (max--moz-device-pixel-ratio: 1.5),

 only screen and (max-device-pixel-ratio: 1.5) {

  .icon{

    background: url(images/ logo-esup.png) no-repeat;

  }

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),

 only screen and (-o-min-device-pixel-ratio: 3/2),

 only screen and (min--moz-device-pixel-ratio: 1.5),

 only screen and (min-device-pixel-ratio: 1.5) {

  .icon{

    background-image: url(images/ logo-esup2x.png);

    /* nouvelle image de 220px par 220px */

    background-size: 110px 110px;

  }

}

Images à 200% :

Une des solutions un peu barbare mais efficace consiste à doubler la taille de vos images :

...