La mayoría de las imágenes en la web son superfluas. Si podría ser un idiota por un momento, el 99% de ellos ni siquiera son tan útiles (aunque hay excepciones raras). Esto se debe a que las imágenes a menudo no complementan el texto que se supone que admiten y, en su lugar, dolores , tomando una eternidad para cargar y explotar límites de datos como algún tipo de impuesto de rendimiento.

Afortunadamente, este es principalmente un problema de diseño hoy porque hacer que las imágenes funcionen 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, tal vez, JPEG XL). Tenemos la magia de las imágenes de respuesta al curso. 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 una carga lisa:

Esta imagen solo se cargará cuando un usuario se desplaza por la página para que sea visible para el usuario, lo que la elimina de la carga de la página inicial y eso es genial. Hacer esa carga inicial de una página web Lightningfast es un gran problema.

pero tal vez hay imágenes que deberían nunca cargar en absoluto. 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 NPRAND haga clic para un poco. ¿No es ... tan genial? ¡Es legible! No hay basura en todo el lugar, me respeta como usuario y - cielos dulces - es rápido .

¡Entonces! ¿Qué pasaría si pudiéramos mostrar imágenes en un sitio web, pero solo una vez que se hacen clic o aprovechan? ¿No sería bueno si pudiéramos mostrar un marcador de posición e intercambiarlo por la imagen real al hacer clic? Algo como esto:

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

Método #1: usando sin un atributo SRC

podemos eliminar el atributo SRC de una etiqueta para ocultar una imagen. Luego podríamos poner el archivo de imagen en un atributo, como Data-Src o algo así, solo así:

de forma predeterminada, la mayoría de los navegadores mostrarán un icono de imagen roto con el que probablemente esté familiarizado:

está bien, entonces es accesible. ¿Supongo? Puede ver la etiqueta ALT renderizada en la pantalla automáticamente, pero con una ligera pizarra 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 dan una forma de eliminar el icono de la imagen rota con CSS (y probablemente no se nos permita de todos modos). También es un poco molesto diseñar el texto alternativo. Pero si eliminamos el atributo ALT por completo, entonces el icono de la imagen rota se ha ido, aunque esto hace que el inutilizable sin JavaScript. Entonces, eliminar ese texto alternativo es un no-go.

Como dije: ugh . No creo que haya una manera de hacer que este método funcione (¡aunque demuestre que está equivocado!).

Método #2: Uso de enlaces para crear una imagen

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

Photograph of hot air balloons by Musab Al Rawahi. 144kb

que, sí, nada inteligente está sucediendo todavía, esto simplemente renderizará un enlace a una imagen:

que 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 comunicarnos con JavaScript para evitar que el enlace se cargue al hacer clic, tome el atributo href 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 esto es solo un ejemplo. Continúe y haga clic en el enlace para cargar la imagen nuevamente:

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

Tal vez también podríamos hacer un componente web con esto, o incluso detectar si alguien ha hecho a los datos reducidos y solo cargar imágenes si alguien tiene suficientes datos o algo. ¿Qué opinas?