CODEWITHSUNDEEP
htmlqr-code
William Entriken
William Entriken

Reputation: 39253

How to make QR code render crisp when shown large?

Here is a QR code which encodes "sup":

enter image description here

And here is a simple HTML snippet to render that larger:

<img style="width:400px" src="data:image/gif;base64,R0lGODdhFQAVAPAAAAAAAP///ywAAAAAFQAVAEACT4QPoRfozJpMdJrZKrY6YSgpWeVpI/ItC3l5I3eiZCxnofU+1IzvLCtSBX0bUatl+xyDmxLTxbxFnxdOVRZRoU7TnHBrDBt9xE7EBW2eRQUAOw==">

Unfortunately, this renders in browsers as a larger blurry image:

enter image description here

I know that I could recreate the image at a large resolution. But I am from the school of thought that images should not be upsized for presentation purposes.

Can I do anything to render this without being fuzzy?

Upvotes: 5

Views: 2267

Answers (2)

Ian Burns
Ian Burns

Reputation: 96

Try adding the image-rendering: pixelated; CSS style to that element. This will preserve the pixels as it scales.

Keep in mind that there’s different cross browser support for this tag though, e.g. Chrome and Firefox require different tags to get this to work. More info here

Upvotes: 2

Brad
Brad

Reputation: 163232

You can apply a CSS rule to change the scaling algorithm.

img.qr {
  image-rendering: pixelated;
}

This has decent browser support. https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

What I prefer to use instead is SVG for QR codes. Then, they can be saved for other purposes elsewhere.

Upvotes: 2

Related Questions