12 Patterns Minimalistas en Base64 (sin imagen)

A veces buscamos un pattern sencillo para ponerlo como fondo en el blog o algún otro elemento de la plantilla, y usamos una imagen, que aunque pudiera ser pequeña y muy ligera, termina sumándose a la lista de las múltiples peticiones HTTP que necesitamos para que nuestro blog funcione (enlazar la imagen desde un sitio de alojamiento).

Esto pudiera resolverse, si usamos imágenes en Base64, de ese modo la imagen no necesita estar almacenada en ningún sitio de almacenamiento de imágenes.

Actualmente Blogger utiliza imágenes codificadas en Base64 en muchos de los elementos de la plantilla, por ejemplo, las flechitas de la opción de "Respuestas" en los comentarios anidados, el icono con el lápiz para destacar el comentario del autor en el sistema de comentarios anidados, etc, lo que demuestra la preocupación de Blogger por generar menos peticiones HTTP, en el blog, motivados posiblemente por el cuento de la carga del blog, vamos a pensarlo así.

Bueno, pues pensando en eso, hoy te tengo listos doce patterns que hice gracias a Patternify, del que ya te había hablado antes, y que son sólo una pequeña muestra del potencial que tiene esta herramienta, que genera patterns en Base64.

Pero, ¿cómo usarlo? Es muy fácil, simplemente pones el código del pattern donde debería ir la URL de la imagen, cuando usamos la propiedad "background", por ejemplo:

#div{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAI3b978zwjjgzjq6uqMYAEYB8RmROaABAACog+PwFUo/gAAAABJRU5ErkJggg==) repeat;

...y si por ejemplo al pattern le quieres agregar un color de fondo, puesto que es pattern que usarás es transparente, simplemente se lo agregas así (color resaltado de rojo)...

#div{background:#f1f1f1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAI3b978zwjjgzjq6uqMYAEYB8RmROaABAACog+PwFUo/gAAAABJRU5ErkJggg==) repeat;

Patterns transparentes 

1. Patern Zig-Zag

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAN0lEQVQYV2O8dvnafy1dLUYGAgCsgBjFcJMIKUaxEp9iDLfhUkyeQqKsJsozhBSBgpCRGEUghQCQCCgLvDlCewAAAABJRU5ErkJggg==

2. Pattern Cross

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQYV2N88eLFfwkJCUYGPACkBqwAn2KYHF6TkC0hXyHIKpBJ6O7GcCO6Qhq7kajgITbAAW/5L3lsc4OvAAAAAElFTkSuQmCC

3. Pattern Diagonal

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQALXLl/7zwjjgzhaulqMYAEYB8RmROaABAD/ew+Dsak1RQAAAABJRU5ErkJggg==

4. Patterns Dotted

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYV2O8cunKfx09HUYGAoCgApj+UYV4Q5Lo4AEAZqcEC4k4yPQAAAAASUVORK5CYII=

5.Pattern Square

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAL0lEQVQYV2NkAIKvX7/+5+bmZgSx0QFMjhHEAEniUwiSx2oKNpOHl0KSgoeYAAcAlMYfxwAe1QwAAAAASUVORK5CYII=

6. Pattern Diamond

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATUlEQVQYV2NkQANfv379DxLi5uZmRJZC4YAUwRQgs0Ea4ArRJUCSyGJghdgUwayFyTHiU4SsmHiFRFuN7hbkIMHwDDbFOIMHWTG2AAcAimZHx0CCWIsAAAAASUVORK5CYII=

7. Pattern Circles

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAO0lEQVQYV2NkAILX33/9F+VkYwSx0QFMjhHEEGRnZWBhYsSq8M+////f//zNgFUSm8nDSyFJwUNMgAMA9tclwWfJ3zkAAAAASUVORK5CYII=

8.Pattern Patche

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAeklEQVQYV42QsQ6AMAhEobEa7eTg/3+gg1M1WtMqJNdUo0aWXsMDDpjOGJctDW3Nor33SV7nnP6RYxF9Y6kyrFqSCCneY0rTGkirUFlCJSw6j5uNfeKoi0FtMDwJCJ/lBAG14x2EefjNIDb96qijfy/zdh4scTnPn4MfVRJrfd32iTAAAAAASUVORK5CYII=

9. Pattern Cadena

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAeElEQVQYV41QQQ6AIAzbiEiUkwf//0APnpCgBrRLZvBgZBe6rKXrmO5a4l7moWfgEELB672XXmcMMDlLnWHBGGpBfOZS1nSQqFRZk2oy8GO3GUtqX4vHfMga8nWKGykRPYi6CohuGKmdqEl/rZvDfJ1HQ7zO03LwCwXVebFck907AAAAAElFTkSuQmCC

10.Pattern Pointe

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAg0lEQVQYV5VQywqDMBCclaaigUJBP9JTv6UnP9KCIETRFFcnsOAx5rKz2XkkKzjPsGzaVk8hDiEoq/c+9TYTgnfp8ChEftNX1XWcQ2KP5vWR/646rhFJZUrD12pJiWhOdnkVm3OyXpcZc+FAIkUkMpbPqveIsqqRT8yOzv7MrfXkLPwAPZV9sTkDxYwAAAAASUVORK5CYII=

11. Pattern Irregular

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAWUlEQVQYV2N8/f3Xf1FONkYGJPD169f/3NzccDGQGhQFMLXYNGMoBClCNh1mG4pCbCbBxBhB7vnGxAo3BN29IIVc/34zEG8isnvwWo2sEMQmyjN4g4fYAAcAhaNKnwlPL5EAAAAASUVORK5CYII=

12. Pattern Brick

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAR0lEQVQYV2NkQANfv7z+z80jyogujiKASxFIE1whPkVwhYQUgRUSo4hohSDDwG7EZypMDq9nkA3AGTzotmAELEgByDnogQ4AbZo33vlIgH0AAAAASUVORK5CYII=

Hay que recalcar que usar imágenes codificadas en Base64, es ideal para imágenes pequeñas, de lo contrario, el código generado será muy extenso y por lo tanto se le agregará tamaño al documento donde se use,  y si bien hay algunos generadores que permiten convertir imágenes de distintos formatos en Base64, éstos limitan el tamaño del archivo al subirlo.

Y por supuesto, si no encuentras algún pattern que te guste o se adapte a lo que buscas, puedes crear el propio en Patternify ;)