Is it possible to pixelate an image without canvas?

Question

Given an <img> element, is it possible to pixelate the image using only CSS and/or not use canvas? I've seen things like the crisp edges feature (but that's just for images that are scaled) and a lot of canvas options, but I'm hoping for a better way.

Loyal

This doesn't seem like a request for a resource. It's asking about CSS techniques. – Sidman

The question is perfectly valid. image-rendering: pixelated; developer.mozilla.org/en/docs/Web/CSS/image-rendering – Signorino

It may be possible using CSS filters: developer.mozilla.org/en-US/docs/Web/CSS/filter Unfortunately there's no built-in pixelate filter but you can specify a custom filter with the url function which can pull a filter from an svg element. Inside your svg you can use a bunch of different filter effects (see the fe* elements at developer.mozilla.org/en-US/docs/Web/SVG/Element). Some combination of those filter effects might produce a pixelation effect. – Neurilemma

Answer 1

You can achieve a pixelated affect by using the image-rendering: pixelated; CSS rule and scaling up an image - see this article.

Rhomb

So if I want to keep the image at its natural size, what would you suggest? Scaling it, applying the image-rendering, and then clipping it to its original size? Or is there an easier way? – Loyal

That would work although you'd be clipping off part of the image (though it is pixelated). You could also try to save the source image in a smaller size than what you actually need it to appear in on your site, apply image-rendering: pixelate;, and scale it up to your desired size. – Rhomb

Yeah that's the problem, I won't have control over the images being displayed, so I can't just save it at a smaller size. – Loyal

In that case, I would try to use image-rendering along with transform: scale(0.5); and something like width: 200%; height: 200%;. Some combination of those rules should be able to achieve what you're looking for. – Rhomb

Worth noting that this only works in webkit-based browsers as of 2019 – Altostratus