No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Características de las imágenes en el contexto de desarrollo web

12/23
Recursos

Aportes 9

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Esta clase estuvo increíble. Es algo tan relativamente simple que muchos siempre pasamos por alto y nunca entendemos el porque no se ven bien nuestras imágenes. Me atrevo a decir que algunos frontend devs tampoco saben de esto.

A esta clase le agregaría unos minutos de más para explicar brevemente el comportamiento de una imagen dentro de un contenedor al usar en css object-fit.

Que clase tan interesante 🤯
Había visto esa opción en Figma para exportar imágenes de 2x o 4x por mencionar algo pero hasta ahora comprendo el contexto que hay detrás de realizar esa exportación. A decir verdad, nunca he exportado varias imágenes con diferentes tipos de exportación y al crear la página uso la misma y hago que se adapte al tamaño que tiene. Será muy interesante entender como optimizar este proceso.

tambien es importante recalcar que cada equipo de desarrollo tiene requerimientos especificos frente a los formatos, es una buena practica invitarlos a una sesion y desde el perfil de viewer de Figma mostrarles como pueden del diseño tomar dichos recursos

Características de las imágenes en el contexto de desarrollo web


Objetivos

  • Un viaje por los tipos de imágenes y sus
    formatos.
  • La importancia del peso de las imágenes.
  • Calidad y compresión.

Formatos

Bitmap

Abreviación Descripción Formato
WebP WebP ofrece una compresión mucho mejor que PNG o JPEG. .webp
PNG Se prefiere PNG a JPEG para una reproducción más precisa y el uso de transparencia. .png
JPEG El formato más popular para imágenes. Es una buena opción para la compresión con pérdidas de imágenes. .jpeg
.jpg

Vector

Abreviación Descripción Formato
SVG Formato para imágenes vectoriales. Ideal para elementos de la interfaz de usuario e íconos. .webp

El peso de las imágenes en la web

¿Por qué es relevante?

  • Para cuidar la experiencia de nuestros usuarios.
  • Evitar tiempo de espera innecesario.
  • Mejorar la performance de nuestra web.

¿Cómo controlar el peso?

  • Dimensiones
  • Calidad
  • Compresión

Muy buena manera de explicar la lógica detrás de los navegadores al elegir cuál tamaño de imagen mostrarán dependiendo el tamaño de pantalla de cada dispositivo, su densidad de pixeles y si tiene retina o no.

![]()![]()![](https://static.platzi.com/media/user_upload/tipos%20de%20imagenes-e3bf4b8d-cdec-4f98-a883-a3f1714ccba9.jpg)

Gran clase, muchas cosas que tomar en cuenta cuando utilizamos imágenes e iconos en nuestros proyectos.

Exportación de imágenes

Exportación de imágenes