Cómo mostrar imágenes al hacer clic

La mayoría de las imágenes en la web son superfluas. Si puedo ser un idiota por un momento, el 99% de ellos ni siquiera son tan útiles (aunque hay raras excepciones). Esto se debe a que las imágenes no suelen complementar el texto que se supone que deben respaldar y, en cambio, perjudican a los usuarios, tardan una eternidad en cargarse y aumentan los límites de datos como una especie de impuesto al rendimiento.

Afortunadamente, esto es principalmente un problema de diseño hoy en día porque hacer que las imágenes sean eficientes y más fáciles de usar es mucho más fácil de lo que era antes. Tenemos mejores formatos de imagen como WebP (y pronto, quizás, JPEG XL). Por supuesto, tenemos la magia de las imágenes responsivas. Y existen toneladas de excelentes herramientas, como ImageOptim, así como recursos como el nuevo libro de Addy Osmani.

Aunque quizás mi forma favorita de mejorar el rendimiento de la imagen sea con carga diferida:

img href="image.webp" alt="Image description"

Esta imagen solo se cargará cuando un usuario se desplace hacia abajo en la página para que sea visible para el usuario, lo que la elimina de la carga inicial de la página y ¡eso es simplemente genial! Hacer que la carga inicial de una página web sea increíblemente rápida es un gran problema.

Pero tal vez haya imágenes que nunca deberían cargar. Quizás hay situaciones en las que sería mejor si una persona pudiera optar por verlo. He aquí un ejemplo: tome la versión de sólo texto de NPR y haga clic en un momento. ¿No es… tan genial? ¡Es legible! No hay basura por todas partes, me respeta como usuario y, cielos, es rápido.

¡Entonces! ¿Qué pasaría si pudiéramos mostrar imágenes en un sitio web pero solo una vez que se hace clic o se toca en ellas? ¿No sería genial si pudiéramos mostrar un marcador de posición y cambiarlo por la imagen real al hacer clic? Algo como esto:

Bueno, tenía dos pensamientos aquí sobre cómo construir este capítulo (la regla de oro es que nunca hay una sola manera de construir nada en la web).

Método #1: Usar imgsin un srcatributo

Podemos eliminar el srcatributo de una imgetiqueta para ocultar una imagen. Luego podríamos poner el archivo de imagen en un atributo, como data-srco algo así, como este:

img data-src="image.jpg" src="" alt="Photograph of hot air balloons by Musab Al Rawahi. 144kb"

De forma predeterminada, la mayoría de los navegadores mostrarán un ícono de imagen rotado con el que probablemente estés familiarizado:

Bien, entonces es algo accesible. ¿Supongo? Puedes ver la altetiqueta representada en la pantalla automáticamente, pero con un ligero toque de JavaScript, podemos intercambiarla srccon ese atributo:

document.querySelectorAll("img").forEach((item) = {  item.addEventListener("click", (event) = {    const image = event.target.getAttribute("data-src");    event.target.setAttribute("src", image);  });});

Ahora podemos agregar algunos estilos y uf, oh no:

Puaj. En algunos navegadores habrá un pequeño icono de imagen rota en la parte inferior cuando la imagen no se haya cargado. El problema aquí es que los navegadores no ofrecen una manera de eliminar el ícono de imagen rota con CSS (y probablemente no deberíamos permitírnoslo de todos modos). También es un poco molesto darle estilo al alttexto. Pero si eliminamos el altatributo por completo, entonces el ícono de imagen rota desaparecerá, aunque esto lo hace imginutilizable sin JavaScript. Entonces, eliminar ese alttexto no es posible.

Como dije: Uf. No creo que haya una manera de hacer que este método funcione (¡aunque demuéstrame que estoy equivocado!).

Método #2: Usar enlaces para crear una imagen

La otra opción que tenemos es comenzar con el humilde hipervínculo, así:

a href="image.jpg"Photograph of hot air balloons by Musab Al Rawahi. 144kba

Lo cual, sí, todavía no está sucediendo nada inteligente; esto simplemente mostrará un enlace a una imagen:

Eso funciona en cuanto a accesibilidad, ¿verdad? Si no tenemos JavaScript, entonces todo lo que tenemos es solo un enlace en el que la gente puede hacer clic opcionalmente. En cuanto al rendimiento, ¡no puede ser mucho más rápido que el texto sin formato!

Pero desde aquí, podemos utilizar JavaScript para detener la carga del enlace al hacer clic, tomar el hrefatributo dentro de ese enlace, crear un elemento de imagen y, finalmente, colocar esa imagen en la página y eliminar el enlace anterior una vez que hayamos terminado:

document.querySelectorAll(".load-image").forEach((item) = {  item.addEventListener("click", (event) = {    const href = event.target.getAttribute("href");    const newImage = document.createElement("img");    event.preventDefault();    newImage.setAttribute("src", href);    document.body.insertBefore(newImage, event.target);    event.target.remove();  });});

Probablemente podríamos diseñar este enlace de marcador de posición para que se vea un poco mejor que lo que tengo a continuación. Pero esto es sólo un ejemplo. Continúe y haga clic en el enlace para cargar la imagen nuevamente:

¡Y ahí lo tienes! No es innovador ni nada por el estilo, y estoy seguro de que alguien ha hecho esto antes en algún momento u otro. Pero si quisiéramos ser extremadamente radicales en cuanto al rendimiento más allá de la primera pintura y la carga inicial, entonces creo que esta es una solución aceptable. Si vamos a crear un sitio web de sólo texto, creo que este es definitivamente el camino a seguir.

Quizás también podríamos crear un componente web a partir de esto, o incluso detectar si alguien lo tiene prefers-reduced-datay luego solo cargar imágenes si alguien tiene suficientes datos o algo así. ¿Qué opinas?