Data URL
- Data URLs is another optimization technique for reducing the number of HTTP requests. With this technique, we can embed an image directly into an HTML document or a style sheet.
- The image is represented as a long sequence of characters. So you can get this sequence of characters and put it directly inside an HTML document or a stylesheet.
- Typically, URLs start with HTTP or HTTPS. That is the protocol in a URL. The data is another protocol, which is used for representing a binary file in a sequence of characters. Right after data, we have colon and then we have image/PNG. This specifies the type of data we're representing here. And after that, we have the actual data.
- Browser do not send a separate HTTP request to download this image. Because this image is embedded inside our HTML document.
- With data URLs, we can reduce the number of HTTP requests. And with this, we can potentially achieve faster load time
Reference
cssportal.com/image-to-data https://elmah.io/tools/base64-image-encoder/
Problems
- Size of embedded code > size of resource
- Increased complexity
- Slow on mobile