Of course, you can also use PHP’s base64_decode function to convert encoded gibberish back into original shape. The easiest way to decode a base64-encoded image is to view the image in a browser and then just do a “Save as…” somewhere on your machine. Or display in our dynamic CSS.php file: background: url("data:image/gif base64,") Decoding Data URL Images And so, now that we’ve encoded the image, we can display it in our web pages like so: "> But that’s okay because (in most cases) saving an extra HTTP request is better for performance than a few extra kilobytes of code. In general, base64-encoded images are a bit larger than the original image. So to give you an idea of the actual difference in size between the base64 code and the original image: When encoding the exact image provided above ( feed-icon.gif), we get the following code: data:image/png base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADAUExURUdwTOF9MPiYNPaUM79PD85gEv///8xZD8tbDs5gEvqcNfGLMO6FLvmbNet/LfOPMuVyKfufNuFoJ9xeI+2BLul7K+h5K99jJvCHMPWRM++IMPKOMed2K/SRMu+PRuRtKfvLnOZ3Kvzjzv/58/3q2/idQNx1J/rEj/S9mfWdS+NyNvvAg/fDmvqzafvcwfvWtfqjQv3w5vamWu+0l/KnbPuvXfWYPvqnT/Gvgu6bY/7z5uiDPOmJOvq5dvrQqOWKX8DLUw8AAAAKdFJOUwD///8Qv/9Qoc8Rrb9jAAABxklEQVQ4圓WT6XaCQAxGB1BERMTi2topRQHBDa1L1S7v/1b9kpFqezC/4Nw7kwUihBC1eqyVRFyvCYqKpUn39bXXdd2O4zw2Gk+tZ8PQ9WaUalYFgvVx9rwS3rTt6MPC/Zp7j7fbkVYTdQkuj0dZwm09rYrYxfmpiQi/Nv+5sY+FRvWxgFgn+z982NIgIH8hmOY4+cMbEKi+uXmNyeGGDyBc6t8my+KSzyt3IFz7289OSpn98g4Jt/0lY2UU3IVAfG6uw2BD9R8mbHxeeBcCnVdFhgvUn4dcR6p4jwTcX3SxzFEfG6HiIwiUPyh6PO3adsRZtsw9CFRfugguTY53urHhoTJn4TL/w5e6Ixq2OOM78RcI1++z4B5XrYakh5D4A4Sb77djYztw+IozOAnM8yRI8ra94FacjuQc4CTweSp8kuvGioh0u/S+BO+TAD5TAzaGKR/t8h+0BieB8qs5BJgvHV31Rlt6B/dJoPrVDZj/XNV/pPes75PA9a9Uf6r+iedlJHz7PlLEEf8/u2TD309OEejvDZH5fhaLenrz/6j5U/+UHyGrWJzoPs+wOFi96C4/W2p5030J72dSLS/Ws1q+/lVa/x9fdEIH1QvZAwAAAABJRU5ErkJggg= That code will output the image as a string of base64-encoded gibberish, which I will not utter here. That’s sort of a “quick-n-dirty” technique but it works 1. We then convert to data-URL format by encoding with base64_encode(): So we start with a small image named, say, feed-icon.gif: This article explains how it all works, and shows some different ways of converting back and forth between original and encoded images. Using PHP‘s base64_encode() and base64_decode() functions, we have the power to convert images to data-URLs and vice-versa.
0 Comments
Leave a Reply. |