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,574
  • 23
  • 51
  • 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
  • There are many online [image to CSS converter](https://imagetocss.com) tool. For example [imagetocss.com](https://imagetocss.com). Try this converter for further projects. Also, this site recommend to use Image not CSS, as Image is an SEO friendly source rather CSS can be used in only at the unexpected places – manoj Jun 04 '23 at 09:35

0 Answers0