14 Steps - Imágenes Inline

Otra opción para optimizar nuestro código es insertar directamente la información de la imagen. A continuación veremos una imagen en la que ponemos la información en el mismo src de la imagen. También mostraremos el código generado en base 64.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAgAElEQVR4Ae2dCZSdR3Xn7+t+S++b1OpWa21JlmQZyQvCNmAZYxvbmOWEeA42S5LDTDIzIWGSQDiTk4GTCWeWM3OYZAITcsbBCRgI24ADZjG2Yxtb3uRFkrVbu9RqtXpR73u/7vn/6r37+tOzVizpdXK6ur9X9dVX23fvrVu3bt2qL2Yz2O3evbuyra3tmnQ6/a6ioqLrJycnY/LjuoqmpqZiugia4nmLYn5isZgp3pRnilvicKSP+iEy8kM5pJGTl0mbTR8iCUefEc5mnywuLh5V/jHV+UgikXh8w4YNr2efzXgvB6CZ1NJnn3123tDQ0O+qTR9NJpMry8rKHMmhmULQBTdXCAuE4Rm5Px/n6ajTw9F8HiciMIhI7R4YHx9/Qun/9y233PJkNO1MDJ8fFC5jy59++uk7R0ZGvlxbW3vF4OCgbdq0yV577TXr6ekJRAAi6PFchLlwZwtHm+/po3EePtczkE0aRzq+XyUlJbZ8+XK7+eab7eqrr7be3t7xsbGxvxJX+Py73/3uEa9jpvkzigCefPLJ+wSwvxPySx977DG7//777dChQzkkO+DPBMRzPT9TvosRD2FAlKWlpXbHHXfYH//xH9ucOXOsq6vrewsXLvyt5ubmGUkEM4YAnn/++XcODw8/UlNTU/GNb3zDvvSlLwWWGo/HLwZ+LlsZEII4mF111VX2la98xRoaGqyzs/OLN91002cvWyMuoKKiC0h7yZJu3bq1fHR09Esg/5lnnrEvf/nLJmHK/rkhHwDBheACO3bssC984QsBZpJh/lByzc2XDIBvouAZQQDqMfdoDL1OwpM98MADp4yzb+LdCpoVInjqqads48aNNm/evLiE2c+IO8wYjuvAKTgBZIHysfLycnv99ddNUz8TsLx9/6x9yTOGLANXSKVSt73yyivLZtoLFXyA3b59+zyx+mth+YcPHzZJzoGFXixAMSZT5rkc6WgD07mL5SgLIXZiYsKqq6vLJRBeq7L3X6zyL0Y5BScA9ZImzZ/r6CUSAi/GO+XKAKlMz2699VZDl8C9zxTwmbfjc/Hs5ZdftiNHjlw0IqBchjVmB7RDBLE017gZEij4ECAgpQQYebHz6qkXAjd6/vXXX2+SwE1CJtrB0BvpkSCGOIhuYGDAqqqq7MMf/nB4fiF1nCstdUEAcANdledKf7...