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

Reference URL


  1. Larry
    Permalink to comment#

    What’s the point of this?

    • 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. luk
    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…

    • 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. adarsh
    Permalink to comment#

    where can i generate data URI images?


  4. grilly
    Permalink to comment#

    Here is a tool for making noisy base64 images:

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.