- 1
Este curso tiene una versión actualizada.
00:05 - 2

HTML y CSS: Fundamentos para Desarrolladores Web
02:46 - 3

Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales
05:02 - 4

Fundamentos del Desarrollo Backend
03:55 - 5

Comprende el Rol y las Habilidades de un Desarrollador Full Stack
03:04 - 6

Diferencias entre Páginas Web Estáticas y Dinámicas
08:18
Optimización de Imágenes para Web
Clase 13 de 56 • Curso Definitivo de HTML y CSS
Contenido del curso
- 17

Creación de Formularios Web Efectivos con HTML
11:54 - 18

Creación de Formularios HTML con Campos de Fecha y Hora
10:18 - 19

Autocompletado y Requerimiento en Formularios HTML
10:49 - 20

Creación de Menús Desplegables con Select y Data List en HTML
08:11 - 21

Diferencias entre botones submit e input en formularios HTML
04:50
- 22

Introducción a CSS: Estilos y Aplicaciones Básicas
02:05 - 23

Implementación Básica de CSS en HTML
10:50 - 24

Pseudo Clases y Pseudo Elementos en CSS
17:31 - 25

Anatomía de una Regla CSS: Selectores y Declaraciones
02:16 - 26

Modelo de Caja en CSS: Margen, Relleno y Bordes
15:49 - 27

Herencia en CSS: Cómo Funciona y Afecta a los Estilos
06:00 - 28

Especificidad y Orden de Declaración en CSS
08:17 - 29

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente
15:28 - 30

Buenas prácticas en CSS: Especificidad y uso adecuado de selectores
08:12 - 31

Combinadores CSS: Hermanos Adyacentes y Especificidad
05:06 - 32

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos
02:52 - 33

Combinadores CSS: Hijos y Descendientes
06:18 - 34

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes
07:48 - 35

Comprensión del uso de em en CSS: medidas relativas de fuente
08:29 - 36

Uso de REM en CSS para Fuentes y Dimensiones
08:25 - 37

"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"
08:26 - 38

Posicionamiento en CSS: Static, Absolute y Relative
10:26 - 39

CSS: Display Block, Inline e Inline-Block
12:52 - 40

Posicionamiento de Layout Básico en CSS
01:48 - 41

Posicionamiento y Estilos con Display Flex en CSS
15:15 - 42

Posicionamiento Vertical con Flexbox en CSS
12:42 - 43

Uso de Variables Custom en CSS para Optimizar Estilos
12:34 - 44

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas
11:43
- 45

Responsive Design: Estrategias Mobile First
06:31 - 46

Patrones de Diseño Responsive: Mobile First a Desktop
07:20 - 47

Media Queries para Diseño Responsive Mobile y Tablet
12:10 - 48

Patrón Layout Shifter en Diseño Mobile First
08:51 - 49

Patrón de Diseño Responsive: Column Drop en CSS
07:47 - 50

Diseño Responsive: Estrategias y Ejemplos Prácticos
11:52 - 51

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas
12:00
¿Por qué es importante optimizar imágenes para la web?
Optimizar imágenes es crucial para cualquier proyecto web que se precie. Imagina que una imagen de tu sitio pesa tanto que ralentiza la carga de la página, provocando una mala experiencia al usuario. Esto es lo que ocurre cuando se usan imágenes pesadas sin procesar. Además, las imágenes pesadas ocupan más espacio de almacenamiento y pueden afectar negativamente tu posicionamiento en motores de búsqueda. Entonces, ¿cómo podemos optimizar las imágenes sin sacrificar calidad? ¡Aquí te lo explicamos!
¿Cuál es el tamaño óptimo para una imagen web?
El tamaño recomendado para una imagen en un sitio web no debería superar los 70 kilobytes (KB). Sin embargo, muchas veces encontramos imágenes que pesan varios megabytes (MB), lo cual es excesivo. Un peso tan elevado no solo afecta el tiempo de carga sino también el rendimiento general de tu página web.
- Peso óptimo: Alrededor de 70 KB
- Límite máximo: Nunca más de 1 MB
¿Cómo optimizar imágenes eficientemente?
Existen varias herramientas y métodos para optimizar imágenes de manera eficaz. A continuación, te describimos dos opciones que te serán de utilidad para comprimir y optimizar imágenes sin perder demasiada calidad:
1. TinyPNG
TinyPNG es una solución web eficiente que permite comprimir imágenes de formatos PNG y JPG. Aunque su nombre lo asocia principalmente al formato PNG, es especialmente eficaz para fotos en formato JPG, ya que reduce significativamente el tamaño sin comprometer la calidad visual.
1. Ve a [TinyPNG](https://tinypng.com).
2. Sube la imagen que deseas optimizar.
3. Descarga la versión comprimida que el sitio genera.
TinyPNG se encarga automáticamente de reducir el tamaño del archivo, proporcionándote un archivo comprimido adecuado para usar en tu proyecto.
2. Verifix
Verifix se especializa en eliminar metadatos de las fotografías. Cuando tomas fotos con una cámara o un teléfono, estas a menudo almacenan metadatos como la hora en que se tomó, la ubicación, entre otros. Aunque útiles en ciertos contextos, estos datos pueden añadir peso innecesario a tus archivos.
Pasos para usar Verifix:
- Sube la imagen: Especialmente útil para imágenes tomadas con cámaras digitales o móviles.
- Limpia los metadatos: Quita información como la geolocalización y la fecha.
- Descarga la imagen: Ahora está más liviana y lista para web.
La eliminación de metadatos innecesarios va a ayudar a recortar esas valiosas decenas de KB, haciendo tu sitio web más ligero y rápido.
¿Cómo afecta el peso de las imágenes al rendimiento web?
Imágenes pesadas son la razón por la que algunas páginas tardan en cargar, lo cual puede ser frustrante para los usuarios. Además del tiempo de carga, las imágenes de mayor tamaño pueden afectar:
- Aranado en buscadores: Las velocidades de carga más lentas pueden afectar tu SEO negativamente.
- Excesivo uso de datos: Esto es problemático particularmente para usuarios móviles.
- Menor retención de usuarios: Los visitantes tienden a abandonar páginas lentas rápidamente.
Consejos finales para la optimización de imágenes
- Revisa antes de subir: Siempre verifica el tamaño de tus imágenes antes de añadirlas a tu web.
- Usa herramientas online: Utiliza compresores de imágenes como TinyPNG o elimina metadatos con Verifix.
- Define medidas específicas: Asegúrate de que la resolución se ajuste a tus necesidades, ni más ni menos, para no cargar archivos innecesariamente grandes.
Al prestar atención al peso de tus imágenes y optimizarlas adecuadamente, no solo mejorarás la experiencia del usuario, sino que también potenciarás el rendimiento general de tu sitio web. ¡Sigue aprendiendo y aplicando estos conocimientos para un proyecto web más eficiente y rápido!