let w,h,ctx1,ctx2 let img let imageData //serialised let image2D // 2d rgb matrix let palette let clusters=4 let indices let compressed function colorDistance(color1,color2){ const [r1,g1,b1]=color1 const [r2,g2,b2]=color2 const r=r1-r2 const g=g1-g2 const b=b1-b2 const d=Math.sqrt(r**2+g**2+b**2) return d } function adjustPalette(iter){ while(--iter){ let centroids=new Array(clusters) for(let i=0;i0){ const [r,g,b] = palette[compressed[i+1]] ctx2.fillStyle=`rgba(${r},${g},${b})` while(first--){ ctx2.fillRect(col,row,1,1) ++col } } else if(first == 0){ const second = compressed[i+1] if(second==0){ ++row col=0 }else if(second==1){ return }else if(second==3){ } } } } function init2d(){ image2D = new Array() for(let i=0;i<=h;++i){ image2D.push(new Array(w)) } for(let i=0;iMath.random()*255 const color = new Array(3) for(let i=0;i<3;++i) color[i]=Math.round(randomOne()) return color } function initPalette(){ palette = new Array(clusters) for(let i=0;i{ canvas1=document.getElementById("buffer") canvas1.width=w=320 canvas1.height=h=213 ctx1=canvas1.getContext("2d") img=document.querySelector("img") ctx1.drawImage(img,0,0) imageData=ctx1.getImageData(0,0,w,h) canvas2=document.getElementById("paletted4") canvas2.width=w=320 canvas2.height=h=213 ctx2=canvas2.getContext("2d") init2d() initPalette() adjustPalette(8) initIndices() populateIndices() compressRLE() console.log("original size: ",imageData.data.length,"\nindices size before compression: ", indices.flat().length,"\nindices size after compression: ", compressed.length) draw() } onload=init alert("compression would actually be greater on a compiled language where we could have indices of 2bits length per pixel. javascript has one sized numbers, 64bits")

Run Length Encoding - RLE compression rle