Overlay images look blurry in the GUI due to Leaflet default behavior of antialiazing

Hello,

In the GUI, overlay images may appear blurred if they are too low resolution. This is the default behavior of Leaflet's rendering engine that try to "enhanced" images by reduicing aliazing. Here is an example with the web service Thermal monitoring of the volcanic activity from geostationnary satellite data: GeoTIFF products

One possible solution would be to increase the resolution of images supplied, but this would increase the web service response payload. There's a CSS trick that's easy for ICS to integrate, and which solves the problem:

/* Leaflet crispness override */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
    max-width: none !important;
    /* Preserve crisp pixels with scaled up images */
    image-rendering: optimizeSpeed;
    /* Legal fallback */
    image-rendering: -moz-crisp-edges;
    /* Firefox        */
    image-rendering: -o-crisp-edges;
    /* Opera          */
    image-rendering: -webkit-optimize-contrast;
    /* Safari         */
    image-rendering: optimize-contrast;
    /* CSS3 Proposed  */
    image-rendering: crisp-edges;
    /* CSS4 Proposed  */
    image-rendering: pixelated;
    /* CSS4 Proposed  */
    -ms-interpolation-mode: nearest-neighbor;
    /* IE8+           */
}

Here the result of this modification on the display: