Códice | Entradas sobre «imágenes»

Conocer el ancho y alto de una imagen con JavaScript antes de usarla en HTML

JavGuerra — Mon, 01 Aug 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #node.js, #imágenes

Cuando una web está cargando, se producen cambios en el diseño conocidos como Flash Of Unestiled Content (FOUC) que son visualmente molestos para el usuario y le hacen perder su punto de referencia en la página. Las imágenes son uno de los principales causantes de estos cambios. Hasta que no son cargadas no se conoce su ancho y alto, por lo que es un buen criterio de diseño indicar el ancho y alto de la imagen en el HTML. Pero ¿qué ocurre cuando no conocemos las medidas de las imágenes que vamos a cargar? Pongamos como ejemplo una galería de fotos que tomamos mediante fetch. En esta entrada veremos como afrontarlo.

El código

Pongamos que tenemos un arreglo con un listado de URLs de fotos de adorables perritos que queremos mostrar en una galería de fotos. Este arreglo podemos definirlo u obtenerlo mediante fetch desde una API u otro lugar. Cada imagen tiene un tamaño distinto, osea, unas medidas para los valores width y height diferentes. Nuestro objetivo es conocer estos valores antes de mostrar las fotos en la galería, para asignarles su ancho y alto correctos y evitar de esa manera el FUOC. De otra forma, a medida que se carguen las imágenes en la galería, estas irán abriéndose hueco para ocupar su espacio «empujando» el diseño.

Con este código que seguramente encontré y adapté de StackOverflow o un sitio similar podemos hacerlo. Lo describo más abajo.

const galeria = document.getElementById('galeria');

const fotos = [
    'https://images.dog.ceo/breeds/dachshund/Stretched_Dachshund.jpg',
    'https://images.dog.ceo/breeds/cattledog-australian/IMG_1211.jpg',
    'https://images.dog.ceo/breeds/dachshund/dachshund-7.jpg'
];

function medidas(urlFoto) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload  = () => {
            resolve({ ancho: img.width, alto: img.height });
        };
        img.onerror = () => {
            reject(new Error('Imagen no encontrada.'));
        };
        img.src = urlFoto;
    });
}

fotos.forEach((urlFoto, i) => {
    medidas(urlFoto)
        .then(mide => {
            galeria.innerHTML += `<img src="${urlFoto}" `
            + `width="${mide.ancho}" height="${mide.alto}" `
            + `alt="Foto ${i}" title="Foto ${i}" />`
        })
        .catch(err => console.error(err));
    }
)

Para usar este código, debemos tener algo como esto en el HTML:

<div id="galeria"></div>

Vamos con JavaScript. Primero defino las variables con las que voy a trabajar. La referencia al elemento del DOM y el arreglo de URLs de fotos de perritos:

const galeria = document.getElementById('galeria');

const fotos = [
    'https://images.dog.ceo/breeds/dachshund/Stretched_Dachshund.jpg',
    'https://images.dog.ceo/breeds/cattledog-australian/IMG_1211.jpg',
    'https://images.dog.ceo/breeds/dachshund/dachshund-7.jpg'
];

Obtener las medidas

Aquí es donde se produce la magia. Veamos como:

function medidas(urlFoto) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload  = () => {
            resolve({ ancho: img.width, alto: img.height });
        };
        img.onerror = () => {
            reject(new Error('Imagen no encontrada.'));
        };
        img.src = urlFoto;
    });
}

Esta función recibe como parámetro la URL de la imagen a calcular y envuelve una promesa que resolverá un objeto con las medidas ancho y alto o bien un error.

Para hacerlo, instancio una nueva imagen con const img = new Image(); y declaro dos eventos asociados a img, un evento que se disparará cuando se cargue la imagen en img con img.src = urlFoto; (img.onload), y otro que se disparará si se produce un error al cargar la imagen (img.onerror).

Es decir, cuando cargo la imagen con img.src = urlFoto; pueden pasar dos cosas, que se lance el evento onload si todo fue bien, o el evento onerror si algo falló.

Si todo fue bien, la imagen estará «cargada» en img, y podemos obtener su ancho y alto. Mediante resolve({ ancho: img.width, alto: img.height }); devuelvo estos valores dentro de un objeto.

Si algo falló, devuelvo un error con reject(new Error('Imagen no encontrada.'));.

Poner las imágenes en la galería

Si tenemos la función medidas() a la que podemos pasarle una URL, podemos recorrer el arreglo fotos y poner en nuestro HTML cada foto con sus medidas exactas:

fotos.forEach((urlFoto, i) => {
    medidas(urlFoto)
        .then(mide => {
            galeria.innerHTML += `<img src="${urlFoto}" `
            + `width="${mide.ancho}" height="${mide.alto}" `
            + `alt="Foto ${i}" title="Foto ${i}" />`
        })
        .catch(err => console.error(err));
    }
)

Mediante un .forEach() recorro cada elemento del arreglo. De él obtengo dos valores, cada una de las URLs y el índice que ocupa en el arreglo cada URL.

Llamo a la función medidas() a la que le paso como parámetro la URL de una foto (urlFoto).

La función devuelve una promesa que debe ser resuelta. Así mediante .then() obtengo el objeto mide que contiene el ancho y el alto de la imagen que indiqué mediante la URL, que es el resultado del resolve de la promesa. De otra forma, con .catch() se captura el error resultante del reject de la promesa.

Si tenemos las medidas de ancho y alto de la imagen a mostrar, ya podemos conectarla al DOM con:

galeria.innerHTML += `<img src="${urlFoto}" `
+ `width="${mide.ancho}" height="${mide.alto}" `
+ `alt="Foto ${i}" title="Foto ${i}" />`

Esto insertará en el elemento del DOM identificado con #galeria una imagen (img) con el enlace a la foto (src), su ancho (width), alto (height) y una etiqueta alt que «describe» (vagamente) la foto. Con title podemos obtener la misma descripción al pasar con el ratón sobre la imagen.

Por supuesto a la imagen podemos aplicarle las clases CSS que deseemos para, por ejemplo, que aparezca correctamente si usamos flexbox o similar para mostrar la galería…

El módulo image-size

Si realizamos el test Page Speed de Google a nuestra página y no indicamos el ancho y alto de las imágenes, esto nos penalizará en la puntuación de viabilidad en el apartado Cumulative Layout Shift o CLS. El «movimiento inesperado de contenido» en español, mide la estabilidad visual cuantificando la frecuencia con la que los usuarios experimentan cambios de diseño inesperados. Así pues, cuanto más bajo sea el CLS, mejor.

Manz, de manz.dev, en su canal de Discord, cuenta lo siguiente:

El navegador nunca va a saber las dimensiones (ancho y alto) de la imagen hasta descargar la imagen. Si la imagen es pesada va a tardar un rato y no es posible “reservar” ese espacio en la web porque no lo conoce. La única forma de evitar el CLS es indicarle tú previamente el tamaño para que no haya “salto”.

Mediante la opción propuesta, podemos resolver este problema si somos nosotros los que desarrollamos todo el código, pero si estamos trabajando con frameworks, también hay soluciones disponibles. Manz sigue diciendo:

Hay una forma de evitarlo, si estás usando SSG (eleventy, astro, next, etc…) y es que en la fase de “compilación” le pases algún plugin que vaya mirando las imágenes y sacando sus dimensiones con node y añadiendo automáticamente el width y height. Yo, por ejemplo, uso este: image-size

Como indica Manz, image-size es una opción que permite obtener las dimensiones de una imagen y que podemos instalar con npm.

Un truco

Em Twitter Manz contaba:

Otras soluciones más simples e ingeniosas pueden ser establecer un alto máximo para el contenedor, de modo que no haga reflow de elementos inferiores, y los items del interior (galería) los vas haciendo aparecer a medida que se carguen con CSS/JS.

Esta, sin duda, es otra opción.

Resumen

En Twitter, Manz proponía también estas tres opciones para evitar el reflow que podemos tomar a modo de resumen:

Establecer siempre el width y height (tedioso)

Usar aspect-ratio de CSS (https://caniuse.com/mdn-css_properties_aspect-ratio)

Automatizar con alguna herramienta de preprocesado. Yo en 11ty uso image-size o soluciones parecidas

Enlaces

Ejemplo de uso de la solución propuesta: Galería de perritos.
Módulo image-size.
Page Speed de Google.
¿Qué es el Cumulative Layout Shift (CLS)?.
Twitter de @Manz: ¿Qué es «FUOC»?.
Web de @Manz: manz.dev.

Cliparts

JavGuerra — Sat, 13 Aug 2022 00:00:00 GMT

Etiquetas: #clipart, #imágenes, #inkscape, #pro-bono, #diseño, #arte, #svg

Hace tiempo creé una serie de cliparts básicos elaborados con Inkscape que subí a la plataforma OpenClipArt.org Aquí puedes acceder a estos recursos.

Algunos diseños los puedes pedir en RedBubble.

Generar enlaces dinámicos de imágenes almacenadas en MongoDB

JavGuerra — Sun, 06 Nov 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #node.js, #mongodb, #imágenes

Las bases de datos a menudo contienen referencias a recursos que no son almacenados en su misma estructura. Un claro ejemplo de ello son las fotografías o imágenes que acompañan a los productos de un catálogo. En tal caso, guardar la información es sencillo, es suficiente con almacenar la ruta completa al recurso en un campo de tipo String, pero, ¿que ocurre si, presumiblemente, nuestros datos van a cambiar de ubicación, o van a correr en distintas instancias o en diferentes hospedajes? En ese caso, lo recomendable es almacenar la información del nombre del recurso en la BBDD, y entonces tendremos dos alternativas para generar el enlace completo: modificar los datos de la BBDD mediante un script para que la url al recurso sea la adecuada cada vez que cambiamos de ubicación los datos, o bien generar la ruta al recurso de forma dinámica, al vuelo, cuando se realizan las consultas. Vamos a ver aquí la segunda.

El ejemplo

Partimos de la siguiente premisa. En las variables globales del sistema tenemos almacenadas la ruta y el puerto del servidor donde están ubicadas las imágenes, que es la información susceptible de cambiar de lugar. Tal vez estos datos estén disponibles mediante dotenv.

Tomemos como referencia el ejemplo de la entrada anterior. Dos colecciones relacionadas, libros y autores, y en las que queremos incluir un dato en cada documento de la colección libros con la foto de portada del libro, y un dato con la foto del autor en cada documento de la colección autores. Algo como:

libro: {
    portada: 'don-quijote.png',
}

autor: {
    foto: 'cervantes.jpg',
}

obviamente, tanto la colección libros como la conección autores tendrán otros datos, no sólo la portada o la foto.

La ruta

Para poder acceder a la portada del libro, necesitamos completar la ruta a la imagen. En este ejemplo usaremos el dominio lalibreria2022.com al que se accede por el porto 80. Esta información la tenemos almacenada en un fichero .env de nuestra aplicación de la siguiente forma:

HOST='https://lalibreria2022.com'
PORT=80

Y asumo que las portadas se almacenan en una carpeta llamada portadas, y las fotos en otra llamada fotos. De esta forma, para acceder a la imagen don-quijote.png debemos completar la siguiente ruta:

HOST + ':' + PORT + '/' + 'portadas' + '/' + 'don-quijote.png'

y obtendríamos:

https://lalibreria2022.com:80/portadas/don-quijote.png

Alterando los resultados

Cuando llevamos a cabo las búsquedas de información sobre la BBDD, esta nos devolverá, como ya sabemos, el nombre del recurso (‘don-quijote.png’), pero queremos que la BBDD devuelva dinámicamente la ruta antes mencionada. Para ello hay que recorrer el resultado obtenido y hacer cambios sobre los datos. Un forEach() es suficiente.

const insertarRutas = datos => {
    const url = process.env.HOST + ':' + process.env.PORT + '/';
    datos.forEach( elemento => elemento.portada = url + 'portadas/' + elemento.portada );
    return data;
}

Tras cada búsqueda, aplicando esta función al resultado, recorro todos los documentos de la colección (datos) y cambio el valor del dato portada en cada documento.

También con resultados agregados

Cuando llevamos a cabo consultas agregadas, el proceso es similar. En una consulta donde obtenemos los libros y las referencias a sus respectivos autores, debemos repetir el proceso también para el dato foto de la colección autores, pero hay que tener en cuenta lo siguiente:

{: .box-note} Nota: Cuando recorremos una colección agregada lo hacemos sobre una colección y sobre referencias a otra colección, es decir, si hay varios libros de un mismo autor, aunque los datos del autor se muestren en varios libros agregados, solo están almacenados una vez.

Esto tiene importancia porque, al realizar el cambio de la ruta de la foto del autor, estaríamos cambiándola tantas veces como libros existan, y generando entonces una url errónea con rutas repetidas. Si tenemos dos libros de Cervantes, la ruta a la foto podría verse así:

https://lalibreria2022.com:80/fotos/https://lalibreria2022.com:80/fotos/cervantes.jpg

Para evitar esto, debemos implementar el siguiente código, en el que se incluyen ambos casos, el de la portada del libro y el de la foto del autor:

const insertarRutas = datos => {
    const url = process.env.HOST + ':' + process.env.PORT + '/';
    datos.forEach(elemento => {
        elemento.portada = url + 'portadas/' + elemento.portada;
        if (!elemento.autor.ref.foto.includes(url)) 
             elemento.autor.ref.foto = url + 'fotos/' + elemento.autor.ref.foto;
    });
    return data;
}

Con el condicional (if) me aseguro de que la foto no contiene ya la ruta completa, y si no es así, la completa.

Enlaces

Usando populate con paginate y filtrando los resultados

Logotipos

JavGuerra — Sun, 14 Aug 2022 00:00:00 GMT

Etiquetas: #imágenes, #diseño, #inkscape, #pro-bono, #arte, #svg

En ocasiones realizo logotipos e imagen corporativa para entidades sin ánimo de lucro con las que me relaciono. En esta entrada muestro una pequeña galería de esos trabajos elaborados con Inkscape.

Nota: Esta entrada se actualizará cuando se produzcan novedades.

Galería


Alapsa Venezuela	BienEstar psicológico
El hogar de Alba	FEVEPOF
Madurez Escolar Integral	Marfan Venezuela
Mundo Marfan Latino	Monograma
Interacción y perspectiva	Conectiva
QL is 25	Recursos 40 aniversario del QL