Escalado de imagen por CSS: ¿existe una alternativa de webkit para -moz-crisp-edges?

Question

Tengo una imagen que es 100x100 en píxeles. Quiero mostrar el doble de tamaño, así que 200x200 y quiero hacerlo por CSS y (explícitamente) no por el servidor.

Desde hace unos años, las imágenes son antialias por todos los navegadores en lugar de hacer una escala de píxel.

Mozilla permite especificar el algoritmo: image-rendering: -moz-crisp-edges; Lo mismo ocurre con IE: -ms-interpolation-mode: most-neighbor;

¿Alguna alternativa conocida de webkit?

Answer 1

Desafortunadamente, parece que esta función no está presente en WebKit. Ver este reciente informe de error:

https://bugs.webkit.org/show_bug.cgi?id=40881

Answer 2

WebKit ahora es compatible con la directiva CSS:

image-rendering:-webkit-optimize-contrast; 

Usted puede ver su funcionamiento en la acción usando Chrome y la última imagen de esta página:
http://phrogz.net/tmp/canvas_image_zoom.html

Las reglas utilizadas en esa página son:

.pixelated { 
    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+   */ 
} 

Answer 3

Además de @Phrogz respuesta muy útil y después de leer esto: https://developer.mozilla.org/en-US/docs/CSS/image-rendering

Parece que la mejor CSS sería la siguiente:

image-rendering:optimizeSpeed;    /* Legal fallback     */ 
image-rendering:-moz-crisp-edges;   /* Firefox      */ 
image-rendering:-o-crisp-edges;    /* Opera       */ 
image-rendering:-webkit-optimize-contrast; /* Chrome (and eventually Safari) */ 
image-rendering:crisp-edges;    /* CSS3 Proposed     */ 
-ms-interpolation-mode:bicubic;    /* IE8+       */