La mayoría de las imágenes de la web son superfluas. Si pudiera 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 admitir y, en cambio, perjudican a los usuarios, demorando una eternidad en cargarse y aumentando 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 más eficaces y 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). Tenemos la magia de las imágenes receptivas, por supuesto. Y hay 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 es con la carga diferida:
<img href="https://css-tricks.com/how-to-show-images-on-click/image.webp" alt="Image description" loading="lazy">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 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 cargarse. Quizás hay situaciones en las que sería mejor si una persona pudiera optar por verlo. Aquí hay un ejemplo: tome la versión de solo texto de NPR y haga clic un poco. ¿No es … tan genial? ¡Es legible! No hay basura por todas partes, me respeta como usuario y, cielo santo, es rápido.
¿Les acabo de mostrar una imagen en una publicación de blog que insulta el concepto mismo de imágenes? ¡Sí! Demándame.
¡Entonces! ¿Qué pasaría si pudiéramos mostrar imágenes en un sitio web pero solo una vez que se haga clic o toque? ¿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, tuve dos pensamientos aquí sobre cómo construir este capítulo (la regla de oro es que nunca hay una forma de construir nada en la web).
Método n. ° 1: usar <img> sin un src atributo
Podemos quitar el src atributo de un <img> etiqueta para ocultar una imagen. Luego podríamos poner el archivo de imagen en un atributo, como data-src o algo, como esto:
<img data-src="https://css-tricks.com/how-to-show-images-on-click/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 icono de imagen rota con el que probablemente esté familiarizado:
De acuerdo, es algo accesible. ¿Creo? Puedes ver el alt etiqueta renderizada en la pantalla automáticamente, pero con una ligera pizca de JavaScript, podemos cambiar el src con 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 ugh, 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 le brindan una forma de eliminar el ícono de imagen rota con CSS (y probablemente no deberíamos poder hacerlo de todos modos). Es un poco molesto diseñar el alt texto también. Pero si quitamos el alt atributo por completo, entonces el icono de imagen rota desaparece, aunque esto hace que el <img> inutilizable sin JavaScript. Así que quitando eso alt el texto es un no-go.
Como dije: Ugh. No creo que haya una manera de hacer que este método funcione (¡aunque demuestre que estoy equivocado!).
Método n. ° 2: usar enlaces para crear una imagen
La otra opción que tenemos es comenzar con el humilde hipervínculo, así:
<a href="https://css-tricks.com/how-to-show-images-on-click/image.jpg">Photograph of hot air balloons by Musab Al Rawahi. 144kb<a>Lo cual, sí, todavía no ha sucedido nada inteligente, esto solo representará un enlace a una imagen:
Eso funciona en términos de 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 usar JavaScript para evitar que el enlace se cargue al hacer clic, tome el href atributo dentro de ese enlace, cree un elemento de imagen y, finalmente, arroje esa imagen en la página y elimine 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 este es solo un ejemplo. Continúe y haga clic en el enlace para volver a cargar la imagen:
¡Y ahí lo tienes! No es innovador ni nada, y estoy seguro de que alguien lo ha hecho antes en algún momento u otro. Pero si quisiéramos ser extremadamente radicales en el rendimiento más allá de la primera pintura y la carga inicial, creo que esta es una solución aceptable. Si estamos creando un sitio web de solo texto, creo que definitivamente este es el camino a seguir.
Quizás también podríamos hacer un componente web a partir de esto, o incluso detectar si alguien tiene prefers-reduced-data y luego solo cargue imágenes si alguien tiene suficientes datos o algo así. ¿Qué piensas?