Noise Data URI Image

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoW


  1. User Avatar
    Permalink to comment#

    What’s the point of this?

    • User Avatar
      Jonathan Sampson
      Permalink to comment#

      With the advancements in CSS, creating complicated imagery no longer necessitates a hard-dependency on tooling like Photoshop. We now have support for multiple backgrounds on elements, as well as semi-opaque colors, and various gradients. One thing we don’t have the ability to generate is noise – still no options there.

      Over the years I found myself using Photoshop less and less. It was for rounded-corners, but then we got border-radius. I also used Photoshop for dropshadows, but then we got box-shadow and text-shadow. I would use it to generate PNG files, but then solid support for opacity and rgba values come in. Today, the only thing I find myself needing a graphics program for is noise-generation.

      Thank you for sharing this snippet, Chris. Found myself, yet again, wanting some noise and was pleased to see that you had a data-uri ready and waiting.

  2. User Avatar
    Permalink to comment#

    This shows a base64 encoding of an image in css. With this technique you can save many requests without using sprites because the image is embedded in the css file (which also bloats the size of the css file, but that isn’t a big problem). You can only do that to images with a size around 24kb because of IE which has (as always) problems with this…

    • User Avatar
      Jonathan Sampson
      Permalink to comment#

      Data URIs have been supported in Internet Explorer since version 8, and the current limit is nearly 33,000 characters – should you need that many.

      One other item worth noting, that we read on the Mozilla Developer Network, is “…browsers are not required to support any particular maximum length of data…”; so we really can’t fault any vendor if they choose a smaller limit.

      I have yet to see a case where it is wiser to use tens of thousands of characters in a data URI rather than loading up an actual image file instead.

  3. User Avatar
    Permalink to comment#

    where can i generate data URI images?


  4. User Avatar
    Permalink to comment#

    Here is a tool for making noisy base64 images:

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.