Implement Inline Images


Part One Chapter 13

Image

When a web page has to display an image, a http request must happen to fetch the image file. The typical HTML code to load the image file into the web page is:

<body>
  <img src="https://www.mobilewebsitebook.com/images/logo.png">
</body>

Base64

It is possible to load an image file onto your web page without using http request. You can inline an image in a web page's HTML code by using Base64 encoding. This is how you should include the image in Base64 format:

<body>
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAKPElEQVR4Xu2b+VNWZRTHnZyaFqspsz3NzEyzzbIms1EzM9MmS62srLHNsmUqK0tNUUDZRMEFUVAWUVndAFHAFURckEUBERH8R059jvM83ve+bw6LzPuS/PCd995z7n3ufb73Oec55zzP2+PSpUsCzjSekUNnDl1TNDQ1aNuBDEvAoj2L5IGIB2RswthrgociH5L08nSvBwYaPAiYtnmavJ/6vkzfMl1mZc2Soqoirxtai0+2ftL1CBi+drhEF0dLyN4Q/e0IXln3StcjYGjsUPlj9x/XBM+ufrZrmkD2iWxZkLfAAmd2sOagZB3PahPGJY6ToD1BPnX7q/d7vYi/4EXA7ordElYYZnG64bQMWjlInlj5hP52FP2W95O+UX29XsRf8CIgsihSRqwbYbHz1E598c1lm3VEcN3MjJleDbUWeRV5gU1A1fkqj7n8QvMFJeDH7T/Kzzt+lu9zvpfvsr+Tv3L/ahdmps8MbAKWFCyRIbFDLHad2qUEfLTlI53anBi/cbzcHnq7l/xqeGvTW4FNgFNpAAHnms7JvNx5Gh+A4L3BSk7/6P6ScyLHyn1hz+k9tq2ANwGn0gACGi42qFfHFEB4YbglAD9h5L5QWFVo2+qyBNReqJWR8SPl8RWPK8ZtHGcJiCqOsnJfiD8cb9vqsgQ0NjdqYBNzIEZRUFlgCThef9zKfaGmsca2FdAEvJvyrr6sGwNXDJTK85XyZMyTcufSOxVMkYaAlftXWrkvRBRG2AcGLAHYdI9FPf4TjADnjcAQ4JZfDQFLwNVgTMAt7yagm4BuAq4PAp5b/Zz0CuklvUI9cWvwrXJD0A1e8quBeyDU13P8gVYRUHehTspqy64ZCKp8PccfaBUB/2d0E+BLeD2hmwBfwusJ3QT4El5P6CbAl/BaoK6pTs42nvWSU1pzyy+2XJR9Vfsk43iG1DfVe+g4d9YmuN+pZ1W75VKLNLc0/2eAhdzZBuA+dJ1GwKiEUXJbyG1enaXo4swFqCaxjEZOMXTVULkn7B5Zd3id1U/YNMGjLtE7rLfHktvNwTdrh0pqS7T8ZuROEHo72wAUatB1KgF9wvtIalmqlZFQPRb9mPSL6mdlT696WubmzrXnlNruC79Piqovr0xDAIs1Rk+JjXvMeWsJYEnOl65TCZiRPkO+yPjCynIrcuWrzK9sBpl8NFleWPuCDmFzDZiXN0+mbJ6ix24CmlqapP/yKxloQBPAUGZ4G9mvO3+VLce2WAJ+2P6D/LbrN6s3KK4u1pECMRBAuQ4/AVbsXyGTkibZa1tLQEZ5hm0D4DPQdSoB2OqLa1+UsroylY2IH6GZpSGAzRisRDnvA5gKHTt/8byXD+i5uKdsP7ndXtteHzB+03jVdToBfHU2TFQ0VMjEpImqMwR8mPahTwLoEP6jqblJCQguCFZPThvLi5fLveH3yqlzp/Ta1hKQejRV2zAw+5c6nQCW2+n46oOrJXRvqOoMAexEYb3QeR9gJfqluJf02O0DACMpqTRJjwPaB0CAri7HDJJpadPkQM0B1RkCKhsq5f6I++XwmcP2Puxz9IbRuvbIuS8C2KtAzMBxwBPA8YSkCTI4drD19oYAsKxwmTwS9Yh2cs2hNfJG4hv6hY2TgoAxG8bI7OzZCvQs0OAf0DsJuGvZXfY6MD9vvl4DAZNTJnvoQFVDVecREFkcKUfOHtHjnJM5agJGZ17MIKUsRSanTpbRCaN1AdZ0DrDq5Hzpubvnqi8w+p+2/6TRYXVjtcd1wDxnYf5CLx3oVAK6CtpFAAHMn7l/2nOmNoYtciPjq/N1iOhwaG4Yu8YJGtmr8a/qV8MPmHYInt5Oelv1bK4gZzA6YghWnnec3GHbcGLk+pHq8adunuqlez3hdW2jXQQQrtKIOWd/ADH8N1nfWBkE/bLzF9Vh44kliR4wDpGS+++7f1dZeFG4PLP6GZmza47qyCMejnpYIooi1JzwF+xmNVOgiSMqzlXYdoetHabRJ8ebSjfZLT7sbzLXAPOx2kUANsdWWOZpzufnz9cOP7/meXsNUx9RHwSw1cbI3YCAzOOZ9jz/dL4lN6EkQb+60QE6bUaPr0BqYvJEiTsU5yGDAEaSU2bQbh8wPG647K+5vN+PqIpjpiHS15aWFg1lSTnbSsC28m0yNnGsHhPxsa2OjNHomy8129nErwSwU2zVwVX6MnSQaYsEhs5Un6+2nYaAPmF9ZM7OOR5gBxp6CPgg7QOVfZ7+uRLHKEBHm1PTpsotwbeozS7dt9Tm8aAtBHy89WOP55tdK+0mIO5wnMzKniXFNcU6NyMjZMUxpR1Lk+lbp6sMAu5edrduj3PCbMSGAOZ6Ix+4cqB8nfm1fQ4E08bsnNnqSx6MfFBKa0tV1xYC3kl+x+P5hNTo2k3AyfqTMmrDKI3zF+QvUBnOkc7gD2IPxKqsrSbAF4awo7VH1dnVX7hSIdIR8a9H/yz9Mz33qwkwVZHqMmyzTlwOM8niBscMlknJk3R/MbK2EsAX50vvrdyrZubuYGJpolaVOPYrAQAPPWDFAI86HrvHGMbmXAmIGWLzcAMT6kLA1vKtKuPrh+4L1SmVNtm4zWxDLAExxBuMMOoD3NsWAnac2uH1Dug6RABDnw44Zcz9xicACHDn4oCEBz33G1nPoJ5KnjOgIoMkxn80+lGt432Z+aXVtYUA57MNcMQdIoAgw12lRdZ48cpmCph25uEG7DxFz6+R8YXNyHCC3AC9u2LMs3meW2biEwPuM89wgmd1iICOgnSYNNUg73SexhDu67BfkqT1R9Z7EQ4gIelokm71w2xMnABO1J/wSLdBydkSfRbHfiWAqfSO0Dt0iAJs/72U96ye0fPptk9lQPQA3ayN2WAKzBDmGjJDyun8RYdr8DdvbnzTjsKggiCPokt5XblWlDaWbtRzvxOAHZtzTKDv8r42EMIh8j8m59DH77y87mVrKjjFb7O/tV+djhNJ4os4dxKAuUGWmbZBQBEAXlv/mq32UPhwFkANCI8ptR2rO6YLJW7fgHNjbQFfYAiAILJKE0MY+J0AQlwCKBB/JF6ein1KvxTAJFhic983Y9sMWVywWIexc8YxYHQwkrB1QwARKubhdpp+J+CmJTfpXA9uXHKj2jG2T/pL2OvrPhZX+PcKRVX3CDIg+CLAggBKcOx3ptLsrCcAvxNgojqAx6YoYpIeCHBPaYB8n9Uj7mdYu/UMdwI0ag4QQBzBaPg7/291ls5ZIuB8AEEMoTTHZIaExE49oMrMv1TwAVSV3cMaInsv661ypxOETFJ2slhzbcARgJPCq3O8cM9C9RHOUcDL8wdPIxuTMEZHg9Fj/yRMJmJ0EgCIFzA3Ksmc+50AvqD5wzVTHl79yJnL1WS+ILnFsDXDdIWJjjCHO/+DREzArDAldYrm+RDC9aZu4CYAMNOYv/75lQDWDJ3/LCGFJjp0XoO9MjtQIyDSY3g79YACTMi+EHWOtOOMFvED5CPO69mtyhpEU0uT/APpWzS9XrEGKAAAAABJRU5ErkJggg==" />
</body>

Base64 encoding should be implemented on mobile web pages where large number of small images (e.g. over 20) are used. This will significantly reduce the number of http requests.

Base64 Encoder

Use this tool to encode your image into Base64:

  • base64encode.net/base64-image-encoder

Disadvantages of Base64

  • One downside when implementing inline images through Base64 is that web browsers will not cache the images.
  • The Base64 encoded image normally will end up larger than the original image file. For example, a 2 kilobyte image file may result in over 2.5 kilobytes. One advice is not to use base64 encoding when your image file size exceeds 5 kilobytes.


Gordon Choi's Mobile Website Book has been available since November 2016.







Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book