Base64 encoding small icon

Keywords: encoding network

First, what makes Base code?

Base64 is one of the most common encoding methods used to transmit 8Bit bytecode on the network. Base64 is a method based on 64 printable characters to represent binary data.

Base64 encoding of a picture is a picture represented by a binary string,
Such as:

The Base64 encoding of is:

data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAcFBQYFBAcGBgYIBwcICxILCwoKCxYPEA0SGhYbGhkWGRgcICgiHB4mHhgZIzAkJiorLS4tGyIyNTEsNSgsLSz/2wBDAQcICAsJCxULCxUsHRkdLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCz/wgARCABSAFUDAREAAhEBAxEB/8QAHAAAAQUBAQEAAAAAAAAAAAAAAAECBQYHBAMI/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAA+kTJzzPQB4wcQhtB0lQM/NvAAAQqJRDZDLzzNaAAACEMpLceRGGtgAABElLHARZrgAAARBTBRSNNaAAACGKcPGnEasAAAEOU4UQ4zVQAAAiCmDhpXCRGgPGinOWg5zjOA0UBQADwKCXosZghRBgAAohuhox//8QAORAAAAQEAgYIBAUFAAAAAAAAAQIDBAAFBgcRNhJBVnSUshAWIFFzs8LSF3Wk0RMUISIyFTE1QpL/2gAIAQEAAT8Ai5ldO036Ehp9yqDrTwVOh/fHUQIQt7XSzYiilYuUVDBiYgulv2wlbmuMT/jVsuTu0HSxoG3Nc7ar8UtAW3rbQzw6094Vj4c1ztqvxS0BbquNtV+KWhOoqjt3WANZ7MV5m1UAMdNY5ymIOsmlrDXDB83mbFJ40VKqgsUDEOGsOisK+ldMYs1FTmfKpGFMiZcdAdQnizciLNZ27njw4qnaG/ZjrUNjiboDs3HkLKc0m8WcpYrMkjLJH1lwi1ldsJPKlZdNXYIEKfFKEHSLhAiyKhVEzhiUxRxAQikaclE/q2rFZmzB2s1mRwT0zm1nPFiP8dN/GJ26xyXOtzV5Bi2tvpRVFOOXz8VwWI5MgX8I+oCF98WeVUWodT/cE3ZyB/ySLZZzrr5h61YsQfFnOSdypO3U5QPSk1L3tVOUYsbkp7v5/LJFlslu9/PyJxbLOddfMfWtFiv4TzxCert1QYS0nNjBqaK8gxY3JT3fz+WSLLZMeb+fkTi2Wcq6+Y+tWLGfwnnik9Xbq02FHzg3czV5BixuSnu/n8skWUya834/lki2ec663/1rRZI2JJ7vBe3VZQNSE33RXkGLG5Keb+fyyRZXJjzfz8hItlnSu9/9a0WUJmHxyF5u3VKYq0lNyd7NXkGLG5Ke7+fyyRZnElFOd+PyEi2mcq83/wBa0SnrtRT1+jLqdByDxUVMRSMcBwxwwEpgga/uLsh9Et7o+Idw9j/oF/dHxDuHsh9Av7oLX9w9kPo1vdAXDuFsf9Et7oG4df7Gn4JaHlaXCfMXDVSldAi6ZkzGBkrrDARARNFo5O7k1GqJPkDIKruTrAQ/dgUvpizBMKMdb8flJE9tzOSTp8/p6eLsPz6orLEKqcmJhEdZYoC4a7OZKyGpnX6lOYCulz4AQS6jmNhHW+nNoJXxaf3jrfTm0Er4tP7x1up3aCV8Wn9463U5tDKuLT90dbqc2hlXFp+6Ot1ObQyri0/dDmtKcQaLLf12WnFMgmwI5IYxsAx/QAHERiWT2rK4mT5WUviMZamcCFE5A+wiIxRtNqU3IRZLLgqodYyxjFLrNGqLooJBWLnBImJtHGFgAFTYdAwPRqCNQxZbJpvGP0f/xAAUEQEAAAAAAAAAAAAAAAAAAABg/9oACAECAQE/AHP/xAAUEQEAAAAAAAAAAAAAAAAAAABg/9oACAEDAQE/AHP/2Q==

Why use Base64 encoding?
In front-end development, it is always necessary to introduce an img element in html or a background image in the url("") of css. Each time you introduce it, you need to add an HTTP request to encode the image as Base64, which can make the image cache locally with the html file or css file, and reduce the HTTP request for the image.

When will Base64 be used
Use Base64 encoding when the picture is small enough and needs to be reused multiple times
Be careful:
1. Base64 encoding may increase the size of large picture by 1 / 3 of the original picture, so Base64 encoding is not suitable for large picture.
2. Using Base64 to encode pictures does not mean performance optimization

Base64 online coding tool
Online coding tool

Posted by mcl on Thu, 02 Apr 2020 17:58:15 -0700