Search code examples
imageuribase64data-uri

DATA URI format are there sections of importance?


Data-URI for a red dot:

<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' height='32' width='32' alt='Image'>

What are the parts here if any? For instance, are the first 20 characters reserved for the type, the next 2 for opacity, etc? If anyone can point me to the right place, I cannot find anything on the intergoogles!

OK for a PNG there are similarities in the strings: iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAh7sky7OeYKB8+tP6XGdtx//a/E2m63tavY/hRM=qW+lVt1OD8sxrieE5j7ebvK3eiz+1==eV=Crr4=

and

iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAAB3RJTUUH1QEHDxEhOnxCRgAAAAlwSFlzAAAK8AAACvABQqw0mAAAAXBJREFUeNrtV0FywzAIxJ3+K/pZyctKXqamji0htEik9qEHc3JkWC2LRPCS6Zh9HIy/AP4FwKf75iHEr6eU6Mt1WzIOFjFL7IFkYBx3zWBVkkeXAUCXwl1tvz2qdBLfJrzK7ixNUmVdTIAB8PMtxHgAsFNNkoExRKA+HocriOQAiC+1kShhACwSRGAEwPP96zYIoE8Pmph9qEWWKcCWRAfA/mkfJ0F6dSoA8KW3CRhn3ZHcW2is9VOsAgoqHblncAsyaCgcbqpUZQnWoGTcp/AnuwCoOUjhIvCvN59UBeoPZ/AYyLm3cWVAjxhpqREVaP0974iVwH51d4AVNaSC8TRNNYDQEFdlzDW9ob10YlvGQm0mQ+elSpcCCBtDgQD7cDFojdx7NIeHJkqi96cOGNkfZOroZsHtlPYoR7TOp3Vmfa5+49uoSSRyjfvc0A1kLx4KC6sNSeDieD1AWhrJLe0y+uy7b9GjP83l+m68AJ72AwSRPN5g7uwUAAAAAElFTkSuQmCC

The first 20-30 are similar with minor variancies: iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPA

But I cannot determine any format/pattern. Using = or / I will look at the RFC, but this is still open...


Solution

  •  data:          Required, data-URI protocol
     image/png      Required, MIME-type
     ;charset=UTF8  Optional, character encoding
     ;base64        Optional
     ,              Required
     ...            Optional:
                    Note: When ;base64 is set, a valid base64 string has to be given
    

    See also: