When the image encoding is finished, you’ll see a string of text like the one below. Next, use a base64 encoder like this one to encode the image.
If you’re base64 encoding other image formats, there are other format-specific optimization tools as well. I highly recommend TinyPNG for optimization of PNG files. The first thing you should do is optimize the image for base64 encoding. Serving a single request from Cloudflare is extremely fast, and this is why most of my pages fully load in under 200 ms.īase64 encoding images is super easy. I use Cloudflare’s “cache everything” feature, which allows me to cache my pages on Cloudflare’s extensive network of edge servers.After doing some before and after comparisons, I found that base64 encoding the icons did in fact result in faster load times.My home page is almost always image-free, and I liked the idea of loading the entire page with one server request.On, I base64 encoded my social icons for three reasons. Thus, you should always do a comprehensive before and after comparison when experimenting with base64 encoded images.
Giving up browser caching and inlining a base64 encoded image can result in a speed boost, or it may not. Choosing whether to base64 encode an image is always a game of compromises. Since base64 encoded images are approximately 30% larger than their unencoded counterparts, encoding large images can add unnecessary bloat to your page size. You should never base64 encode large images unless you have a specific reason to do so. For reference, my 64圆4 px Twitter icon weighs in at 1,019 bytes. In practice, this would mainly apply to social media icons in PNG format, which can often be heavily compressed due to their single-color nature. In general, I would only recommend base64 encoding extremely small images. Since base64 encoded images are inlined straight into HTML, they cannot be stored in the browser cache to fulfill subsequent requests. Which Images Should be base64 Encoded?īase64 encoding images into HTML can help reduce server requests, but it definitely comes at a cost. This is because the Twitter and Instagram PNGs have been base64 encoded straight into my header template. The screenshot below shows the result of a speed test on my about page.Īs you can see, the entire page loads with a single server request even though there are two social media icons on the page. In web development, base64 encoding is often used to inline images into HTML to reduce the number of server requests required to render a page. Base64 encoding is a method of encoding binary data into text.
0 kommentar(er)
