27 marzo 2012

12 Patterns Minimalistas de base64. No necesitas alojar ninguna imagen.

A veces buscamos una imagen con un pattern sencillo para ponerlo como fondo en el blog, y usamos una imagen que aunque pudiera ser pequeña, terminan agregando más peso a la página.

Pues bien, 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, ser solicitada desde el blog, y por lo tanto, no repercutir en el tiempo de carga del mismo.

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 no afectar tanto la carga del blog (vamos a pensarlo así).

Pues hoy te tengo listos doce patterns que hice gracias a un generador llamado 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 Chevron
Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAN0lEQVQYV2O8dvnafy1dLUYGAgCsgBjFcJMIKUaxEp9iDLfhUkyeQqKsJsozhBSBgpCRGEUghQCQCCgLvDlCewAAAABJRU5ErkJggg==




2. Pattern Cross


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




3. Pattern Diagonal

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


4. Patterns Dotted

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




5.Pattern Square


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


6. Pattern Diamond

Pattern en Base64

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

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


8.Pattern Patche


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


9. Pattern Cadena
Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAeElEQVQYV41QQQ6AIAzbiEiUkwf//0APnpCgBrRLZvBgZBe6rKXrmO5a4l7moWfgEELB672XXmcMMDlLnWHBGGpBfOZS1nSQqFRZk2oy8GO3GUtqX4vHfMga8nWKGykRPYi6CohuGKmdqEl/rZvDfJ1HQ7zO03LwCwXVebFck907AAAAAElFTkSuQmCC

10.Pattern Pointe
Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAg0lEQVQYV5VQywqDMBCclaaigUJBP9JTv6UnP9KCIETRFFcnsOAx5rKz2XkkKzjPsGzaVk8hDiEoq/c+9TYTgnfp8ChEftNX1XWcQ2KP5vWR/646rhFJZUrD12pJiWhOdnkVm3OyXpcZc+FAIkUkMpbPqveIsqqRT8yOzv7MrfXkLPwAPZV9sTkDxYwAAAAASUVORK5CYII=


11. Pattern Irregular
Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAWUlEQVQYV2N8/f3Xf1FONkYGJPD169f/3NzccDGQGhQFMLXYNGMoBClCNh1mG4pCbCbBxBhB7vnGxAo3BN29IIVc/34zEG8isnvwWo2sEMQmyjN4g4fYAAcAhaNKnwlPL5EAAAAASUVORK5CYII=

12. Pattern Brick
Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAR0lEQVQYV2NkQANfv7z+z80jyogujiKASxFIE1whPkVwhYQUgRUSo4hohSDDwG7EZypMDq9nkA3AGTzotmAELEgByDnogQ4AbZo33vlIgH0AAAAASUVORK5CYII=


Es importante saber que las imágenes recomendadas para ser codificadas en Base64, son aquellas que son pequeñas y simples, de lo contrario, el código generado será muy extenso y por lo tanto se le agregará tamaño al documento donde se use. Si bien hay algunos generadores que permiten convertir imágenes de distintos formatos en Base64, éstos limitan el tamaño del archivo al subirlo. También hay que mencionar que Internet Explorer en su versión 7 no da soporte a este tipo de imágenes, así que en esa versión del navegador no se va a ver la imagen.

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 ;)

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.