diff --git a/README.md b/README.md
index 816751e..8960b4d 100644
--- a/README.md
+++ b/README.md
@@ -10,19 +10,19 @@ I achieved this by rendering out each individual square that can be lit up in a
 Here are a few of the raw assets of the prerendered squares in greyscale before compositing, and their coordinates
 
 `<image href="" fill="white" id="1-2" class="square" x="70" y="36" width="79" height="83" />`  
-![Square](resources/img/1-2.jpg)
+![Square](resources/img/1-2.png)
 
-`<image href="" fill="white" id="2-3" class="square" x="86" y="30" width="87" height="85" />`
-![Square](resources/img/2-3.jpg)
+`<image href="" fill="white" id="2-3" class="square" x="86" y="30" width="87" height="85" />`  
+![Square](resources/img/2-3.png)
 
-`<image href="" fill="white" id="2-7" class="square" x="243" y="62" width="43" height="50" />`
-![Square](resources/img/2-7.jpg)
+`<image href="" fill="white" id="2-7" class="square" x="243" y="62" width="43" height="50" />`  
+![Square](resources/img/2-7.png)
 
-`<image href="" fill="white" id="6-5" class="square" x="175" y="180" width="59" height="59" />`
-![Square](resources/img/6-5.jpg)
+`<image href="" fill="white" id="6-5" class="square" x="175" y="180" width="59" height="59" />`  
+![Square](resources/img/6-5.png)
 
-`<image href="" fill="white" id="7-5" class="square" x="166" y="215" width="68" height="60" />`
-![Square](resources/img/7-5.jpg)
+`<image href="" fill="white" id="7-5" class="square" x="166" y="215" width="68" height="60" />`  
+![Square](resources/img/7-5.png)
 
-`<image href="" fill="white" id="7-6" class="square" x="195" y="205" width="70" height="68" />`
-![Square](resources/img/7-6.jpg)
+`<image href="" fill="white" id="7-6" class="square" x="195" y="205" width="70" height="68" />`  
+![Square](resources/img/7-6.png)