re: Creating Pixel Art with CSS VIEW POST

re: Nice! I'm not going to do the next-level thing but I'm sure someone is … write a script to create the SASS to create the CSS, a script which can be...

I actually did this myself with PHP as the generator: ashleysheridan.co.uk/blog/Single+D...

Modern browsers with enough resources handled it quite well, even at a 1×1 pixel representation.


Nice! I knew someone smart would have done this!

I’m on my phone right now so I can’t check your source.

  • Does it optimise by re-using colours in a CLUT (colour lookup table)?
  • Does it have a kind of RLE (run length encoding) where a stretch of two or more pixels the same colour are made into a single long element?

Those concepts are used to optimise the file size of GIFs. JPGs I don’t know. They’re more mysterious to me.

It doesn't have any optimization really, I might go back to it and update it, those are some good ideas.


This is incredible! 27,000 lines of CSS for just the 4 examples on the page is nuts, although I believe it. Very cool!

Yes, I would absolutely not recommend using the technique to the degree I pushed it! My blog post was just about seeing how far I could push it. I did do a full 1×1 example of the Mona Lisa shown there, but it was starting to slow the page down considerably, so I didn't make it part of the post. There is a link to the generator on github should you wish to try it out yourself though!

code of conduct - report abuse