Images are not sharp enough when they are scaled down

Marko Krstić
19 Jun 2020
.ct-image{
	image-rendering: -webkit-optimize-contrast;
}

Oxygen adding class to images by default “.ct-image”. To target all the images use img tag or .ct-image.

If you want to play with more options there are some couple of more settings:

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */

Was this article helpful?

Tags

Categories

Never miss new post again

Subscribe and get list of new posts in your inbox

Click to Copy