Introducción al rendimiento de imágenes web

1. Te damos la bienvenida a la clase: Cuando ahora estaba navegando por Internet en un dispositivo, así como esto, lo que realmente quieres ponderar en una imagen grande para ser descargada, cual estaba pensada para ser utilizada en un monitor grande. Por supuesto, para esos, y aquí está el problema. Usar imágenes de un sitio web más pequeño significará que esto se descargará mucho más rápido en dispositivos de tamaño móvil más pequeños. Al escalar hasta la pantalla grande, puede verse realmente estirado y pixelado. Si vamos por el camino opuesto y comenzamos con una imagen grande, puede verse bien en un monitor grande, pero puede tardar demasiado en descargarse en un dispositivo móvil, en su mayoría mala experiencia de usuario. Entonces, ¿cómo agregamos imágenes eficientemente mientras que el sitio web se adapta a todos los tamaños de pantalla y dispositivos? Podríamos intentar usar una imagen que tenga algún tipo de terreno medio en el tamaño. Pero esto se está volviendo mucho más difícil en pantallas, otra vez más grande, y también tienen una resolución más alta. Otra forma de hacerlo es aprovechando los elementos de pitch HTML. Con imagen, podemos tener múltiples tamaños de la misma imagen, y el navegador cargará el correcto en función del tamaño del dispositivo. Por lo que vamos a echar un vistazo a esta y varias otras técnicas. También queremos asegurarnos de que podemos cargar diferentes imágenes en función de la orientación del dispositivo, el tipo de formatos de imagen que admite el navegador, y mucho más. También cubriremos mucho más cosas útiles se preguntan dirección, diferentes tipos de imagen y cómo podemos convertirlas usando compresión en los diferentes métodos de compresión, usando imágenes de retroceso, redes de entrega de contenido, carga perezosa, y mucho más. Si creas cualquier tipo de sitios web o aplicaciones HTML, entonces este curso es ideal para ti. No necesitas mucha experiencia para tomar este curso. Está diseñado para ser amigable para principiantes. Si bien alguna experiencia HTML será beneficiosa ya que asumiré que sabes configurar una página HTML básica. Espero que estés interesado y emocionado por tomar este curso. Ahora saltemos a la primera lección donde vamos a descubrir imágenes de tamaño de fiesta de pestaña de efectos y la mitad en la experiencia del usuario. 2. ¡Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no acostumbrarse a seguirlo solo por el bien de quitarse otra conferencia. Tómese el tiempo para procesar cada lección, revisar el código que escribe y piense en cómo podría abordar estas soluciones usted mismo. Con esto en mente, esta clase está basada en proyectos y esto te da la oportunidad de hacer algo realmente personal y único. No necesitas perderte demasiado y alejarte de la clase e incluso puedes dar un paso atrás después de haber terminado la clase, y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido fuera de la clase. También recuerda compartir tu proyecto también aquí en Skillshare y solo lo revisaré pero también inspirará a otros estudiantes también. Más información sobre el proyecto de clase, dirígete a la pestaña de proyecto y recursos donde no solo puedes subir tu proyecto sino que también puedes ver otros proyectos de clase también. Con esto en mente espero ver lo que creas y subas aquí en Skillshare. 3. Descarga los archivos de inicio: Antes de saltar a nuestra primera lección, siempre que con este curso se encuentran algunos Archivos de Inicio los cuales puedes descargar y trabajar a medida que avanzamos por este curso. Cada una de las lecciones tiene una carpeta correspondiente, y dentro tenemos algunos Archivos básicos de Inicio, por ejemplo, éste tiene una página HTML básica, y también algunas imágenes para que podamos saltar directamente a aprender sobre nuestros temas. Para descargar esto para el curso, lo que necesitarás hacer es dirigirte a github.com, y luego a mi perfil que es chrisdixon161. Entonces el repositorio es los archivos de inicio de elemento de imagen. Una vez que estás dentro del repositorio, todo lo que necesitas hacer es hacer clic en este botón de “Código” y luego descargar este archivo zip. Para un fácil acceso, he colocado el mío en el escritorio justo aquí, pero puedes colocarlo en cualquier lugar que prefieras. Para trabajar a través de este curso, estaré usando el editor de texto, que es Visual Studio Code. Si no tienes uno, puedes descargar esto a través de tu sistema operativo justo aquí. Es de descarga gratuita, y de uso gratuito para Mac, Windows y Linux. Una vez que tengas todo esto de configuración e instalado, todo lo que necesitas hacer es arrastrar sobre los Archivos de Inicio al Código de Visual Studio. Te veré en el siguiente video, donde vamos a llegar a trabajar en nuestra primera lección. 4. Imágenes del tamaño equivocado: En lugar de tomar mi palabra para ello, ahora echemos un vistazo a algunos ejemplos de cómo las imágenes de mal tamaño pueden realmente afectar a tu proyecto. Para esto dirígete al proyecto de inicio y en los archivos, entra a la lección número 1. Dentro de nuestro código de Visual Studio o tu editor de texto dirígete a la primera carpeta del proyecto, ahora voy a hacer clic derecho en la página Índice, Copiar ruta, luego Pegar esto dentro del navegador. También puedes hacer doble clic en la página Índice dentro de la carpeta del proyecto para, esto se abrirá dentro de tu navegador predeterminado. Para esto voy a estar usando Google Chrome, pero puedes usar Firefox, Safari o cualquier navegador importante que prefieras. Para empezar, vamos a echar un vistazo a los tamaños de archivo de algunas imágenes suministradas y también a ver qué efecto tiene esto en la velocidad de descarga. Abramos la página Índice y junto a esto tenemos una carpeta Imágenes la cual tiene la misma imagen, pero en tres tamaños diferentes, tenemos la más grande, que tiene 5,311 píxeles de ancho y también podemos ver el tamaño hacia abajo en el fondo. Tenemos una versión de 640 píxeles de ancho, y también una pequeña que es de 320 píxeles. Pasando a la página del índice todo lo que vamos a hacer para esto es configurar tres elementos de imagen separados, vincularlos a las tres de estas imágenes. Saltemos a la carpeta de imágenes y a la primera, que es la más pequeña, y como este es un ejemplo, solo voy a dejar vacíos estos viejos textos. Duplicar esto dos veces más y la siguiente es la versión 640 y tendremos la más grande, que es de 5,311, guarde esto y ahora si actualizamos, vemos las tres imágenes como se esperaba, y también justo como nota al margen, todas las imágenes proporcionadas para este curso han sido descargadas de unsplash.com, por lo que si quieres cambiarlas o descargar las tuyas propias, este es un buen recurso a buscar. Haga clic derecho y abra las herramientas de desarrollador con Inspect. Todos los navegadores también tienen las Herramientas de Desarrollador, y generalmente están disponibles con el botón derecho y el elemento Inspeccionar o Inspeccionar. Aquí agrega a la pestaña Red y luego podemos refrescar el navegador para descargar las tres de estas imágenes. Si haces esto un poco más ancho podemos ver el tamaño de cada una de estas imágenes. Como se esperaba, va de más pequeño a más grande y también probablemente como se esperaba, podemos ver que la imagen más pequeña es de 27 milisegundos, vemos 29 para el del medio, luego 37 milisegundos para el más grande. Actualicemos e intentemos esto de nuevo. Esto es ligeramente diferente cada vez que actualizamos la página, pero generalmente podemos ver que la imagen pequeña se descargará en aproximadamente dos tercios del tiempo de la imagen grande. Esto puede marcar una diferencia real si tienes muchas imágenes en nuestro sitio, junto con el tiempo de descarga, la calidad de imagen también es una consideración enorme, por lo que es mejor que podamos asegurarnos de que las tres de nuestras imágenes, consiguieron el mismo espacio disponible. Podemos hacer esto arriba en la sección de cabeza y luego agregará algunos estilos y solo va por el elemento de imagen y luego seleccione el ancho, luego este do,100 por ciento. Ahora si volvemos al navegador y actualizamos, ahora las tres de nuestras imágenes se estirarán para ser 100 por ciento del ancho disponible. Podemos ver si miramos la imagen superior, vemos una pérdida de calidad, ya que esto se ha estirado un poco más grande. En el medio, se ha mejorado la calidad, en la calidad en la tercera o la imagen más grande es mucho mejor que las dos anteriores. También vemos en esta actualización particular que el tiempo de descarga es mucho más lento para la imagen grande, esto también refuerza lo que dijimos en el video de intro. Las imágenes grandes tardan más en descargarse, lo que puede causar una mala experiencia de usuario y también potencialmente perder usuarios de todos los sitios. También hay muchas encuestas y estadísticas por ahí que dicen que usa tasa de conversión disminuye drásticamente con cada segundo una página toma la carga y también la tasa abundante sube significativamente mientras espera demasiado tiempo. No tiraré estadísticas por ahí ya que muchas encuestas muestran resultados diferentes, pero estoy seguro que todos hemos estado ahí en el pasado. Cuando una página tarda demasiado en cargarse, dentro de estas paciencia y nuestra atención pasa a otra cosa. Por otro lado, las imágenes que son demasiado pequeñas, perderán una cantidad significativa de calidad a medida que se escalan. Al igual que podemos ver aquí con la primera imagen, así que al usar imágenes en tu sitio web, no solo descargues una que se ve genial y después simplemente agréguela a tu proyecto, piensa primero en el tamaño de la imagen. En los últimos años, la gama de tamaños de dispositivos utiliza una visualización de nuestros sitios web en, es sólo cada vez más grande y aquí hay sólo una pequeña muestra de tamaños de pantalla que tenemos que permitir. Como puedes ver, tenemos un rango enorme y algunos de hasta más de 7,000 píxeles de ancho, pesar de que algunas de las pantallas más grandes y más comunes. Esto todavía puede dejar nuestra elección de tamaño de imagen realmente difícil. hora de tomar estas decisiones, sin embargo, también necesitamos no solo pensar en el tamaño de los dispositivos, sino también en cómo se colocará nuestro sitio. Esto puede tener un gran impacto en nuestras elecciones. Puede que te sientas tentado a pensar: “Está bien, tal vez debería apuntar al medio e ir por tal vez 3,000 píxeles de ancho”. Hacer esto sin embargo no significa que tengamos que hacer todas las imágenes así de amplias. Por ejemplo, puede planear tener preimágenes en la misma fila, así como esta, y esta es una situación común para un sitio web o incluso una vista de galería con múltiples filas de imágenes. De cualquier manera, el punto es que ahora de repente hemos dividido el ancho. Ahora necesitamos de nuestras imágenes por tres, menos aún si tomamos en cuenta el espacio alrededor de cada una de estas imágenes. Ahora estamos hablando de nuestras imágenes que sólo necesitan tener alrededor de 800 píxeles de ancho, lo que resultará en un gran ahorro en el tiempo de descarga. Lo mismo vale para dos imágenes de ancho, cuatro imágenes y así sucesivamente. Todos estos ahorros realmente pueden sumar si planeamos de qué tamaño de imágenes necesitamos primero, lugar de solo descargas en el primer tamaño de imagen que está disponible, arrojado en nuestro proyecto, y olvidarnos de ello. A veces sin embargo, es inevitable que necesitemos usar una imagen de ancho completo, como una imagen de cabecera o un carrusel de imagen y esto nuevamente nos devuelve al problema de si sacrificamos la calidad de imagen o la velocidad de descarga. Bueno, afortunadamente, hay una forma de que podamos empezar a trabajar en torno a esto, así que no tenemos que comprometernos y echaremos un vistazo a cómo hacerlo en el siguiente video. 5. Dejar que el navegador decida: Para ayudar a elegir la imagen de tamaño correcta para el dispositivo o navegador, el elemento de imagen tiene un atributo incorporado realmente útil llamado srcet. Srcet nos permitirá enumerar múltiples imágenes que quieres usar potencialmente, y vamos a dejar que el navegador decida cuál es la mejor. Dentro de nuestra carpeta Lección Dos, que es Dejar que el Navegador decida, tenemos dos ítems y uno es la página de índice, que vamos a utilizar. Podemos copiar el camino. Esto está bastante vacío. Vamos a agregar los contenidos en tan solo un momento, luego pegarlos dentro del navegador. Por dentro de la carpeta de imágenes tenemos seis versiones de la misma imagen. Tenemos una versión que tiene 320 píxeles de ancho, tenemos 640, tenemos 1,500, y también algunas imágenes con 1X, 2X, y 4X también, cuales echaremos un vistazo a cuáles son muy pronto. Al igual que lo hicimos anteriormente, dentro de la sección de cuerpo vamos a configurar un elemento de imagen HTML regular. Esto quiere entrar en la carpeta de imágenes y seleccionar la imagen de carretera, que tiene 320 píxeles de ancho. Guarda y refresca. Como era de esperar, vemos cargada esta pequeña imagen. Entonces esto es generalmente lo que hacemos para cargar una imagen dentro de un sitio web. Pero en lugar de quedarnos atascados con esta sola imagen, podemos usar lo que se llama el atributo srcet. Proporciona algunas imágenes alternativas dependiendo del tamaño del navegador. Para ello, volvemos a nuestros elementos de imagen. Solo eliminemos esto para este ejemplo, y voy a agregar dentro aquí el atributo srcet. Este atributo nos permitirá añadir múltiples imágenes dentro de nuestros elementos de imagen, que el navegador puede decidir cuál es el más adecuado para el tamaño actual del navegador. El primero, de nuevo dentro de la carpeta de imágenes, vamos por el camino, dash , 640, y luego separados por una coma, podemos agregar múltiples imágenes. También tenemos una imagen de 1.500 píxeles de ancho. Por lo que camino, dash, 1,500, dot JPEG. Lo que está sucediendo aquí es que estamos usando los atributos de origen originales si el atributo de conjunto de fuentes no es compatible en el navegador Chrome. Entonces esto es básicamente una imagen de retroceso. Si no podemos seleccionar ninguno de estos, srcet es de hecho, bastante bien apoyado en todos los principales navegadores. Si vas a caniuse.com y haces una búsqueda de srcet, podemos ver que srcet es ampliamente compatible en todos estos principales navegadores. El único tema es el Internet Explorer más antiguo. Pero esto ha sido reemplazado por el más nuevo Edge Browser, que cuenta con soporte completo. Entonces esto significa que srcet está bastante bien apoyado y estamos seguros de usarlo en nuestros proyectos. Ahí va nuestro proyecto. Vamos a probar esto. Refrescar. Vemos la carretera, el guión, la imagen 640, y si reducimos esto hacia abajo, aún vemos el 640. Hagamos esto más grande. Si conseguimos esto más de 1,500 píxeles, que era el tamaño de la imagen más grande, aún podemos ver dentro de las herramientas de desarrollador que aún estamos descargando la versión de 640 píxeles. Por lo que el navegador no está seleccionando la imagen alternativa. Esto se debe a que para que el navegador descubra cuál va a elegir, también necesitamos decirle el ancho de la imagen. No detecta automáticamente que este es 640 y éste es 1,500, pero después de la ruta del archivo a la imagen, sólo que hacer es agregar al ancho con la imagen en píxeles, con una W justo después. Esto tiene 640 píxeles de ancho, esto tiene 1.500 píxeles de ancho, y vamos a probar esto. Volver al navegador, voy a encogerlo a un tamaño pequeño, refrescar. Vemos la versión de 640 pixeles. Hagamos esto más grande. Vemos en algún momento la versión de 1,500 píxeles se ha cargado. Sólo intentemos esto otra vez. 640. Yo quiero ver el tamaño justo aquí. Por lo que 300 pixeles, o, los míos cambian a la imagen grande alrededor de 500 pixeles. Como sabemos, es elegir esto basado en la ventanilla del navegador, que es el área visible del navegador. También es elegir bajo el supuesto de que queremos que estas imágenes sean el ancho completo de la ventanilla. No obstante, sin embargo, este no siempre es el caso. Por lo que para controlar esto, podemos configurar el atributo tallas después de nuestro srcet. Añadamos esto en. Si dejamos fuera este atributo tallas, se supone que queremos que las imágenes sean el ancho completo del viewport o del navegador, o en su más básico, podemos agregar en un tamaño para aplicarlo a todas las imágenes. Por ejemplo, si queremos que todas las imágenes sean solo el 50 por ciento del ancho disponible, igual que con CSS, podríamos agregar en 50vw, establecer esto como la mitad del ancho de la vista. Guarda esto. A pesar de que nuestra versión de 640 píxeles ha sido cargada, esta sólo ha ocupado el 50 por ciento del ancho del navegador. Si subimos a la versión más grande, seguirá aplicándose lo mismo. Con pantallas pequeñas, es común ver imágenes y contenido usando todo el ancho disponible, como vemos a la izquierda, y entonces tal vez solo ocupe el 50 por ciento del ancho en un tamaño de pantalla más grande. Entonces, ¿cómo harías esto con el atributo tallas? Esto lo hacemos combinando estos atributos de tamaño con consultas de medios para adaptar las imágenes al tamaño del dispositivo. Usando nuestro ejemplo, ya que tenemos dos imágenes diferentes para elegir, vamos a agregar dos valores diferentes separados por una coma. Al igual que con CSS regular, voy a agregar en una consulta de medios y configurar el ancho máximo para que sea igual a 600 píxeles. Por lo que por debajo de 600 píxeles queremos entonces establecer nuestras imágenes para que sean 100 por ciento del ancho de la ventanilla. De lo contrario, quieren que estos sean el 50 por ciento o la mitad del ancho disponible. Por lo que esta es una gran manera de controlar el tamaño de las imágenes con diferentes tamaños de pantalla. Vamos a probar esto. En primer lugar, tenemos que bajar al tamaño más pequeño y refrescar. Vemos la carretera, dash, 640 se está cargando como se esperaba, y que esto es 100 por ciento del ancho de la ventanilla gráfica. Ya que configuramos esto hasta 600 píxeles si seguimos adelante, ahí está nuestra imagen grande ahora descargada, y si tomamos esto justo por encima de los 600 píxeles, por el segundo valor, esto ahora baja a 50vw. Algo que habrás notado está dentro de mi navegador. Está saltando hasta la imagen grande en alrededor de 500 píxeles. Podrás tener un valor diferente y veremos por qué muy pronto. Pero puedes pensar que 500 píxeles son un poco demasiado pequeños para estar saltando a la imagen grande, considerando que ni siquiera es más ancha que nuestra primera imagen. Seguramente la versión 640 será más adecuada. Pues bien, esta es una pregunta muy válida y algo que vamos a contestar a continuación. 6. Introducción a la densidad de píxeles: Este video entra en la lección 3 de los archivos de inicio, abre la página de índice, y también asegúrate de que tenemos el correcto abierto dentro del navegador también. En el último video, previamente discutimos que las imágenes pueden no estar cambiando en los momentos en que esperamos que lo hagan. Miramos si reducimos el navegador al tamaño más pequeño dentro de las herramientas de dev, vemos que la imagen más pequeña está cargada. Al escalar esto hacia arriba, vemos alrededor la marca de 500 píxeles que se ha descargado la imagen más grande. Podrás pensar que este salto a la imagen más grande es un poco demasiado temprano ya que aún está por debajo de la imagen de 640 píxeles de ancho. Bueno, la razón por la que esto sucede es porque no solo se trata del ancho de la imagen, también se trata de la densidad de píxeles de la pantalla. Aquí estoy usando una pantalla de retina para que podamos apretar más píxeles por pulgada que un dispositivo no retina. Esto da como resultado una imagen de calidad más nítida y nítida. ¿ Cómo funciona todo esto? Bueno, imagina que teníamos una pantalla con una resolución de 1920 por 1080, siendo 1920 el ancho de la pantalla en píxeles. Digamos que creamos un espacio de 300 por 300 píxeles donde queríamos colocar una imagen dentro. Hace muchos años, esto era sencillo. Creamos una imagen que tenía 300 píxeles de ancho, 300 píxeles de alto, y funcionó muy bien. Ahora bien, aunque con las demandas de mayor calidad, muchas pantallas son capaces de apretar más píxeles en un espacio, comúnmente conocido como píxeles por pulgada o la densidad de píxeles. Esto significa que si tienes una pantalla 2x, exprimirás el doble de píxeles en el mismo espacio. Lo que significa que podemos usar una imagen el doble del tamaño, en nuestro caso, 600 por 600 píxeles, y se encogería en el mismo espacio disponible en la pantalla. Es por ello que la retina en los dispositivos de mayor densidad de píxeles se ven mucho más nítida. Las pantallas también pueden ir aún más altas, como 3 o 4x. Seguro que mucho más alto en un futuro cercano también. Para ver un ejemplo del mundo real, sobre la izquierda aquí, pantalla de mi portátil tiene una resolución de 3,072 píxeles de ancho por 1920 de alto. Puede pensar que podría acomodar imágenes de hasta 3,072 píxeles de ancho. Encima en la carpeta Imágenes, también tenemos esta misma imagen de carretera llamada 1x, 2x, y también 4x también. El 1x imagen tiene 640 píxeles de ancho, y esto no está pensado para pantallas de retina. Esto está destinado a ser utilizado en monitores regulares que tienen una densidad de píxeles regular, 2x, esto es el doble del tamaño y tiene un ancho de 1280. Entonces 4x tiene 2,560 píxeles de ancho. Vamos a darle una oportunidad a esto. Si comentamos estas imágenes aquí. Bueno, esto crea una nueva imagen elementos, y vamos a configurar esto para mostrar nuestra imagen 1x. Lo que queremos hacer aquí es copiar y pegar esta imagen en dos veces más. Guarda esto, y luego pasa al navegador, y cierra las herramientas de desarrollador. Si estiramos el navegador para que sea más o menos el ancho completo de la pantalla, podemos ver que solo tenemos el ancho para dos de estas imágenes. Recuerda que cada una de estas imágenes es la versión 1x, que tiene 640 píxeles de ancho. Aquí sólo tenemos el ancho para alrededor de 1500 píxeles, pesar de que acabamos de ver que la resolución de la pantalla era de más de 3,000 píxeles de ancho. Esto se debe a que acabo de mencionar que estoy usando una pantalla de retina. Una pantalla de retina no significa que tengamos más espacio para jugar. Simplemente significa que podemos proporcionar una imagen de mayor calidad, y luego las imágenes serán exprimidas en el mismo espacio disponible. Si lo pensamos, esto tiene todo sentido. Queremos que el tamaño físico de la imagen ocupe la misma cantidad de espacio en cada pantalla. Al crear un sitio web, una imagen que diseñé para que sea la mitad del ancho de la pantalla, seguirá siendo la mitad del ancho para una pantalla regular o de retina. La única diferencia es que una pantalla de retina puede usar una imagen más grande para entrar en el mismo espacio disponible dando como resultado una imagen de mayor calidad. También podemos usar este conocimiento con los atributos del conjunto de fuentes. Para esto, sólo necesitamos uno de nuestros ejemplos de imagen, así que movamos dos de estos. Esto también se contará como la versión original 1x para pantallas no retina. Después de esto, coloque en el srcset, y luego usando una fuente también podemos proporcionar un 2x, y también un enlace a nuestra imagen 4x también. La diferencia con el video anterior aunque agregamos el tamaño seguido por el w Esta vez, el srcset también puede aceptar una densidad de píxeles. Para esto, estamos agregando 2x, y luego para la imagen grande, agregamos 4x. Justo antes de comprobar esto, también podemos especificar el tamaño que queremos que muestre la imagen. Esto significa que independientemente de la pantalla, queremos mostrar una imagen de 640 píxeles de ancho. Esto es lo que se llama píxeles CSS. Entonces si el navegador decide que quiere usar uno más grande, como el 2x o el 4x, entonces será exprimido en el mismo espacio. Vamos a darle a esto un guardado y más al navegador, las herramientas de desarrollador, refrescar, a la red. Ahora, a pesar de que hemos establecido la imagen para que tenga 640 píxeles de ancho, el navegador ahora ha detectado que mi monitor es una pantalla retina y optó por aplicar la imagen 2x, que tiene 1280 de ancho, y esta imagen se aprieta en la misma espacio disponible. Usar estos atributos de imagen extra es una manera bastante buena de cambiar entre tamaños de imagen, dependiendo de la pantalla o la densidad de píxeles. A menudo, no necesitamos hacer nada más complejo que esto. También estamos poniendo mucha confianza en el navegador, eso si quisiéramos más control manual o opciones aún más flexibles. Entonces a continuación echaremos un vistazo a cómo hacer esto con el elemento pitch. 7. El elemento de la imagen: Estos atributos de imagen extra que hemos mirado son realmente útiles para seleccionar el tipo de imagen correcto en función del ancho del navegador y también de la densidad de píxeles. Si esto es todo lo que necesitamos, entonces eso está completamente bien. No obstante, si queremos un control más fino, podemos hacer uso de lo que se llama el elemento de imagen. Bueno, esta lección se dirige al número 4 que es el elemento de imagen, y luego abre la página index.html. Dentro del navegador, esta es solo una página HTML vacía y tenemos algunas imágenes como siempre en esta lección las cuales realmente van a ser útiles para revisar lo que los elementos de imagen tienen para ofrecer. El elemento de imagen proporciona más flexibilidad si es necesario dándonos acceso a toda la potencia de las consultas de medios para seleccionar nuestra imagen. Esta es la forma manual de decirle al navegador qué imagen es usar en lugar de dejar que tu navegador decida como lo hicimos en videos anteriores. El elemento de imagen es simplemente un envoltorio para varias imágenes así. Dentro del cuerpo, creamos la imagen, etiqueta de apertura y cierre. Este elemento no proporciona ninguna imagen por sí mismo, en cambio necesitamos colocar en algún contenido dentro de este elemento. También al igual que la fuente en la que miraste en videos anteriores, el elemento de imagen también está bien apoyado. Tenemos soporte completo en todos los principales navegadores y como con la mayoría de las cosas, tenemos un problema con Internet Explorer, bueno con los sistemas Microsoft. Esto ha sido reemplazado por el navegador Edge por lo que no deberíamos tener demasiados problemas con este elemento. Volver al editor de texto y dentro del elemento de imagen y voy a añadir nuestra primera imagen. Debo ir por la carpeta de imágenes y el lago que es 640 pixels wide.jpeg. Como cabría esperar, si guardamos y actualizamos esto, ahora vemos que esta imagen se ha cargado dentro del navegador. Con esta configuración no estamos más abajo de la línea de lo que estaríamos simplemente usando un elemento de imagen regular. Pero lo que podemos hacer al usar estos elementos de imagen es también proporcionar imágenes alternativas dentro de uno o más elementos fuente. El elemento fuente sólo tiene una etiqueta de apertura. Ya que agregamos los datos como atributos, se utiliza para proporcionar recursos multimedia no sólo para estos elementos de imagen sino que también puede ver este atributo fuente utilizado con el envoltorio de audio o video también. Al usarlo dentro de los elementos de imagen, igual que nosotros, se ignorarán los atributos de origen. El motivo de esto es que el atributo fuente no es necesario porque ya tenemos una imagen de retroceso justo debajo, pero lo que podemos agregar es el conjunto de fuentes. Esto de nuevo, toma las imágenes que queremos utilizar, seguido del tamaño. Primero agregamos la ruta del archivo para que la nuestra esté en la carpeta Imágenes. Vayamos por el sun-640.jpeg. El tamaño de la imagen 640w. Después separados por una coma, nuestra segunda imagen que vamos a permitir para la selección es la versión más grande del sol que es sol-1,280.jpeg. Entonces especificamos que esta imagen tiene 1,280 píxeles de ancho y he añadido las dos imágenes de sol dentro de aquí las cuales son diferentes a la imagen de retroceso solo para que podamos ver claramente lo que está pasando dentro del navegador. Al igual que en el video anterior, también podemos usar la densidad de píxeles en lugar de este ancho. Aquí podríamos agregar 2x y 4x por ejemplo, así que elige qué opción te convenga más. Vamos a darle a esto un guardado y abrir esto en el navegador, refrescar. Ya veremos si reducimos el navegador al tamaño más pequeño pero el sol-640 lo hinchará. No vemos el lago porque esta es sólo la imagen de retroceso si la fuente no es compatible. Hagamos esto un poco más grande. Sigo adelante y luego una vez que golpeamos poco menos de 500 píxeles, vemos que la versión más grande se ha cargado. Ahora esto nos deja en una posición bastante similar a la que hemos tenido en los videos anteriores donde teníamos un elemento de imagen regular y luego agregamos el conjunto de fuentes. Pero la diferencia aquí es que también podemos introducir consultas de medios. Esto significa que en lugar de dejar que el navegador decida qué imagen mostrar, podemos servir algunas condiciones más estrictas por nuestras propias. Podemos usar cualquier consulta de medios que queramos igual que podríamos hacer con CSS regular. Uno común es mostrar sólo una imagen si la ventanilla tiene un ancho mínimo o máximo. Agregamos los atributos de medios y luego configuramos nuestra consulta de medios entre los corchetes. Este tenía el ancho mínimo igual a 640 píxeles y vamos a eliminar nuestra imagen más grande. De lo que esto nos deja es un atributo fuente, que sólo va a mostrar esta imagen cuando el navegador es mayor que 640 píxeles. Si el navegador está por debajo de 640 píxeles y no se cumple esta condición de consulta de medios, se utilizará la imagen de respaldo. Echemos un vistazo a esto. Baja esto al tamaño más pequeño y refresca. Vemos el lago que es la imagen de respaldo y ahora vamos a estirar esto para que sea 640 píxeles o superior. Esto ahora cambiará a la imagen del sol. Otra cosa útil que esta consulta de medios hace para nosotros es que también nos permite afinar exactamente cuando queremos que nuestras imágenes cambien. Antes cuando el navegador estaba decidiendo, cambió mi imagen en justo debajo de la marca de 500 píxeles. Digamos que pensamos que esto era demasiado temprano, queríamos cambiar esto a 600 píxeles, bueno estos atributos mediáticos nos permitirán afinar esto a cualquier tamaño que queramos. Para ello, duplicaremos nuestra fuente, podemos volver a introducir nuestra imagen grande que fue de 1,280. También tenemos que hacer es establecer el ancho uno aquí y esta vez, para la imagen más pequeña, vamos a establecer el ancho máximo para que sea 599 píxeles y luego queremos que el más grande surta efecto a 600 píxeles. Incluso podrías hacer esto más alto si quisieras pero esta consulta de medios ahora nos dará control total de exactamente cuándo cambiamos a nuestra imagen grande. Vamos a probar esto. Si bajamos al tamaño más pequeño, vemos el sol en 640, y luego lo toma hasta 600 píxeles y nuestra imagen ahora será reemplazada por la versión más grande, así como el ancho mínimo o máximo que somos utilizando aquí, puede utilizar cualquier consulta de medios válida. A pesar de que sólo tenemos una sola fuente de imagen para cada consulta de medios, todavía podemos usar múltiples fuentes que aún caen bajo una sola consulta de medios. Un ejemplo podría ser al comprobar la orientación del dispositivo. Esto es más para dispositivos móviles y podemos comprobar si el dispositivo está girado ya sea horizontal o vertical. Para ver esto en acción, podemos cambiar el ancho máximo a través de la orientación, y éste vamos a establecer este sea un paisaje. Podemos entonces cambiar la segunda a la orientación de retrato y ahora vamos a establecer nuestras imágenes para que se adapten a cada una. Dado que el paisaje es más amplio, iremos por nuestras dos imágenes anchas, que son 1,280 y 2,400. Cambie tanto el origen de la imagen como también el ancho. Copiemos esto, separado por coma el segundo que es para 2 mil 400. A continuación, la vista de retrato para que las imágenes sean más estrechas y para ello tenemos una versión 320 y una 640. El primer origen de 320 luego separado por una coma, podemos sumar en la versión de 640 píxeles de ancho. Ahora si probamos esto en modo retrato, ahora deberían mostrarse nuestras dos imágenes más pequeñas. Cuando cambiamos esto al paisaje, entonces deberíamos mostrar nuestras dos imágenes grandes. Para simular esto, podemos pasar a las herramientas del desarrollador, y luego si hacemos clic en la barra de herramientas del dispositivo Toggle, esto nos permitirá entonces seleccionar entre una vista de escritorio y un dispositivo móvil. Vamos por el iPhone 6, y si actualizamos, vemos que se ha cargado esta pequeña imagen de 640 píxeles. Este ícono justo aquí cambiará la orientación al paisaje, refrescará, y ahora se eligió una de las imágenes grandes para la vista del paisaje. Recuerda puedes agregar tantos de estos elementos fuente como te gustaría, para asegurarte de que tenemos la mejor imagen para cada situación. Por último, también podemos hacer uso de estos atributos de tamaño, igual que hicimos en los videos anteriores. Recuerda que si no se agrega ningún atributo de tallas, asumió que deseas que todas estas imágenes sean del ancho completo para la ventanilla. A modo de ejemplo, al usar una orientación horizontal, posible que desee restringir algunas de las imágenes más grandes para que solo sean el 50 por ciento del ancho de la pantalla. Aunque igual que antes, establece los tamaños. Esto se combina con una consulta de medios donde estableceremos el ancho máximo sea de 1,280 píxeles. De cero a 1,280, queremos que las imágenes sean el ancho completo del dispositivo con 100vw y luego solo 50 por ciento de ancho en las pantallas más grandes. Así y vamos a probar esto. Si estiramos el navegador aún más ancho, no veremos ninguna diferencia ya que el iPhone tiene un tamaño fijo. Si seleccionamos algo más grande como un iPad Pro, cuando primero seleccionamos esto en la vista retratadora, la imagen es el ancho completo de la pantalla. Esto se debe a que cae por debajo del ancho máximo de 1,280 píxeles, donde establecemos que el ancho sea del 100 por ciento. Alternativamente, si cambiamos esto al paisaje, ahora debería cambiar la imagen hacia abajo sea del 50 por ciento. Probemos esto, y todo esto ahora está funcionando como se esperaba. El clave para llevar siendo si quieres que el navegador decida qué imagen seleccionar, usa la imagen combinada con el conjunto fuente o simplemente así si quieres un control mucho más flexible, el elemento de imagen es una gran opción. Otro gran uso para el elemento de imagen es también cambiar la dirección artística de las imágenes y vamos a cubrir cómo hacerlo en el próximo video. 8. Dirección de arte: Los ejemplos que hemos mirado hasta el momento se centran principalmente en la densidad de píxeles y también en la resolución. No obstante, aunque el elemento pitch también tiene otro gran caso de uso, y esto es para ajustar la imagen, en base a lo que se llama la dirección del arte. Para esto, vayamos a nuestros archivos de inicio y a la lección Número Cinco. A partir de aquí, la carpeta Dirección de Arte, abre la página de índice, y vamos a abrir esto, dentro del navegador, copiaremos la ruta del archivo a ésta, y luego reemplazaremos la del último video. También solo voy a hacer clic en la barra de herramientas del dispositivo de alternancia para reinstalar esto de nuevo a la vista completa del escritorio. Todas nuestras imágenes hasta ahora solo han sido de diferentes tamaños, y es genial tener una versión más pequeña y más grande de la misma imagen, pero a veces ciertas imágenes simplemente pueden no adaptarse a un cierto tamaño de pantalla. En la carpeta Imágenes, dentro de la lección cinco, primero, echemos un vistazo a la versión de paisaje. Aquí, vemos a alguien saltando con un amplio fondo paisajístico, y esto se verá bien en un monitor grande en mi opinión, donde se puede ver todo el detalle de fondo. Podemos ver el sol, podemos ver las montañas, podemos ver el suelo, pero imagínate esto en un dispositivo pequeño como un teléfono, ya que la persona saltando ocupa sólo un pequeño porcentaje del ancho total de la imagen, es punto enfocado de esta persona puede parecer realmente pequeño. Para el dispositivo móvil en lugar de suministrar una versión reducida más pequeña de esta imagen, puede ser mejor proporcionar una versión recortada de este punto de enfoque, tal como vemos en la versión de retrato. Aquí, vemos una versión vertical que se enfoca en esta persona, y también vemos menos del fondo. decir, esta persona ocupa un porcentaje mayor del ancho total. Por lo tanto, se verá más grande en un dispositivo móvil. Vamos a probar esto. Encima en la página de índice, dentro de la sección de cuerpo, aquí sólo tenemos un arrancador en blanco. Nuevamente, para hacer uso de esto, vamos a utilizar el elemento de imagen. Entonces dentro de aquí, vamos a abastecer dos elementos fuente, que va a apuntar a ambos cuadros. Sabemos que podemos agregar una consulta de medios como atributo, luego dentro de los corchetes, la primera configuraremos el ancho máximo será de 799 píxeles. Entonces para esta vista más pequeña, vamos a establecer la imagen con los atributos srcset, por lo que esto va a apuntar a la carpeta Imágenes. Entonces la imagen que necesitamos, ya que este es el dispositivo más pequeño, vamos a usar la versión de retrato. Esto tiene una extensión JPEG de punto. Ahora, podemos duplicar esto. Este se va a activar cuando el ancho mínimo sea de 800 píxeles y superior. Después de éste, ya que tenemos más espacio, cambiaremos a la vista del paisaje. Cambiar entre nuestras dos imágenes así cuando una es un nivel de zoom particular o una es una versión recortada de la imagen, esto es lo que se conoce como la dirección de arte. Ya que no tenemos múltiples tamaños de estas imágenes, vamos a configurar algunos CSS en la parte superior. Simplemente restringiremos la imagen para que tenga un ancho máximo del 100 por ciento, y esto evitará que las imágenes se estiren demasiado ancho. Además, al hacer este elemento pitch, necesitamos agregar un placeholder de imagen el cual va a actuar como predeterminado, y también las ubicaciones de los elementos colocan estas imágenes dentro. El origen, esto va a ser para el retroceso, simplemente colocaría en la versión de paisaje. Dale a esto un guardado, y asegúrate de que más en el navegador, estamos dentro de la carpeta número cinco. En primer lugar, vamos a reducir esto hasta la vista más pequeña. Porque estamos en la vista más pequeña, que está por debajo de 799 píxeles, veremos una versión retratar la cual está enfocada en que esta persona salte. Deje escalar esto hasta más de 800 píxeles. Ahí vamos. Después más de 800 píxeles, vemos la versión completa del paisaje con más del paisaje de fondo. Esta dirección artística realmente nos da algo en lo que pensar, para tratar de poner el foco en una sola parte de la imagen. O al igual que en este caso donde estamos tratando de no hacer demasiado pequeña la parte clave. A continuación, enfocaremos nuestra atención en los diferentes tipos de imagen disponibles. 9. Tipos de imagen y compresión: Otra parte enormemente importante de optimizar nuestras imágenes para la web es considerar el formato de imagen. Hay muchos formatos de imagen disponibles, y estoy seguro de que te has topado con algunos de estos, como JPEG, PNG, GIF, o GIF dependiendo de cómo lo pronuncies, y también SVG por nombrar algunos. Todos estos son comunes y al descargar una imagen en línea, utilizando nuestros proyectos, no siempre obtenemos una elección de en qué formato va a estar la imagen. Hay formas en que podemos cambiar esto, que veremos pronto. Pero antes de ir a cambiar los formatos de imagen, primero necesitamos entender cuáles son las diferencias clave y por qué incluso debemos cambiar formatos en absoluto. Existen múltiples razones clave por las que el formato es importante. El grande es que los diferentes formatos tienen diferentes tamaños de archivo. La misma imagen en un formato diferente podría reducir potencialmente el tamaño del archivo, reduciendo el tiempo de descarga para el usuario final. Este ahorro de tiempo podría ser poco o enorme dependiendo de algunos de los factores a los que vamos a echar un vistazo en tan solo un momento. Junto con el tamaño del archivo, la calidad de imagen real también puede ser diferente con diferentes formatos también. Existen consideraciones como si la imagen puede apoyar transparencia y también el número de colores de soporte. Además, tenemos que pensar si necesitamos escalar la imagen hacia arriba o hacia abajo. Ya que como hemos mirado en otros videos, escalar las imágenes JPEG puede reducir la calidad de la imagen. Pero otros tipos de archivos como SVG no se verán afectados. Esto sucede porque tanto este SVG como JPEG caen en dos categorías diferentes. Una imagen ráster es como una fotografía tradicional. Está conformado por diminutos píxeles. Dependiendo del tamaño de la imagen, puede haber millones de píxeles, y cada uno representa un color. Dado que hay tantos píxeles en una fotografía, suelen ser indetectables por el ojo humano a menos que escalemos las imágenes, y es ahí cuando empiezan a perder la calidad y se pixelan ya que la pantalla está tratando de encajar la misma cantidad de píxeles en un área más grande. formato de imagen como JPEG y PNG entran en esta categoría. Otra categoría son los gráficos vectoriales. Estos se crean en programas de computadora y están confeccionados con cosas como curvas, líneas y formas. Se pueden escalar hacia arriba o bajar de tamaño sin ninguna pérdida de calidad. También podemos editar gráficos vectoriales existentes. Programas como Adobe Illustrator, Sketch, Inkscape y Figma pueden crearlos y se pueden guardar en formato como SVG. Otra diferencia con un SVG es que también está representado en código también. Un archivo SVG contiene un código, el cual podemos agregar directamente a un documento HTML. Significa que ni siempre necesitamos vincularnos a un archivo de imagen si preferimos este enfoque. Las claras distinciones entre estos dos grupos facilitan la decisión de lo que necesitamos utilizar. Si necesitas fotografías de alta calidad, como un sitio web, que es un portafolio de fotografía, las imágenes ráster como JPEG son ideales. Bueno para gráficos, logotipos e iconos, un vector a menudo será una mejor opción especialmente al escalar la imagen. A pesar de que tenemos la categoría de ráster como una mejor opción de cosas como fotografías, esto no significa que estemos atascados con el tamaño del archivo original. Podemos aplicar compresión a nuestras imágenes para reducir el tamaño del archivo, lo que las hará más rápidas para su uso en la web. compresión se puede aplicar en grupos llamados lossy y lossless. Estos se relacionan con cómo comprimimos u optimizamos nuestras imágenes para tratar de reducir el tamaño del archivo y por lo tanto la velocidad de descarga. La compresión con pérdida, tal como suena, puede resultar en una pérdida de la calidad de imagen original. Pero como es más regresivo, también puede conducir a mayores reducciones de tamaño de archivo también. Esto no significa que nuestras imágenes se vean puras. De hecho, es posible que ni siquiera note una pérdida de calidad en muchas ocasiones dependiendo del nivel de pérdida que fijemos. Sin embargo, una vez aplicada la compresión, algo que es realmente importante es que no hay vuelta atrás a la imagen original, está completamente perdida para siempre. Lossless es prácticamente lo contrario, y se mantiene la calidad de imagen original. El algoritmo de compresión puede reducir el tamaño del archivo y también reducir los metadatos que almacenó dentro de la imagen. Los metadatos incluyen cosas guardadas automáticamente por la cámara, como la fecha y el tipo de cámara, el nombre del fotógrafo, y así sucesivamente. Dado que lossless está manteniendo la calidad de imagen original, es comprensible que el ahorro de archivos pueda ser menor que las versiones con pérdida. Entonces con todo esto, ¿cuál es mejor usar? Bueno, echemos un vistazo a algunos de los formatos de imagen más comunes. JPEG es una gran opción para exhibir en fotografías de alta calidad o incluso obras de arte. No obstante, no es genial para mostrar cosas como el texto, sobre todo si necesita escalarse hacia arriba. JPEG es un formato de imagen común, por lo que no debe haber problemas con esa falta de apoyo. Se trata de un formato de compresión con pérdida, por lo que también podemos guardar mucho del tamaño del archivo de imagen. Si estamos contentos con una pequeña pérdida de calidad, podríamos incluso ir más allá con la compresión si quisiéramos una versión más pequeña, tal vez como un archivo adjunto de correo electrónico o simplemente algo en tu sitio web que no requiera una enorme cantidad de detalles. PNG también es un formato de imagen web muy popular. Uno de los beneficios es que también soporta transparencias, que es algo que un JPEG no soporta. Un JPEG debe tener un color de fondo sólido. Por ejemplo, si lo estás usando en un encabezado de sitio web, debes asegurarte de que el color de fondo de la imagen coincida con el color de fondo del encabezado. Si necesitas usar una imagen o un gráfico sobre un fondo transparente, un PNG es el camino a seguir. Un PNG también tiene compresión sin pérdidas, por lo que se mantiene el archivo original y también se puede restaurar. No obstante, esto también puede significar que es posible reducir menos el tamaño del archivo. A veces encontrarás imágenes simples, iconos, o gráficos almacenados como GIF. Son una buena opción para esto, ya que tienen un tamaño de archivo pequeño y también pueden soportar transparencias también. Por lo que no tenemos antecedentes encubriendo las cosas. Un archivo GIF también puede contener una animación. Por lo que esta es una buena opción si necesitas animar. Estas animaciones se pueden crear con herramientas como Photoshop. Pasando a los vectores, un SVG es una opción popular. No lo usamos para fotografías. O si necesitas un gráfico basado en computadora, un logotipo o un icono, esta es una gran opción porque es redimensionable sin ninguna pérdida de calidad y también generalmente tiene tamaños de archivo pequeños también. Algunas de estas tecnologías de imagen mencionadas hasta el momento han existido desde hace algún tiempo y también tienen algunas limitaciones. Por esta razón, se han desarrollado algunos formatos de imagen de próxima generación más nuevos, como JPEG 2000, JPEG XR, y también WebP. Aunque aún no tan comúnmente adoptados, pueden ofrecer grandes ahorros de tamaño de archivo en formatos tradicionales como JPEG y PNG. No voy a entrar en todos los detalles técnicos de estos, pero JPEG 2000 ofrece la opción tanto de compresión con pérdida como también sin pérdida. Podemos elegir cuál es el mejor para nuestras imágenes y generalmente tiene una imagen de mayor calidad para el mismo tamaño de archivo que un JPEG normal. JPEG XR fue creado por Microsoft, y también ofrece la opción de compresión con pérdida y sin pérdida para adaptarse a una gama más amplia de situaciones. Puede tener mayores niveles de compresión, por lo que hay un gran ahorro de tamaño de archivo a realizar. También tenemos WebP, que ha sido desarrollado por Google y al igual que los otros dos también soportará compresión tanto con pérdida como sin pérdida. Puede preservar transparencias y generalmente tiene un tamaño de archivo mucho menor que los tipos de archivo tradicionales. Otro beneficio es que también soporta animaciones también, lo que significa que es una alternativa realmente buena a los archivos GIF como cabría esperar ya que estos tipos de archivos son mucho más nuevos. El problema radica en torno al soporte en programas de imagen, dispositivos como cámaras, y también navegadores web. Para consultar el soporte del navegador, podemos ir también a caniuse.com. Echemos un vistazo a un WebP. Aquí vamos, el formato de imagen WebP. Podemos ver que esto es totalmente compatible en la mayoría de los principales navegadores. Como siempre, tenemos un problema con Internet Explorer, que ha sido reemplazado por Edge. También en Safari, sólo tenemos apoyo parcial. Esto significa que solo es compatible con macOS, su sistema operativo y superior. Esto es algo a tener en cuenta al usar cualquiera de estas imágenes de próxima generación. Echemos un vistazo a JPEG 2000. Podemos ver que esto no está tan bien apoyado como el WebP, por lo que esto es algo de que tener cuidado. Vamos a revisar el WebXR. Nuevamente, esto tiene muchos problemas con el apoyo. Puede ser mejor quedarse con un formato como WebP en lugar de estos dos formatos JPEG. SVG, echemos un vistazo a esto. Este es uno de los tipos de vectores. Esto está muy bien soportado en todos los principales navegadores. Puede ser una buena idea tener disponible un formato de imagen de próxima generación si el navegador los admite y también retroceder imágenes como JPEG y PNG si existe un soporte limitado para navegadores. Echaremos un vistazo a cómo hacer esto a continuación junto con algunas herramientas que puedes usar para convertir tipos de archivos de imagen. 10. Herramientas de conversión e imágenes alternativas: Ahora sabemos un poco más sobre los diferentes tipos de archivos de imagen disponibles. Ahora echemos un vistazo a cómo podemos agregar estos a nuestro proyecto y también cómo podemos agregar imágenes de retroceso si no hay soporte de navegador. Para esta lección dirígete al número 6, que es herramientas de conversión e imágenes de respaldo. Abre como siempre la página Índice, y luego podemos abrir esto dentro del navegador, colocarlo en una nueva pestaña. Voy a empezar con nuestra página HTML en blanco. Dentro de aquí, he proporcionado una lista de algunos de los tipos de imagen comunes, tenemos el WebP, tenemos el SVG, PNG, JPEG, y también GIF. Nuevamente, para cambiar entre diferentes tipos de imagen, los elementos de imagen que tiene están cubiertos por [inaudible] lista varias imágenes con diferentes formatos. Siguen proporcionando los elementos de origen como lo hemos hecho anteriormente, pero esta vez, en lugar de trabajar con el tamaño, declaramos el tipo de archivo, navegador o dispositivo comprobará luego si este tipo de archivo es compatible, y si no, lo se saltará. Usando estos formatos de imagen que acabamos de tener aquí, empecemos con nuestro ejemplo. Podemos usar el elemento de imagen como nuestro envoltorio, para este ejemplo sobre en imágenes tenemos un JPEG, y una versión WebP de la misma imagen, así que vamos a agregar estos en. Necesitamos una fuente, luego dentro de aquí, agregamos los atributos de tipo. Podemos entonces usar cualquiera de estos acostumbrados a ambos, voy a ir por la versión WebP, que es image/webp. Después agregamos el punto de fuentes a la imagen WebP. Después de esto, también necesitamos cuidar nuestro retroceso, que es nuestro bridge.jpg, agregar en la imagen elementos. Esto está en las imágenes y el bridge.jpg. Si WebP es compatible, seleccionará esta imagen. De no ser así, fácilmente volverá a caer dentro de los elementos de la imagen. Vamos a probar esto, refrescar el navegador. Podemos ver dentro de las herramientas de desarrollador que mi navegador ha elegido la versión WebP. Para mí esto sería un beneficio porque esto se cargará más rápido. Si echamos un vistazo al bridge.jpg, podemos ver hacia abajo en la parte inferior, que esto es de unos 134 kilobytes. Si vamos a la versión WebP, esto es alrededor de 1-10 kilobytes, por lo que esto dará como resultado un ahorro de archivos y mis imágenes se descargarán más rápido. Esto es realmente útil, pero cuando buscamos imágenes para usar en nuestros proyectos, no siempre tenemos la opción de descargar nuestras imágenes en diferentes formatos de archivo. Esto está bien porque hay algunas herramientas que nos ayudan a convertir, y también a comprimir nuestras imágenes. Estoy usando una marca, y esto tiene algunas opciones integradas a la hora de abrir las imágenes. Si entramos en el número seis, el que estamos actualmente, inserte imágenes y haga doble clic en cualquiera de estas imágenes. Esto se abrirá entonces dentro de la vista previa. No te preocupes si no estás usando una marca si estás usando Windows o Linux, tu programa predeterminado que abre la imagen también puede tener algunas de estas opciones integradas. Si no, echaremos un vistazo a algunas opciones más en tan solo un momento. Como más símbolo, podemos entrar en herramientas y ajustar el tamaño. Podemos reducir el tamaño del archivo si esta imagen en particular es un poco demasiado grande, y podemos ver que el tamaño del archivo resultante se ha reducido. Cual cambia a ser 300. Se puede ver que esto se ha reducido a 50 kilobytes, que cambia a 300. Ahora bajan a 30 kilobytes. Es lo más básico, solo podemos hacer algo como esto para reducir el tamaño del archivo si la descarga inicial es demasiado grande. La mayoría de los programas también nos permiten exportar las imágenes en diferentes formatos también. Muchas de estas generalmente tienen una función de exportación en la que podemos hacer clic y a menudo podemos cambiar el formato de imagen, por lo que vemos el tamaño del archivo es 157 aquí, que cambia a ser 2,000. Se trata de 216 PNG, esto es un poco más grande, y también los tamaños de archivo que soportan la compresión, también podemos ajustar la calidad también. Al igual que con la mayoría de las cosas, también hay muchas otras herramientas que puedes descargar. Puedes encontrar una enorme cantidad disponible si buscas App Stores o en línea. Una herramienta popular baja es una llamada ImageOptim. Esto está disponible en imageoptim.com. Esta pieza particular de software está disponible para Mac y Linux, que puedes descargar. Se trata de una colección de herramientas que combina para eliminar cualquier basura innecesaria de nuestras imágenes. Aquí hay una lista de herramientas que utiliza, y todo es gratuito y de código abierto, por lo que no hay ningún cargo para usar esto. También aplica técnicas de compresión, y también hay una versión en línea en la que podemos hacer click justo aquí. cobran por este servicio en particular. Y otro es tinypng.com. A diferencia de ImageOptim, esta es una herramienta de compresión online gratuita. Esto lo puedes encontrar en tinypng.com. A pesar del nombre, esto también acepta imágenes JPEG. Si simplemente podemos arrastrar y soltar en esta sección justo aquí, ese otro servicio de arrastrar y soltar basado en web es compressor.io, junto con PNG y JPEG. Esto también acepta GIF, SVG, y también los nuevos tipos WebP. Se puede ver que en la parte inferior aquí podemos aceptar tipos de compresión con pérdida o pérdidas. También un ajuste de cliente también donde podemos cambiar el tamaño y también establecer la calidad de imagen también. Otro optimizador y compresor es IMG2go, esto está disponible en img2go.com. Esta herramienta también nos permite convertir el tipo de imagen a otro formato también. Funciona con PNG, GIF, JPEG, y también vectores como SVG. Al igual que las otras, también podemos arrastrar y soltar y también tendremos algunas opciones para enlazar con Dropbox o Google Drive, una URL dedicada. También hay un montón de opciones para establecer la calidad y también el tamaño de la imagen también. Estas son solo algunas de las muchas herramientas disponibles para descargar, y también algunas versiones en línea también. Nunca debemos estar atascados con el tipo de imagen equivocado para nuestro proyecto. 11. Utilizar un CDN: Toda esta manipulación de imágenes y elegir las imágenes correctas para nuestro proyecto realmente puede ser mucho trabajo extra, sobre todo a medida que crecen nuestras aplicaciones. Es por ello que en este video les voy a mostrar un gran servicio que también es gratuito, que realmente puede ayudar con esto. Podemos hacer uso de servicios como Cloudinary, que está disponible en cloudinary.com. Esto nos va a permitir ocuparnos de mucho trabajo por nosotros. Cloudinary se utiliza para almacenar y alojar nuestras imágenes y también video si se requiere también. Una vez subido, obtenemos una URL a la que podemos enlazar dentro de nuestro HTML. Esto no sólo aloja nuestras fotos de imágenes, sino que también tiene muchos otros beneficios también. Todos estos beneficios, es realmente fácil de usar CDN. CDN es una red de entrega de contenidos y es una forma de tener nuestro contenido, que en nuestro caso son nuestras imágenes disponibles en todo el mundo en múltiples servidores o centros de datos. Tener estos múltiples centros de datos significa que nuestras imágenes se alojaron más cerca del usuario, lugar de simplemente tenerlas en una ubicación central, todos en el mundo. Esto realmente puede acelerar la entrega de nuestras imágenes. También si hay algún problema con el servidor, se puede cambiar fácilmente a uno nuevo para evitar cualquier tiempo de inactividad. No sólo sirve la imagen desde un centro de datos local, sino que también puede proporcionar una versión optimizada también. Sólo necesitamos subir una sola imagen a Cloudinary y podemos convertirla y enviarla de vuelta en un formato de archivo optimizado, incluyendo cosas como WebP y JPEG 2000, por supuesto, si el navegador lo soporta. Lo mismo para tamaño y calidad también, podemos configurar estas imágenes para que se transformen en ciertos tamaños o permitirle elegir fotos. Obviamente, necesitamos primero subir una imagen que sea lo suficientemente grande. Nuestro mayor caso de uso, ya que no queremos estirar una imagen demasiado grande y soltar ninguna calidad. Si no has usado Cloudinary antes, sigue adelante y crea una nueva cuenta que es gratuita y tiene una enorme asignación de uso de imagen gratuita. También hay una versión de pago, pero la cuenta gratuita incluye almacenar miles de imágenes. No deberías tener ninguna preocupación a menos que tu proyecto crezca a un nivel enorme. Ya tengo una cuenta ya que uso esto con bastante regularidad. Voy a abrir esta nueva pestaña. Después llevándolo al área del panel de usuarios para esta lección, dirígete al número 7, que está usando un CDN. Ya tengo esto abierto y también abierto dentro de una nueva pestaña del navegador. Este es solo un archivo HTML vacío. Dentro de la carpeta de imágenes, sólo tenemos esta única imagen, que es de 5,311 píxeles por tres-cinco, cuatro-cinco de ancho. Significa que esta es una imagen bastante grande, pero esta vez no vamos a estar vinculándola directamente a esta imagen. En cambio, podemos subir esta imagen a Cloudinary y luego en el enlace Cloudinary dentro de nuestro índice. Para esto, vamos a entrar en nuestra carpeta del proyecto, en el número 7 y en la carpeta de imágenes, y pasemos al panel Cloudinary, al que te llevarán cuando hayas iniciado sesión. Todo lo que tenemos que hacer es dar click en la mediateca. Después podemos arrastrar y soltar una nueva imagen la cual quieres subir. Deja esto dentro de aquí, y solo dale a esto unos segundos para subir. Ahí vamos. Ahí está nuestra nueva imagen. Si pasamos el cursor sobre esto, podemos ver una URL la cual podemos copiar con este enlace justo aquí. Si hacemos doble clic en esta imagen, nos meten en el detalle donde podemos agregar cosas como etiquetas. Podemos agregar algunos metadatos. Podemos ver cualquier historial de revisiones. Podemos ver los datos de archivo como el tipo de archivo, el tamaño, y también las dimensiones. Entonces abajo en la parte inferior tenemos lo que se llama transformaciones. Actualmente estamos en el original y esta es la URL a esta imagen en particular. Cloudinary ha agregado automáticamente algunas transformaciones para mejorar nuestra imagen, para cambiar el tamaño, para transformarse en una miniatura. Podemos tener un banner, podemos tener una versión con marca de agua. Cada vez que hago clic en una de estas imágenes, tenemos una nueva URL que podemos utilizar dentro de nuestros proyectos. Junto con estos valores predeterminados, también podemos crear nuestras propias transformaciones haciendo clic en este botón de transformación. Desde aquí, podemos recortar y redimensionar nuestras imágenes. Podemos cambiar el formato de imagen, tenemos una opción para todas estas diferentes extensiones. Podemos ajustar la calidad con este desplegable y este deslizador. Podemos agregar radios de esquina, podemos rotar, podemos agregar muchos efectos diferentes. Cada vez que hacemos un cambio a esta imagen, entonces se nos da una nueva URL la cual podemos copiar y usar dentro de nuestro proyecto. Cada vez que hacemos un cambio a nuestras imágenes, déjame simplemente cerrarla y volver al original. Cada vez que hacemos un cambio a una de nuestras imágenes como hacer clic en uno de estos presets o incluso nuestras propias transformaciones, entonces se nos da una nueva URL la cual tiene algunos parámetros diferentes. Aquí podemos ver estos parámetros anaranjados se están agregando y separados por coma. Si hacemos click en el círculo. Podemos ver diferentes aquí y éstas afectarán cosas como el tamaño, el radio, el borde, el color. Esta es nuestra forma de decirle a Cloudinary qué imagen queremos buscar. Este ID de imagen siempre es el mismo al final, pero solo agregaremos estos diferentes parámetros dentro de la URL. Pasemos a nuestro proyecto y podemos probar esto. En primer lugar, si hacemos click en el original y luego podemos seleccionar esta URL. Simplemente copiaremos lo que hay en él justo aquí en nuestros proyectos. Lo que primero vamos a hacer es establecer la imagen para que sea 100 por ciento del ancho de los navegadores con las etiquetas de estilo. El elemento de imagen, ancho máximo del 100 por ciento. Después hacia abajo en la sección de cuerpo podemos crear una imagen con esta URL también. Desregulación hizo cuál era el enlace que acabamos de copiar. Todo lo que necesitamos hacer es pegar en los atributos de origen, cerrar la barra lateral, darle a esto un guardado, refrescar el navegador. Podemos ver ya que esta es una imagen bastante grande, se ha tardado algún tiempo en descargar. Esta imagen es demasiado grande para el tamaño actual del navegador, pero veremos cómo ajustar esto en tan solo un momento. A continuación, podemos ajustar la rotación o el ángulo de esta imagen. Hacemos esto justo después de esta sección de subida. Si decimos barras inclinadas hacia adelante, digamos guión bajo ángulo alfa y luego 90 para un 90 grados. Todo esto viene antes del ID de imagen, que está al final y también el nombre de la imagen. Guarda esto. Recarga y ahora deberíamos tirar de una versión de 90 grados de nuestra imagen existente. Por supuesto, esto es demasiado grande, vamos a quitar el ángulo y podemos establecer un tamaño fijo en píxeles con w luego subrayado seguido de los valores de píxel como 200. Refrescar. Ahora esto tira de una imagen que es realmente pequeña y podemos ver el tiempo de descarga es mucho más rápido, pero como hemos aprendido en videos anteriores, un tamaño de píxel no siempre es la mejor opción. Lo que vamos a hacer es establecer el ancho para que sea igual, también, lo que va a permitir que Cloudinary elija la imagen de mejor tamaño para el navegador. Aquí lo vemos eligió una versión de 3.4 megabyte. Si vamos al original. El original es de aproximadamente 4.2, por lo que eligió un tamaño más pequeño el cual es adecuado para este navegador. También podemos cambiar el formato predeterminado de esta imagen usando f luego subrayado, y luego seleccionando uno del formato permitido por Cloudinary. Voy a ir por WebP y también por esto, podemos quitar the.jpeg extensión del navegador y refrescar. Ahora vemos que el tipo de imagen es WebP. Al igual que con el tamaño, también podemos permitir que Cloudinary establezca automáticamente las fotos de formato correctas. Podríamos hacer esto con f auto, y si lo hacemos, vemos que Cloudinary también elige un formato de fotos WebP, ya que esto es compatible dentro del navegador Chrome. También hay muchas otras opciones que podemos agregar dentro aquí. También podemos combinarlos, o también podríamos generar estas URLs nosotros mismos dentro de Cloudinary usando estas transformaciones. Esto es sólo una visión general de un uso básico con Cloudinary. Pero tiene muchas más características incluyendo agregar presets que configuran o transforman automáticamente nuestras imágenes cada vez que subimos otras nuevas. Existe una API de desarrollador para conectar tus proyectos. Esto te permitirá hacer automáticamente cosas como agregar subidas de noticias. Se puede incluir video. Yo recomendaría mirar a través de algunas de estas características. También la documentación si planeas usar Cloudinary para un proyecto. También uso Cloudinary para mis propios proyectos también, y lo encuentro muy confiable. También aunque este ejemplo sólo utiliza los elementos básicos de la imagen, también podemos combinar estas imágenes alojadas con [inaudible] y también el elemento pitcher también. En el próximo video, descubriremos otra forma de reducir el tiempo de carga de nuestra página configurando la carga perezosa. 12. Carga lenta: Disponemos de una página web que tiene imágenes. En ocasiones, cuando la página se carga por primera vez, no todas estas imágenes son visibles. Por ejemplo, si tenemos algunas imágenes justo abajo en la parte inferior de nuestra página, realmente no deberíamos esperar que el usuario espere a que estas imágenes se descarguen antes de que la página se cargue inicialmente. Para ayudar con esto, la técnica final que quiero mostrarte se llama carga perezosa. Esta es una forma de retrasar o aplazar la carga de imágenes que no es crítica. A menudo hay imágenes que el usuario no ve inicialmente y tiene que desplazarse hacia abajo para pasar a la vista. Un ejemplo de esto es algo así como Pinterest. Una página puede tener miles de imágenes y cargar todas estas a la vez llevaría mucho tiempo. Por lo que tiene sentido cargar solo lo que el usuario puede ver inicialmente, y luego cargar más imágenes a medida que el usuario se desplaza. Incluso podemos agregar contenido de marcador de posición simple o ligero mientras estas imágenes se están descargando. Cargar perezoso no es solo para imágenes tampoco. También existe en otras partes del desarrollo web. Podemos cargar perezosos prácticamente cualquier tipo de contenido dependiendo de qué lenguajes, bibliotecas o marcos que estemos usando. Podemos cargar perezosos feeds de noticias, artículos, feeds de redes sociales, y en general cualquier otro tipo de contenido que desee. Existen múltiples formas de hacer esto, incluido el uso de JavaScript. Pero aquí, les voy a mostrar una manera realmente fácil de agregar carga perezosa de forma nativa a través de esta interacción, dirigirse al número ocho, y abrir la página de índice. Después pega esto en una nueva pestaña dentro del navegador. Podemos ver tenemos algunas imágenes de perro cargadas justo aquí y no tenemos ninguna imagen almacenada dentro de esta carpeta del proyecto. En cambio, todos estos enlazan a imágenes externas. Tenemos 10 imágenes diferentes aquí. Como era de esperar, las 10 de estas imágenes se cargan al mismo tiempo, pesar de que muchas de ellas no están a la vista cuando cargamos la página por primera vez, tengo una velocidad de conexión bastante buena, pero muchos usuarios no. Los usuarios también podrían estar en un dispositivo móvil más lento y si hubiera muchas imágenes como esta, realmente puede ralentizar las cosas. Para retrasar la carga de nuestras imágenes que se encuentran fuera de la ventanilla o del área visible, podemos añadirlo a nuestro elemento de imagen, un atributo de carga, y luego configurarlo para que sea perezoso. Actualmente, podemos ver unas tres imágenes dentro de la vista. Por lo que podemos dejar las tres primeras imágenes para cargarlas enseguida. Ahora si bajamos a la imagen número cuatro, podemos agregar los atributos de carga y establecer esto igual a perezoso. Copia esto y podemos pegarlo en todo el resto de nuestras imágenes justo debajo. Asegúrate de que esto esté en la imagen número cuatro a la derecha hasta la 10. Vayamos al navegador y veamos qué pasa. Si actualizamos, aún podemos ver nuestras tres primeras imágenes, pero todas las imágenes aún se están descargando al mismo tiempo. No hay cambio porque hasta que estas imágenes se carguen en el navegador, el navegador no sabrá la altura y el ancho de cada imagen. Entonces si no tiene la altura y el ancho, no puede decir qué imágenes van a estar a la vista y cuáles van a estar por debajo del pliegue. El pliegue es la parte inferior del navegador. Antes tenemos que desplazarnos hacia abajo. Para solucionar esto, podemos agregar algunos CSS simples en la sección de cabeza, colocar en la sección de estilo. Para las imágenes, acabaremos de configurar un ancho estándar para todos estos de 600 píxeles y también la altura de 400 píxeles también. Si lo quisieras, también podrías agregar el ancho y la altura de cada imagen individual también. Pero sólo voy a mantener esto sencillo para este ejemplo. Vamos a probar esto. Hasta la parte superior de la página y refrescar. Ahora sólo vemos seis imágenes cargando dentro las herramientas de desarrollo en lugar de las 10 que originalmente teníamos. Se trata de un ahorro de cuatro imágenes, pero ¿por qué estamos recibiendo seis imágenes descargadas cuando sólo podemos ver unas tres dentro de la ventanilla? Bueno, esto es porque estoy usando Google Chrome y Chrome ha decidido cargar algunas imágenes extra que espero vamos a necesitar bastante pronto. Podemos ver cómo reacciona esto en diferentes navegadores copiando este enlace, voy a abrir Firefox. Pega esto en. Vemos inicialmente el mismo número de imágenes. Abre las herramientas de desarrollador, estamos para hacer clic derecho e inspeccionar elemento. Vemos nuestras primeras tres imágenes justo aquí. Si entramos a la red y actualizamos, Firefox solo elegirá las cuatro primeras imágenes, por lo que no precarga de antemano tantas imágenes como Chrome. Ahora si cerramos Firefox, y volvamos a Chrome. Si empezamos a desplazarnos hacia abajo, y ahora podemos ver a medida que nos desplazamos hacia abajo por la página que se están cargando imágenes extra a medida que nos acercamos a necesitarlas. Como mencioné antes, esto se debe a que Chrome los prerecuperará antes por lo que están listos para el usuario. Cuán temprano depende de la velocidad de conexión y también del tipo de imagen. Eso es lo que hemos visto con Firefox, también varía según el navegador y todas estas cuatro imágenes extra ahora se han guardado desde el tiempo de carga inicial de la página, lo que resulta en una mejor experiencia. Si hay una imagen que desea cargar de inmediato, independientemente de si está por debajo del pliegue de página o no, podemos configurar la carga para que esté ansiosa. Si bajamos a la última imagen y ponemos esto a ansiosos, hasta la parte superior de la página y refrescamos. Vemos que ahora más que las seis imágenes iniciales, ahora obtenemos la séptima imagen cargada aunque no esté a la vista. Como te puedes imaginar, estos atributos perezosos solo pueden ayudar aún más a las cosas ya que tenemos más imágenes en nuestras páginas y sobre todo si el usuario necesita desplazarse hacia abajo para revelar más contenido. Acabamos de ver que este atributo de carga funcionó perfectamente bien en mi versión de Chrome y Firefox. Pero el soporte todavía tiene un poco de ponerse al día en algunos de los navegadores. Hagamos una búsqueda en caniuse.com para los atributos de carga. Este es uno que necesito que veas, que es el atributo de carga perezoso para imágenes e iframes. Entonces es encontrar a Edge. Con Firefox solo tenemos soporte parcial y esto es solo porque solo soporta imágenes en lugar de iframes. Es encontrar Chrome o Safari. Esto no es algo que esté habilitado por defecto, pero podemos habilitar esto dentro de la configuración del navegador. Además, este atributo de carga también se puede usar con el elemento pitcher también y solo necesitamos añadirlo a los elementos de imagen de reserva en lugar de a todas las fuentes para que surta efecto. Entonces si volvemos a nuestra carpeta de proyecto y entramos en alguna de estas páginas de índice, solo necesitamos agregar los atributos de carga a este elemento de imagen en lugar de cada una de estas fuentes. Con todo esto en mente, ahora tenemos un ejemplo justo aquí donde nos desplazamos hacia abajo y las imágenes se cargarán perezosos. Pero, ¿qué pasa si nos desplazamos hacia abajo más rápido de lo que se pueden descargar las imágenes? No es un problema para este pequeño ejemplo donde si tuviéramos miles de imágenes y una velocidad de conexión realmente lenta, podríamos empezar a desplazarnos hacia abajo más rápido de lo que se pueden descargar las imágenes. Para este problema, existen algunos enfoques diferentes que podemos tomar. También podríamos proporcionar algunas imágenes de marca de posición de menor calidad, que se van a descargar más rápido y podemos configurar esto con el elemento de imagen. También podríamos tener una sola imagen genérica de marcador de posición, cual usamos en su lugar hasta que se descargue la imagen. O incluso cosas como un color de fondo sólido usando algo de CSS. Pero también es bibliotecas de JavaScript para ayudar con esto también y también plug-ins si estuvieras usando WordPress o cualquier otro sistema de administración de contenido. uno de los populares se le llama tamaños perezosos y esto nos permite hacer uso de JavaScript para aplicar la carga floja rápida y de rendimiento. También hace uso de los elementos de imagen y del conjunto de fuentes para crear imágenes receptivas. Es SEO amigable y también carga imágenes de manera inteligente cuando sea necesario en función del navegador, la posición de desplazamiento, y también la conexión de red. Por lo que realmente puede manejar mucho del arduo trabajo para nosotros. Además de esto, también nos permite utilizar imágenes de baja calidad o borrosas como marcador de posición. No voy a entrar en la configuración e instalación, pero es bastante sencillo empezar a hacerlo. Desplazamos hacia abajo hasta la sección de procedimientos. Todo lo que necesitamos hacer es descargar el guión y vincularlo dentro de nuestro HTML. O también podríamos instalar esto vía NPM si lo estás usando en un proyecto de nodo. No se necesita configuración, todo lo que necesitamos hacer es configurar nuestras imágenes, como los ejemplos que se ven aquí si se están utilizando opciones responsive o no responsive. También podemos usar esto con un iframe si es necesario también. Espero que esta clase te haya dado algo en lo que pensar y también algunas técnicas útiles que puedes utilizar en tus proyectos futuros o existentes. A continuación, vamos a hablar de un pequeño reto a configurar para que podamos probar todas estas nuevas habilidades. 13. Proyecto de clase: Cuando estábamos aprendiendo, la mejor manera es poner las cosas en práctica. Si ya tienes un proyecto al que puedes aplicar estas técnicas, entonces eso es genial o quizá tengas un proyecto próximo donde puedas probar las cosas. También he proporcionado una plantilla básica de galería de imágenes con este curso. Esto está dentro de la carpeta número 9, y dentro de aquí tenemos esta página de índice y también una sola imagen. Esta es solo una sola imagen para que entres y necesitarás descargar algunas imágenes más para usar para este proyecto. Algo así como unsplash.com es ideal. Esta es solo una página de índice bastante básica. Todo lo que tenemos dentro de la sección de cuerpo es una sola sección y luego múltiples elementos de imagen, y lo configuraremos justo arriba en una sección de estilo se mostrará como una cuadrícula. Si abrimos esto dentro del navegador, podemos ver nuestra cuadrícula justo aquí. Lo que me gustaría que hicieras para este reto es descargar algunas nuevas imágenes para usar para esta galería. Después podrás optimizar y probar todas las técnicas que has aprendido para cargarlas de manera eficiente dentro del navegador. No hay forma correcta o incorrecta de hacer esto. La idea es sólo probar las cosas, optimizar las imágenes, que usan tamaños de archivo y generalmente hacen que la carga de las imágenes sea más eficiente. Podrías hacerlo en lotes, podrías aplicar los cambios, registrar tus resultados y luego repetir hasta que estés contento con los resultados. Buena suerte con este proyecto. No puedo esperar a ver lo que creas. 14. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare, y también sígueme para cualquier actualización, y también para estar informado de cualquier clase nueva a medida que estén disponibles. Entonces gracias una vez más. Buena suerte y ojalá te vuelva a ver en una futura clase.