Rendering

Image

Utilities for sets an image or canvas renders if it is scaled up or down from its original dimensions.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
image-optimize-auto	image-rendering: auto
image-optimize-crisp	image-rendering: crisp-edges
image-optimize-pixelated	image-rendering: pixelated

Usage

<img class="image-optimize-crisp">
<canvas class="image-optimize-crisp"></canvas>
<div class="image-optimize-crisp" style="background-image: url(...)"> ... </div>

HTML

.dummy {
  @extend
    .image-optimize-crisp;
}
.canvas {
  @extend
    image-optimize-crisp;
}

SCSS