Rendering

Image

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


Variant

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

API

classcss
image-optimize-autoimage-rendering: auto
image-optimize-crispimage-rendering: crisp-edges
image-optimize-pixelatedimage-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