Carga Adaptativa de Imágenes con Gatsby y Web API

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:12

Carga Adaptativa de Imágenes con Gatsby y Web API

Curso de Optimización Web

Clase 19 de 38

Clase 19 / 38

Comentarios (8)8 comentarios

Ciro Villafraz

Hace 6 años

Faltó dejar el link de referencia al elemento picture, aquí lo comparto https://developer.mozilla.org/es/docs/Web/HTML/Elemento/picture

Jonathan 🦑 Alvarez

Profesor

Hace 6 años

Gracias! :D

Fernando Quinteros Gutierrez

Hace 6 años

📲 Técnicas avanzadas con Responsive Loading

Recursos

HTML: Lenguaje de etiquetas de hipertexto | MDN

Apuntes

Una imagen de 300 kb
Un usuario que se conecte con un dispositivo de gama alta con una red 5G va ser diferente con un usuario de gama baja con una red 2G

Como ayudamos a que nuestros usuarios tengan la mejor imagen sin importar su conexión y dispositivo

Es ahi donde viene el responsive loading el cual se encarga de esta tarea
Esto nos ayuda a cargar imágenes según el tamaño del dispositivo
Existen servicios o librerías como cloudinary o Gatsby el cual nos ayudan a usar esta característica

RESUMEN: Podemos mejorar la experiencia de usuario con las imágenes brindando soporte para diferentes tamaños de dispositivo a las imágenes y que estas carguen la resolución y el tamaño según a este criterio

Eliseo Ávila

Hace 6 años

Gracias por tus apuntes! 🤘🏻

Daniel Felipe Merchan Fuquen

Hace 5 años

En está clase se realiza un ejercicio con está técnica.

Luis Alejandro Vera Hernandez

Hace 5 años

El elemento HTML <picture> es un contenedor usado para especificar múltiples elementos <source> y un elemento <img> contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos.

Picture

Daniel Alberto Esquinazi

Hace 6 años

¿Por que no es conveniente generarlo de forma manual al responsive loading? Hay casos en los que si es conveniente?

Fernando Quinteros Gutierrez

Hace 6 años

Excelente pregunta, parece ser que Jonathan se refiere a que no es conveniente hacerlo de forma manual como lo hace Gatsby, el cual lo hace para una variedad de tamaños considerable de forma automática. Lo puedes hacer manualmente como Gatsby pero no es recomendable porque para hacerlo tienes que tener diferentes imágenes para cada tamaño de dispositivo que te plantees. Pero te puedes poner el reto de investigar cómo hacerlo e implementarlo, te invito a leer el siguiente artículo que habla del tema.

LAZY LOAD RESPONSIVE IMAGES IN 2020

💚 Nunca pares de aprender 🤟

Kenneth Angulo L

Hace 2 meses

¿Cuándo debo usar herramientas como Cloudinary?

Debes implementar estas plataformas cuando tu proyecto escale y necesites gestionar un volumen masivo de contenido visual sin saturar tu propio servidor. Estos servicios en la nube interceptan la petición, analizan el dispositivo del cliente y transforman la imagen al vuelo, entregando formatos de última generación y resoluciones milimétricas de forma transparente. Es la arquitectura perfecta para tiendas virtuales, redes sociales o cualquier aplicación donde los usuarios suban fotografías constantemente y necesites garantizar un rendimiento impecable.

César Augusto Cortés Labrada

Hace 3 años

Quise usar el lazy loading y el responsive loading juntos así que hice lo siguiente:

Cree un observerImg.js y agregué la lógica. Todas las etiquetas observadas se les extraerá de un data-set la url correcta.

const callback = entries => {
  entries
    .filter(entry => entry.isIntersecting)
    .forEach(entryImg => {
      const img = entryImg.target;
      const { src } = img.dataset; // Se extrae la url del data-set

      //Se verifica si es una etiqueta <source> o <img>
      if (img.getAttribute('srcset')) {
        img.setAttribute('srcset', src);
      } else {
        img.setAttribute('src', src);
      }

      observer.unobserve(img);
    });
};

//Se crea un observador sin parámetro de "options"
export const observer = new IntersectionObserver(callback);

En CarouselItem.js cree una etiqueta <picture> usando dos funciones para crear las etiquetas <img> y <source> a las cuales les paso por pará metro las url, small para source y medium para img

const CarouselItem = ({
  imageUrl,
  imageUrlSmall,
  title,
  subtitle,
  slug,
  youtubeVideoId,
  startDate,
}) =>
  h(
    'div.carousel-item',
    h('picture', sourceCreator(imageUrlSmall), imgCreator(imageUrl)), //.......Aquí
    h(
      'div.carousel-item__info',
      Controls({ slug, youtubeVideoId }),
      h('p.carousel-item__title', title),
      h('p.carousel-item__subtitle', subtitle),
      h('p.carousel-item__date', `Released: ${relativeDate(startDate)}`),
    ),
  );

Ahora en las dos funciones agrego la lógica para crear cada etiqueta y las agrego al observador. Es importante crear un atributo data-set donde guardaré la url correcta; la etiqueta source maneja pantallas más pequeñas a 600px (max-width: 600px)

import { observer } from './ImgObserver';
const EMPTYIMG =
  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=';
//Función crea la etique <source>
const sourceCreator = imageUrlSmall => {
  const img = h('source', {
    srcset:
      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=',
    media: '(max-width: 600px)',
    'data-src': imageUrlSmall,
  });
  observer.observe(img); //Observador de la etiqueda
  return img;
};

//Función creadora de etiqueta <img>
const imgCreator = imageUrl => {
  const img = h('img.carousel-item__img', {
    src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=',
    alt: 'anime image',
    'data-src': imageUrl,
  });
  observer.observe(img);
  return img;
};

Los resultados mostraron una mejora notable en la carga del sitio web

Naldo Duran

Hace 6 años

👌

Recursos

Optimizar imágenes no se limita a reducir su peso. Existe una técnica avanzada que adapta la calidad y resolución de cada imagen al dispositivo y la conexión del usuario, garantizando experiencias agradables sin importar las condiciones de acceso. Esta técnica se conoce como responsive loading y representa un salto significativo en la forma en que servimos recursos visuales.

¿Por qué una misma imagen genera experiencias diferentes?

Una imagen de trescientos kilobytes puede parecer ligera, pero el contexto de cada usuario cambia todo. Alguien con un dispositivo de gama alta y conexión 5G la cargará sin problema [0:06]. Sin embargo, un usuario con un dispositivo de gama baja y red 2G tendrá una experiencia completamente distinta. Ambos acceden al mismo sitio, pero la percepción de rendimiento es opuesta.

El objetivo es que el sitio web pueda brindar experiencias agradables a todos los usuarios, independientemente de su dispositivo o tipo de conexión. Aquí es donde el responsive loading cobra relevancia.

¿Cómo funciona el responsive loading con el elemento picture?

El responsive loading responde a la resolución de pantalla para entregar una imagen de menor o mayor calidad según corresponda [1:02]. Para entender su funcionamiento, se analiza cómo lo implementa Gatsby, un framework de React orientado a la generación de páginas estáticas.

Al inspeccionar el sitio gatsbyjs.org/showcase con las dev tools del navegador, se puede observar cómo se construye cada imagen [1:22]. La pieza fundamental es el elemento picture, que forma parte de la web API y trabaja en combinación con los elementos source e img.

¿Qué hace el elemento picture junto con source?

Esta combinación permite establecer diferentes URLs dependiendo del tamaño del navegador [1:36]:

Una URL carga cuando el ancho es de 88 píxeles.
Otra se activa cuando alcanza 175 píxeles.
Una tercera entra en acción a los 350 píxeles.
Y así sucesivamente con resoluciones mayores.

No solo se cargan imágenes diferentes, sino que cada una tiene una resolución adaptada al dispositivo del usuario [2:02]. Esto significa que un teléfono pequeño recibe una imagen liviana, mientras que una pantalla grande obtiene una versión de mayor calidad.

¿Es viable implementar responsive loading de forma manual?

Generar esta estructura para cada imagen de un sitio requiere mucho trabajo manual [2:14]. Cuando el proyecto contiene múltiples imágenes, hacerlo a mano deja de ser conveniente. Por eso, herramientas como Gatsby automatizan este proceso internamente.

¿Qué alternativas existen para optimizar imágenes responsivamente?

Además de Gatsby, servicios como Cloudinary resuelven de forma integral la optimización de imágenes [2:40]. Cloudinary se encarga de servir las imágenes adaptadas al dispositivo desde el que se conecta cada usuario, eliminando la necesidad de configurar manualmente el elemento picture y sus sources.

Existen muchos más servicios similares que vale la pena explorar. Los elementos clave para profundizar son:

El elemento picture de la web API.
El elemento source y su atributo de media queries.
Servicios de optimización de imágenes como Cloudinary.

Dominar estas técnicas marca la diferencia entre un sitio que simplemente funciona y uno que respeta el contexto de cada usuario, ofreciendo rendimiento real en cualquier condición de red o dispositivo.

const callback = entries => {
  entries
    .filter(entry => entry.isIntersecting)
    .forEach(entryImg => {
      const img = entryImg.target;
      const { src } = img.dataset; // Se extrae la url del data-set

      //Se verifica si es una etiqueta <source> o <img>
      if (img.getAttribute('srcset')) {
        img.setAttribute('srcset', src);
      } else {
        img.setAttribute('src', src);
      }

      observer.unobserve(img);
    });
};

//Se crea un observador sin parámetro de "options"
export const observer = new IntersectionObserver(callback);

const CarouselItem = ({
  imageUrl,
  imageUrlSmall,
  title,
  subtitle,
  slug,
  youtubeVideoId,
  startDate,
}) =>
  h(
    'div.carousel-item',
    h('picture', sourceCreator(imageUrlSmall), imgCreator(imageUrl)), //.......Aquí
    h(
      'div.carousel-item__info',
      Controls({ slug, youtubeVideoId }),
      h('p.carousel-item__title', title),
      h('p.carousel-item__subtitle', subtitle),
      h('p.carousel-item__date', `Released: ${relativeDate(startDate)}`),
    ),
  );

import { observer } from './ImgObserver';
const EMPTYIMG =
  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=';
//Función crea la etique <source>
const sourceCreator = imageUrlSmall => {
  const img = h('source', {
    srcset:
      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=',
    media: '(max-width: 600px)',
    'data-src': imageUrlSmall,
  });
  observer.observe(img); //Observador de la etiqueda
  return img;
};

//Función creadora de etiqueta <img>
const imgCreator = imageUrl => {
  const img = h('img.carousel-item__img', {
    src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=',
    alt: 'anime image',
    'data-src': imageUrl,
  });
  observer.observe(img);
  return img;
};

Resumen

¿Por qué una misma imagen genera experiencias diferentes?

¿Cómo funciona el responsive loading con el elemento picture?

¿Qué hace el elemento picture junto con source?

Esta combinación permite establecer diferentes URLs dependiendo del tamaño del navegador [1:36]:

Una URL carga cuando el ancho es de 88 píxeles.
Otra se activa cuando alcanza 175 píxeles.
Una tercera entra en acción a los 350 píxeles.
Y así sucesivamente con resoluciones mayores.

¿Es viable implementar responsive loading de forma manual?

¿Qué alternativas existen para optimizar imágenes responsivamente?

Existen muchos más servicios similares que vale la pena explorar. Los elementos clave para profundizar son:

El elemento picture de la web API.
El elemento source y su atributo de media queries.
Servicios de optimización de imágenes como Cloudinary.

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Carga Adaptativa de Imágenes con Gatsby y Web API