1

Usually it's the other way around, but I'm a special kid.

So I was wondering what the most efficient way was to convert an entire image to a CSS-rendered image, I made a method that would

Get the image (using PHP's image create from JPEG)

Get the width / height of the image

Loop the height of the image, then in that loop -- loop the width

In width loop, get the color of the current position (current loop iteration / height loop iteration (x,y)) Display in a div (width=1px;height=1px;rgb(r,g,b))

But that seems to take a really long time to render, as it's displaying thousands if not millions of divs to render the one image, so I was wondering if there was another way to display an image from getting the hex / rgb colors from an image.

In a way -- Looking for the quickest way to display a pixel of data, I understand a div isn't the best for that because it's meant to hold data, etc...

Jack Hales
  • 1,533
  • 24
  • 46
  • Use datauris, base64 . And add it as a background. There are plenty of online converters. I would also suggest to optimize the image first. Try this [optimizer](https://tinypng.com), and this [converter](https://duri.me). I've been using those myself, and are quite good. – pol Nov 29 '16 at 04:15
  • 1
    Possible duplicate of [Can I convert an image to CSS3?](http://stackoverflow.com/questions/18171889/can-i-convert-an-image-to-css3) – Mohammad Yusuf Nov 29 '16 at 05:23

1 Answers1

1

Try this http://spritegen.website-performance.org/ or http://spriteme.org/ convert your images to sprite and making CSS Sprite Generator

Panup Pong
  • 1,789
  • 2
  • 21
  • 43