Improve README.md and demo.html notes re: image quality

stewartlord · Mar 24, 2022 · 7063ae1 · 7063ae1
1 parent 4fad7ca
commit 7063ae1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -37,6 +37,8 @@ Usage
 
 ##### Simple
 Generate the Identicon by supplying a hash string and size.
+Note: SVGs will produce clearer images (see below). To make PNGs crisper, you can try adding the CSS rule `image-rendering: pixelated;`
+
 ```js
 
 // create a base64 encoded PNG

diff --git a/demo.html b/demo.html
@@ -3,6 +3,9 @@
     <script src="pnglib.js"></script>
     <script src="identicon.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+    <style>
+      img { image-rendering: pixelated; }
+    </style>
   </head>
 
   <body>
@@ -11,7 +14,10 @@ <h1>Identicon.js</h1>
       <div class="row">
         <div class="col-md-12">
           <h4>Basic Usage</h4>
-          <p>Specify just a hash, use default background color, margins, and size.</p>
+          <p>
+            Specify just a hash, use default background color, margins, and size.
+            <br> Note: SVGs will produce clearer images (see below). To make PNGs crisper, you can try adding the CSS rule <span style="font-family: fixed;">image-rendering: pixelated;</span>
+          </p>
 <pre>
   var hash = 'd6fe8c82fb0abac17a702fd2a94eff37';
   var data = new Identicon(hash).toString();