index.html

---
feature_name: Pixelated Image Rendering
chrome_version: 41
feature_id: 5118058116939776
---

<p>The original image is a 2x2 pixel PNG. Squint or zoom into this dot: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII="></p>

<p>
  When you blow the image up in size (for example, to 100x100 pixels) without editing the original
  source image, the browser will apply anti-aliasing. Like so:
</p>

<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=" width="100px" height="100px"></p>

<p>
  To instead use a nearest-neighbor interpolation resulting in sharper edges, add
  <code>image-rendering: pixelated</code> to the image. This can be applied to image and canvas
  elements, along with any images loaded via <code>background-image</code> in CSS.
</p>

{% capture initial_output_content %}
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=" width="100px" height="100px" class="pixelated">
{% endcapture %}
{% include output_helper.html initial_output_content=initial_output_content %}

{% capture css %}
.pixelated {
  image-rendering: pixelated;
}
{% endcapture %}
{% include css_snippet.html css=css %}