DEV Community

Discussion on: Creating Pixel Art with CSS

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

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.

Collapse
 
johnhorner profile image
John Horner

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.

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

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

Collapse
 
jnschrag profile image
Jacque Schrag

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

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

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!