Optimización de imágenes en web y nativo

Hola, mi nombre es Kati Cremmann. Soy la desarrolladora principal de ReactJS. Y esta es una charla de nuestra nueva ponente invitada, Kati. ¡Hola! Gracias. Ustedes son mis verdaderos amigos. Gracias a todos los que se quedaron justo antes del almuerzo. Trataré de ser breve. Gracias por esa introducción, Janne. Fue increíble, como siempre.

Así que, hola, mi nombre es Kati Cremmann. Soy la directora de ingeniería móvil en este momento en Promotable. Somos una consultoría de JavaScript increíble. Construimos cosas en React y React Native. Y muchas de estas cosas incluyen imágenes, lo que nos lleva al tema de mi charla, que trata sobre la optimización de imágenes para móviles y web.

Entonces, ¿qué quiero decir exactamente con optimizar imágenes? Puedes pensar en ello de dos maneras. Una forma es optimizar el contenido de la imagen. Optimizar el recorte de la imagen. ¿Vas a usar retrato o paisaje? ¿Dónde quieres ajustar el sujeto de la imagen para que se ajuste mejor a la posición que tienes en la pantalla? Para darte un ejemplo, a la izquierda tenemos una imagen original, que está en modo retrato . Y digamos que nuestro objetivo era usarla como imagen principal en un sitio web o tal vez como una imagen de banner en Twitter. Esta no es una imagen óptima para este caso de uso, porque, como puedes ver, no hay una buena manera de recortarla, así que terminamos con medio niño. Pero esta charla no trata sobre recortar. Si se tratara de recortar, el resumen al final sería usar una relación de aspecto. Como desarrolladores, generalmente no somos responsables de tomar las imágenes y posicionar las imágenes. Eso es trabajo de los expertos. Pero la forma en que comunicamos lo que necesitamos, las posiciones que tenemos en las pantallas, es mediante el uso de una relación de aspecto. Una relación de aspecto es una proporción entre el ancho y la altura de una imagen. Entonces, en lugar de decir, necesito una imagen de 750 por 500, puedes decirle a tu diseñador o fotógrafo que necesitas una imagen con una relación de aspecto de tres a dos, y ellos pueden darte la imagen de la más alta calidad que puedan.

La otra forma de ver las imágenes es mirar el tamaño del archivo. Esto es algo que estamos más acostumbrados a optimizar, porque somos conscientes de que cuando estamos renderizando una aplicación móvil o renderizando un sitio web, el usuario tiene que descargar todos los recursos desde el servidor antes de que podamos mostrarlos. Por lo tanto, queremos que estos recursos, imágenes, paquetes de JavaScript, CSS, sean lo más pequeños posible.

Y lo otro de lo que quiero hablar es de las dimensiones de la imagen. Específicamente, el ancho y el alto de la imagen, que también son importantes. Y he agregado un signo de interrogación aquí porque es posible que no te des cuenta de cuánto importa.

Cuando hablaba sobre la optimización de imágenes ayer con algunas personas, muchas personas se preguntaron cómo es posible que todavía estemos resolviendo un problema de optimización de imágenes. Las personas intentaban optimizar imágenes hace diez años. Cuando hablaba sobre el tema de mi charla, llegamos a la conclusión de que las personas han estado haciendo este tipo de cosas similares durante años y años. Pero el problema es que a medida que avanza la tecnología, el problema que estamos resolviendo se vuelve más difícil.

Para darte un ejemplo, esta es una imagen que mi amigo Taz tomó de mí hace un par de semanas. Taz tiene una cámara muy buena, de última generación. Y es genial. Puedo hacer zoom, como en CSI, y descubrir exactamente a qué hora se tomó esta imagen. Sin embargo, esta resolución viene con el costo de un tamaño de archivo grande. Si reviso los metadatos del archivo, veo que esta imagen sola tiene 21 megabytes. Y tiene 8,000 por 5,000 píxeles. Esta es la imagen de origen que tu fotógrafo te dará para usar en tus sitios web y aplicaciones móviles. Y obviamente no puedes usarla directamente porque no brindará una buena experiencia de usuario. Si quisiera usar esto en mi sitio web, podría reducir las dimensiones, pasarla por el confiable Panda de TinyPNG, y podría terminar con algo mucho más pequeño. Así que esto es 100 megabytes. Aún no es ideal, pero es utilizable. Y he reducido las dimensiones de la imagen. Y notarás que he mencionado las dimensiones de la imagen varias veces. Y es posible que te preguntes por qué es tan importante. Y te contaré una historia, que en realidad es la historia que motivó esta charla.

Esto sucedió hace un par de años, muchos años atrás, cuando estaba construyendo una aplicación móvil. La aplicación móvil estaba lista. Aún no estaba en vivo, no estaba disponible para los usuarios. Pero estaba lista para que los administradores de contenido agregaran contenido y probaran las cosas para asegurarse de que todo estuviera listo antes de lanzarlo. Y la aplicación en sí no importa para los propósitos de esta historia. Pero lo que debes saber es que tenía muchas imágenes, era muy pesada en imágenes. Toda la aplicación, cada página, tenía muchas imágenes personalizadas tomadas profesionalmente en varias configuraciones. Y lo que descubrimos es que los administradores de contenido volvían a nosotros y decían que después de un par de páginas, la aplicación se bloqueaba.

No solo después de horas de uso. Literalmente sería después de cinco o seis páginas. Y de inmediato, nos preguntamos, oh, ¿qué dispositivo estás usando? ¿Es un dispositivo Android de gama baja? Porque como desarrolladores de React Native, tendemos a culpar a todo en los dispositivos Android de gama baja. Desafortunadamente, en este caso, todos estaban usando prácticamente los últimos iPhones. Así que no podíamos culpar a Android. Pero obviamente estábamos pensando, si los iPhones no pueden hacerlo, los teléfonos Android no tienen ninguna posibilidad. Así que tenemos que resolver esto.

Entonces, lo que hicimos fue, bueno, básicamente comentamos el código hasta que descubrimos qué estaba rompiendo la aplicación. Y descubrimos que si comentamos todas las imágenes, todos los problemas de rendimiento desaparecen mágicamente. Esto es obviamente genial, pero no es una buena estrategia para lanzar una aplicación que se trata de imágenes. Entonces, mi amigo console logged al rescate. Y lo que hice fue, simplemente console logueé los tamaños de todas las imágenes que se estaban enviando desde la API. Y en realidad logré encontrar las capturas de pantalla que tomé en ese momento. Y esto es básicamente a lo que llegamos. Esto es simplemente abrir la aplicación y navegar por un par de páginas. Y es un poco desordenado, pero he resaltado algunos de los mayores culpables. Y como puedes ver, según la imagen que mostré antes, claramente estas son las imágenes de origen que sus fotógrafos les dieron como fuente, como la imagen inicial, en lugar de versiones recortadas. Y lo que es posible que no sepas, especialmente si vienes de la web, es que el renderizado de imágenes en aplicaciones nativas es más costoso. La forma en que ocurre el renderizado en nativo es que calculamos el tamaño de la imagen, el área que tienes disponible, y luego convertimos la imagen para que se ajuste a ese tamaño. Y esto se hace en memoria. Y cuanto mayor sea la diferencia entre la imagen y el tamaño en el que la estamos renderizando, más costoso será el cálculo. Y obviamente, si estás haciendo toneladas y toneladas de estos cálculos costosos en memoria al mismo tiempo, te quedarás sin memoria y tu aplicación se bloqueará. Entonces, para solucionar esto, la solución directa es dimensionar la imagen en función de lo que realmente necesitas. Te voy a explicar cómo lo haría. Vamos a usar esta hermosa imagen verde en todo el proceso. Me voy a dar dos restricciones. Vamos a usar el ancho de la pantalla como el ancho de la imagen. Y vamos a usar una relación de aspecto de 3.2 para la altura. Este es código de React Native. Tenemos un útil hook llamado use Window Dimensions.

También puedes usar las dimensiones directamente como una exportación, pero usar un hook obviamente significa que lo estás ejecutando en la web. Si alguien cambia el tamaño del navegador, obtienes el nuevo valor. Estoy usando el ancho de la pantalla obtenido a través de las dimensiones de la ventana, y estoy calculando la altura relativa en función del ancho. Y en la tercera flecha, lo paso directamente a la imagen.

Ahora, esta es una captura de pantalla de mi teléfono. También he recortado un poco la imagen para que puedas ver mejor la calidad de la imagen. Imprimí el ancho y la altura que obtengo de React Native. Me dice que mi ancho es 390 y mi altura es 260. Entonces, tomo esta imagen y la recorto a 390 por 260. Y obtengo esto.

No estoy seguro de lo bien que puedes verlo, pero la imagen de la izquierda está realmente borrosa. Pero ¿por qué? Acabo de tomar las dimensiones exactas que necesito de mi teléfono y recortar mi imagen. Entonces, ¿por qué está borrosa la imagen? ¿Hay alguien aquí que pueda decírmelo? Sí, correcto. Densidad de píxeles. Tengo una diapositiva completa para esto. Sí, eso es exactamente. Y si vienes de la web, especialmente, no es algo en lo que usualmente tienes que pensar. Pero en móviles, es muy importante. La densidad de píxeles básicamente te dice cuántos... Perdón. Permíteme invertirlo un poco. Cuando vienes de la web, especialmente, y comienzas a escribir estilos, es posible que estés pensando que ya no necesitas escribir píxeles, ems o rems después de los números de estilo. Y la razón por la que no tienes que escribir eso es porque no estás hablando en píxeles ni en ems. Estás hablando en puntos de visualización. Y un punto de visualización puede ser igual a un píxel, pero puede que no lo sea. Y la densidad de píxeles básicamente te dice cuántos píxeles se necesitan para formar un punto de visualización. Uno a uno, todos los iPhones usarían esto, es decir, un píxel es igual a un punto de visualización. Sin embargo, la mayoría de los iPhones en estos días usarán una densidad de píxeles de 3, lo que significa que un punto en realidad son nueve píxeles.

Entonces, y si alguna vez has agregado, por ejemplo, un ícono de aplicación, estarías muy familiarizado con esta página, donde tienes que subir cada imagen en 1x1x2x3. La razón por la que haces eso es para tener en cuenta las densidades de píxeles de los diferentes iPhones. Tendrás algo similar en Android, pero creo que tienes alrededor de seis versiones diferentes para tener en cuenta. Y esta es básicamente la fórmula. Es bastante sencillo. El tamaño de la imagen en píxeles es el tamaño del área en puntos de visualización multiplicado por la relación de píxeles. Hay una exportación en React Native, por lo que puedes importar la relación de píxeles y luego obtener la relación de píxeles del dispositivo o sitio web en el que te encuentres actualmente. Y aquí hay algunos ejemplos. Acabo de tomar la captura de pantalla del sitio web de React Native. Podemos ver que la relación de píxeles tiende a variar entre uno y 3.5. Por lo general, no suele ser más alta, pero conociendo la tecnología, probablemente lo sea eventualmente. Y ahora, si multiplico los puntos de visualización por la relación de píxeles, obtendré la imagen real que necesitaba, que era de 1170 por 780. Y ahora se verá nítida en mi pantalla.

Ahora, el problema es que no todos usan el mismo teléfono que yo. Ojalá lo hicieran. Eso simplificaría mucho mi vida. Sin embargo, incluso si solo consideramos los iPhones, hay toneladas y toneladas de tamaños diferentes. Por ejemplo, si comparo un iPhone 6 y un iPhone 12 Pro Max, puedes ver que la misma imagen, utilizando el ancho de la pantalla y una relación de 3 a 1, será muy diferente.

Entonces, si solo tienes una imagen de origen que vas a subir, podrías sentirte tentado a subir la imagen en 1290 por 860 y que todos los demás tengan que escalarla. El problema con eso es que ahora tus dispositivos de gama baja, que ya están luchando, son los que tienen que convertir esta imagen al tamaño que tienes disponible. Afortunadamente, este es un problema que se ha resuelto. Si estás utilizando un CDN, prácticamente todos los CDNs modernos tendrán esta funcionalidad, o puedes crear el tuyo propio, donde básicamente el dispositivo calcula el área que necesita y solicita la imagen en un tamaño específico. Entonces, tu servidor diría: 'Oh, quieres 750 por 500, lo tengo en la caché, aquí lo tienes'. O si no lo tiene, lo calcularía sobre la marcha, lo guardaría en la caché para la próxima vez y lo devolvería.

El problema con esta solución es que todavía hay demasiadas imágenes diferentes. La primera vez, en primer lugar, la primera vez que generamos la imagen, tendrá un par de segundos de costo donde se genera la imagen, por lo que el usuario tiene que esperar. Y en segundo lugar, si estás utilizando un servicio administrado, se vuelve muy costoso porque la mayoría de estos servicios te cobrarán según las transformaciones, por lo que es mucho más barato y mejor utilizar la caché si puedes. La forma de solucionar eso es que generalmente terminarás teniendo una matriz de tamaños admitidos. He elegido bastantes aquí, como 15, pero tendrás paradas admitidas donde dices que vas a admitir una imagen de 600 de ancho o 1,200 de ancho. Y luego, calculas el ancho que necesitas para la imagen y tomas la siguiente mejor imagen, lo que significa que aún no tienes que hacer nada demasiado complicado, pero aún obtienes la optimización de no tener que hacer tantas transformaciones sobre la marcha.

De acuerdo. He hablado mucho sobre esto. También hice una demostración. Así que puedes probarlo. Creo que esto es lo más divertido, si puedes probarlo en tu teléfono. No esperaba que fuera tan grande. Oh wow. Bueno. No estoy seguro de poder hacer esto. Supongo que puedes ver las partes de la derecha, que es la parte importante. El código está a la izquierda. Si no puedes verlo, solo confía en mí.

Está ahí. Pero, tengo tres ejemplos aquí. Entonces, a la derecha, lo estoy renderizando en React Native Web en este momento. Pero si vas aquí y tienes la aplicación Expo Snack. Voy a poner esta diapositiva con el código QR más tarde. Puedes ejecutarla en tu teléfono y ver cómo se ejecutan estas imágenes en tu propio teléfono. Pero en la web, así que estoy renderizando tres imágenes diferentes.

Entonces, tengo la imagen de tamaño completo en todo su esplendor. Luego, tengo... Entonces, aquí arriba, puedes ver cuál es la relación de píxeles. Y aquí, tenemos una relación de píxeles de 1, gracias a Dios. Pero si lo ejecuto normalmente en mi pantalla, es una relación de píxeles de 2. Puedes ver que el ancho de la pantalla es 333, y puedes ver que esta es la imagen de tamaño completo. Esta es la imagen de tamaño exacto. Esta, en tu teléfono, si lo intentas, se verá borrosa. Esta es la imagen de tamaño exacto con la relación de píxeles. Y esta es la imagen de tamaño exacto con los tamaños particulares. Por ejemplo, aquí puedes ver que el ancho en píxeles que estamos buscando para la imagen es 333, pero vamos al siguiente mejor ancho, que es 350. Permíteme volver a mis diapositivas. Ahí tienes. Estas son las diapositivas para tomar una foto, si quieres probarlo. Y puedes probarlo en tu teléfono, y ver cómo la misma imagen se renderiza para ti en comparación con tus amigos. Espero que te haya sido útil, y muchas gracias.

Entonces, en esta solución, ¿tienes esta matriz de tamaños fijos, por lo que realmente generas todas esas imágenes durante el tiempo de construcción? Sí. Entonces, puedes elegir. Dependiendo de tu servicio también, puedes crear las imágenes de antemano. Si, por ejemplo, no quieres usar un servicio en absoluto, puedes decidir que vas a usar estas tres imágenes, las vas a generar de antemano, y sabes que tu API siempre las va a admitir. Pero la solución más óptima sería crearlas sobre la marcha. Pero en tu caso, ¿puedes recomendar alguna herramienta, por ejemplo, empaquetadores, o cosas que hagan esta optimización de imágenes por ti, o se deja ese ejercicio para el lector? Personalmente, me gusta usar Cloudinary, pero pueden ser bastante caros. Así que creo que también depende de las herramientas que tengas disponibles.

Si ya tienes un CDN de imágenes, es probable que lo hagan por ti. Genial.

Aquí está la siguiente pregunta. ¿Existe una forma adecuada de dimensionar las imágenes sin tener que elegir la siguiente mejor versión, lo que requiere tener una matriz de tamaños lista? Entonces, básicamente, si no haces esto de tener un tamaño fijo, ¿cuál es la mejor forma de hacerlo? Sería el método original que mostré, que es el tamaño exacto para la pantalla. Así obtendrás siempre el mejor tamaño para el área disponible, pero podría ser más lento si no tienes muchos usuarios con ese dispositivo. Por ejemplo, si tienes un usuario en un iPhone X y 10,000 usuarios en un iPhone 12, el usuario del iPhone X siempre, cada vez que visite la página, el servidor tendrá que generar esas imágenes, mientras que los usuarios del iPhone 12 usarán la misma caché. Genial.

Y la otra forma, por supuesto, de optimizar la carga de imágenes es elegir un formato de imagen apropiado para el tipo de imagen. ¿Has probado estos formatos de imagen modernos y cómo resuelven el mismo problema? Creo, para ser honesto, que la imagen es una de esas cosas en las que tiendo a pagar por usar la buena herramienta para el trabajo. Por ejemplo, no es que los esté promocionando en particular, pero si usas Cloudinary, tienen un parámetro llamado formato automático, que sirve el mejor formato para la plataforma que estás solicitando. Si usas Chrome versus iPhone nativo versus Android nativo, en realidad envía la misma imagen en un formato de archivo diferente. Sí, pero me gusta el punto de gastar un poco más en herramientas. Esto no es algo que quieras intentar resolver por ti mismo si tienes el presupuesto para ello. Sí, absolutamente. Es como tiempo versus dinero, ¿verdad? En este escenario, siento que mi tiempo es más importante que el dinero de algunas personas. Sí. La imagen no es nada. La sed lo es todo. Exactamente.

De acuerdo, tienes sed. Muy bien. Gracias, Cady. Hablando de sed y hambre, dejaremos que la gente vaya a almorzar, pero pueden encontrar a Cady en la sala de preguntas y respuestas de los oradores después de esto. Muchas gracias, Cady, por unirte a nosotros. Increíble. Gracias, Yanni. Lo aprecio. Gracias.