Adding noise to a solid background colour in CSS

[silly.questions 0]

    background-image: url(data:image/png;base64,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);

I have found the above code, and it works really well.

 

But I have no idea what it is.

 

Can anyone tell me please in plain English how it works? Or just the name of the effect so I can go and research it myself?

 

If I change the mumbo jumbo of characters, does the noise pattern change? Any time I tried it does not seem to work.

 

If I simply copy and paste this code to my site, am I stealing someone else's work?

 

I do not want to use something and not understand what it is.

 

Thank you for your help!

[Cyclone 10]

So that's actually an image, in png format and the characters are base64 encoded data that you would find in an image file normally.

Hence why changing them doesn't work, you'll just break the checksum or the expected format of the image data.

 

That said, it doesn't seem to be valid png data as best I can tell.

 

For example, this doesn't understand it.

https://onlinepngtools.com/convert-data-uri-to-png

 

 

Edited June 17, 2019 by Cyclone

[Waldo 96]

Probably is an online tool also to convert a file (in this case, .png) to a base64 string, which you can then put in your css. Have you tried that?

[Hippogriff 10]

Try - http://base64online.org/decode/ - take from "i" to "==" and paste in, then hit Decode from Base64 - it'll show a 50x50 image that looks like some speckles.

 

Use this to go the other way - http://base64online.org/encode/

[silly.questions 0]

I am a little bit speechless at the lovely replies here and more than grateful.

[silly.questions 0]

On 17/06/2019 at 08:24, Cyclone said:

So that's actually an image, in png format and the characters are base64 encoded data that you would find in an image file normally.

Hence why changing them doesn't work, you'll just break the checksum or the expected format of the image data.

 

That said, it doesn't seem to be valid png data as best I can tell.

 

For example, this doesn't understand it.

https://onlinepngtools.com/convert-data-uri-to-png

 

 

I have learned so much from your post. Thank you,.

 

But...

 

(1) What I do not understand is, is that mumbo jumbo just describing a URL somewhere on the internet, that, at the end of the day I am using (technically stealing - and if the owner of that image decided to remove it, it would be lost from my site too) or is that mumbo jumbo actually creating such an image? If it is the former, then it is just a way of encrypting a URL... and, meh. If it is the latter... then COOL!

(2) There is a + in the middle of that mumbo jumbo, and if I double click to select all it only highlights up to the plus sign. I managed to use a tool (see below) to actually acquire a PNG but my question from (1) still confuses me.

 

Thank you again!

17 hours ago, Waldo said:

Probably is an online tool also to convert a file (in this case, .png) to a base64 string, which you can then put in your css. Have you tried that?

No because this is the first time I am learning about these things. Thanks for your reply.

16 hours ago, Hippogriff said:

Try - http://base64online.org/decode/ - take from "i" to "==" and paste in, then hit Decode from Base64 - it'll show a 50x50 image that looks like some speckles.

 

Use this to go the other way - http://base64online.org/encode/

Thank you for your replies. I have saved these links immediately. I never knew something like this existed. I quote my questions from the other replies:

3 minutes ago, silly.questions said:

(1) What I do not understand is, is that mumbo jumbo just describing a URL somewhere on the internet, that, at the end of the day I am using (technically stealing - and if the owner of that image decided to remove it, it would be lost from my site too) or is that mumbo jumbo actually creating such an image? If it is the former, then it is just a way of encrypting a URL... and, meh. If it is the latter... then COOL!

 

[Cyclone 10]

1), No.  I know it says 'url'.  But it's not really.  Within the brackets are the entire response as IF it had fetched an image from a url.  That string of characters is the PNG image.  And as Hippogriff demonstrated, it will decode into a PNG image.

 

2), Don't double click, you have to select all of it, special characters and everything.

[silly.questions 0]

Is this something new? Or at least how it is being used?

 

Why do people upload images if all images can be represented like this? As I type that I feel it’s a silly question!

 

By copying and pasting these characters to use in my site, am I then not stealing?

 

And which loads faster - the tiny png or this code? Why would someone choose one method above the other?

 

Thank you for your help. 

[Waldo 96]

One benefit will be page load time. Also, some developers may like not having to host a tiny .PNG file?

 

I seriously doubt anyone would be bothered about IP rights on a seemingly randomly generated noise image file.

 

Good luck!

[Cyclone 10]

No, I don't think it's particularly new.

 

Well, that's a very small image, 50*50 pixels, and it's encoded directly in to the CSS so difficult to change.  In terms of IP, it makes no difference whether it's an image file or a string of characters.  You have to know whether you have the rights to use that IP, or you are risking a copyright breach, not theft.

Edited June 19, 2019 by Cyclone

[Waldo 96]

In fact, you should know if you have rights to reproduce it on Sheffield Forum. I'm guessing you may already be in breach of copyright.

 

Sorry, I'm going to have to report the post, Sheffield Forum is quite clear on piracy issues! Only joking, not really going report it.

 

But technically, I believe Cyclone is correct, even though it's a random image, the copyright will (most likely) be with the creator. Reproducing it on here, is no different technically to reproducing, say, a copyrighted movie or music file (well, not quite, there could be additional IP rights, trademarks etc).

 

Of course, it's unlikely anyone will be as bothered about enforcing their rights over a random image, as say, the MPAA would be about preventing illegal downloads of material they own the rights to.

Edited June 19, 2019 by Waldo