Las continuas implementaciones de lo que será en el 2014 HTML5, nos permiten ir un paso más allá con el lenguaje, que ya no está únicamente diseñado para entornos web, y que se adentra en la fase frontend (incluso backend acompañado de node.js) de cualquier tipo de proyecto de desarrollo, sea online u offline, sea una aplicación, o un programa gestor de escritorio.
Esto hace que tengamos que tener en cuenta que nuestros proyectos pueden ser abiertos desde cualquier dispositivo, y con cualquier conexión, por lo que optimizar en la medida de lo posible el código solo hará que la herramienta tenga un ratio de conversión mayor.
Sprites
Como bien sabéis, una de las razones de mayor retardo en la carga de una web (llámese página o herramienta o servicio o aplicación), es precisamente la comunicación HTTP, y las propias capacidades del navegador para llevarlo a cabo.
Cada objeto, en un proyecto online, ha de ser llamado individualmente, de tal forma que a igual contenido, una plantilla CSS tarda menos en cargar que 8 plantillas CSS. Esta situación, que en ficheros HTML/CSS e incluso JavaScript, se hace de forma casi trasparente al usuario, con imágenes los tiempos aumentan.
Y aquí es donde entran los Sprites, imágenes compuestas de varias imágenes, de tal forma que el navegador sólo ha de llamar una vez al servidor para pedir la imagen, y gestionará internamente qué parte de la misma mostrará en cada momento.
Ejemplo práctico
El mejor ejemplo que os puedo dar lo tenéis justo encima de éstas palabras, en el menú de navegación de mi página en la versión de escritorio (al menos a día 11 de febrero del 2013).
El menú está compuesto por 5 imágenes, que cambian de color al pasarle el ratón por encima, lo que hace un total de 10 imágenes.
Esas 10 imágenes, se pueden condensar en una sola, pero para simplificarlo un poco, partiremos de las dos imágenes de portal, la básica, y la del efecto hover.
Se trata de dos imágenes, que van a ser usadas juntas, por lo que no parece descabellado pensar que si las unimos, nos ahorraremos una consulta al servidor extra, lo que en definitiva repercutirá a la velocidad de carga del proyecto.
He dejado un pequeño espacio entre ellas para crear el efecto de que se está pinchando un botón (como si la imagen entrase hacia dentro), aunque por supuesto, esto es totalmente opcional.
Si mostramos directamente la imagen tan cual viene, está claro que no obtendríamos el efecto buscado, por lo que para ello, recurrimos a la plantilla de CSS, que será la encargada de gestionar la transición entre una imagen y otra.
tendremos dos llamadas:
- buttonhome, un div con fondo la porción superior de la imagen.
- buttonhome:hover, que mediante el atributo hover, obligamos a cambiar el cuadrado de 80×80 a la porción inferior, tan pronto el ratón pase por encima.
Ahora solo falta llamar al id buttonhome en el código HTML mediante un div, y obtendremos el mismo efecto con la mitad de gasto de tráfico.
Por supuesto, esto mismo lo podríamos hacer con todas las imágenes de un proyecto, de tal forma que tendríamos una compendio de todas las demás, y mediante tamaños absolutos cogeríamos porciones de la misma a mostrar, aumentando el rendimiento de la web.
Sprites embebidos
Es el segundo nivel de la optimización de imágenes en proyectos online, y tengo que reconocer que yo no suelo usarlo.
Consiste en que cuando queremos colocar una imagen en el proyecto, el navegador no tenga que hacer una llamada al servidor para recibir el archivo, sino que directamente esté incrustado en el código. Para ello, bastaría con obtener una codificación de la imagen (recordar que cualquier imagen no es más que una combinación de 1s y 0s) que el navegador pueda comprender, para lo que usaremos el formato Base64 (por ser el más aceptado por los navegadores).
Bastaría ir a una página de conversión como ImageToBase64Converter, obteniendo el código para pegar mediante CSS en un fondo, y que tiene una estructura semejante a la siguiente:
background-image: url(data:image/png;base64,<código infumable>);
Ese conjunto de letras y números es vuestra imagen en base64, que evitará otra llamada más al servidor.
Por tanto, ya tenéis dos maneras eficaces de reducir el tiempo de carga de un proyecto online, y de forma muy sencilla.
Espero que os haya gustado.
Los sprites son las mejores maneras de utilizar imagenes en las páginas para achicar el tiempo de carga.
Pero estamos comentando, por que AMÉ la imagen del post!!! la robamos con su permiso 😉
Buenas tardes!
jajajaja, me alegro Kalyma. Gracias por el comentario!
Cierto es! Es bueno ver publicaciones de este tipo recordándonos que hay que optimizar el tiempo de carga, vivimos en un mundo de Banda Ancha y parece que la programacion o maquetacion para modems de 56k quedó en el olvido, y realmente esa era la verdadera esencia.
Muy buena Publicación Pablo. Muy Fan de wwww.pabloyglesias.com.
Saludos!
Muchísimas gracias Ángel Dominguez. Tienes razón. Vivimos buenas épocas de velocidad, sobre todo en países de europa y norteamérica, pero hay que tener en cuenta que no todos cuentan con las velocidades ADSL esperables, y sobre todo que aunque el LTE sea una realidad en algunos países, en la mayoría seguimos con conexiones móviles de H+ o 3G, que aún están a años luz.
Toda optimización es buena, ya que facilita al usuario navegar de forma cómoda y rápida. Después ya nos tiraremos los pelos cuando tengamos una web bien optimizada y tarde más de la cuenta debido a los dichosos javascript de los enlaces a FB, Twitter y compañía, jeje.
4G? jjajajajaajaja en España eso, de momento, se considera una utopía.