Embedded Files
Tanto si generas imágenes con IA como si las obtienes de bancos de imágenes, necesitas saber editarlas, optimizarlas y usarlas correctamente en tus materiales educativos digitales.
💡 Una imagen de 5MB puede hacer que tu página en Moodle tarde 30 segundos en cargar. Saber optimizar imágenes no es opcional, es esencial para una buena experiencia de usuario.
📐 Formatos de imagen: ¿cuál usar y cuándo?
📐 Formatos de imagen: ¿cuál usar y cuándo?
No todos los formatos son iguales. Cada uno tiene ventajas y desventajas según el uso.
JPG / JPEG
Fotografías, imágenes con muchos colores
• Excelente compresión
• Tamaño de archivo pequeño
• Compatible con todo
• Pierde calidad al comprimir (lossy)
• No soporta transparencia
• No ideal para texto o gráficos nítidos
PNG
Logos, iconos, gráficos con texto, imágenes que necesitan transparencia
• Sin pérdida de calidad (lossless)
• Soporta transparencia
• Excelente para gráficos nítidos
• Archivos más pesados que JPG
• No ideal para fotografías (tamaño excesivo)
SVG
Iconos, logos, gráficos vectoriales, infografías simples
• Escalable sin pérdida de calidad
• Tamaño de archivo mínimo
• Editable con código
• Solo para gráficos vectoriales
• No sirve para fotografías
• Puede ser complejo de editar
GIF
Animaciones simples, memes
• Soporta animación
• Compatible con todo
• Limitado a 256 colores
• Tamaño grande para animaciones
• Calidad baja para imágenes estáticas
Decisión rápida
Decisión rápida
📷 Fotografías: En general, usa siempre JPG (o WebP si tu plataforma lo soporta)
🎨 Ilustraciones: PNG
✨ Con fondo transparente: PNG
📊 Logos e iconos: SVG (si es posible) o PNG
🎬 Animaciones: GIF (o mejor, vídeo corto)
⚖️ Resolución y tamaño: conceptos clave
⚖️ Resolución y tamaño: conceptos clave
Resolución (PPI/DPI)
Resolución (PPI/DPI)
PPI (Pixels Per Inch) o DPI (Dots Per Inch) indica cuántos píxeles hay por pulgada.
Lo vas a encontrar normalmente en la opción de tamaño de imagen.
Resolución recomendada
Pantallas / Web / Proyectores
72-96 PPI (suficiente)
Impresión de calidad
300 PPI (mínimo)
Impresión profesional
300-600 PPI
⚠️ Un error común: Subir a Moodle imágenes a 300 PPI cuando con 72-96 PPI es más que suficiente. Resultado: archivos enormes que ralentizan todo sin beneficio visual.
Dimensiones (ancho x alto en píxeles)
Dimensiones (ancho x alto en píxeles)
Guía práctica para materiales educativos en web:
Ancho completo de página: 1200-1920px de ancho máximo
Imágenes destacadas: 800-1200px de ancho
Imágenes en columna: 600-800px de ancho
Iconos pequeños: 64-128px
Miniaturas: 200-300px
💡 Recuerda: Redimensiona las imágenes al tamaño que realmente se van a mostrar. No subas una imagen de 4000px si solo se verá a 800px. Sin embargo, no la reduzcas demasiado: puede que se vea bien en móviles, pero resulte pixelada en una pantalla de ordenador.
🗜️ Optimización y compresión
🗜️ Optimización y compresión
Optimizar imágenes significa reducir el tamaño del archivo manteniendo la calidad visual aceptable.
Si decides correctamente el formato, no tendrás problemas, pero si te hace falta, aquí tienes una pequeña lista de herramientas de compresión.
TinyPNG / TinyJPG
Web (gratis)
Comprimir PNG y JPG rápidamente, resultados excelentes
Squoosh (Google)
Web (gratis)
Comparar diferentes formatos y niveles de compresión visualmente
Compressor.io
Web (gratis)
Comprimir hasta 90% sin pérdida visible de calidad
Canva (exportar optimizado)
Web/App
Optimización automática al exportar desde Canva
El proceso de optimización que recomendamos es el siguiente:
Redimensiona al tamaño que necesitas (ancho x alto en píxeles)
Elige el formato correcto (JPG para fotos, PNG para gráficos)
Comprime usando una herramienta (TinyPNG, Squoosh...)
Verifica que la calidad visual siga siendo aceptable
Renombra con un nombre descriptivo (ej: "familia-comiendo-paella.jpg" en lugar de "IMG_1234.jpg")
🎯 Objetivo: Obtener imágenes por debajo de 200-300 KB para web. Si supera los 500 KB, probablemente la puedas optimizar más.
✂️ Edición básica de imágenes
✂️ Edición básica de imágenes
No necesitas ser diseñador gráfico, pero sí debes dominar operaciones básicas:
Operaciones esenciales
Operaciones esenciales
Recortar (crop): Eliminar partes innecesarias, cambiar el encuadre
Redimensionar (resize): Cambiar el tamaño (ancho x alto)
Rotar: Girar la imagen 90°, 180°, o ángulos personalizados
Ajustar brillo/contraste: Mejorar imágenes oscuras o apagadas
Recortar fondo: Eliminar el fondo para dejar solo el sujeto
Añadir texto: Etiquetar, crear carteles educativos
Herramientas de edición (2025)
Herramientas de edición (2025)
Principiante
Web/Móvil/App
Edición rápida integrada con diseño, muy intuitivo
Principiante
Web
Eliminar fondos automáticamente con IA
Principiante-Intermedio
Web
Editor completo en navegador, interfaz moderna
Intermedio
Windows (gratis)
Más potente que Paint, más sencillo que GIMP
Principiante
Web/Móvil
Edición rápida con plantillas, parte de Adobe
Naturalmente, puedes utilizar editores como Photoshop o Gimp (potente, de código abierto y gratuito), pero esto requeriría otro cursos solo para tratarlos.
🎓 Recomendación para el curso:
Para empezar: Canva (ya lo conoces y cubre el 80% de necesidades)
Para edición seria gratuita: Photopea (sorprendentemente potente)
Para quitar fondos rápido: Remove.bg (mágico)
🖼️ Bancos de imágenes libres
🖼️ Bancos de imágenes libres
Aunque la IA generativa es útil, los bancos de imágenes tradicionales siguen siendo esenciales para fotografías reales de calidad.
Bancos gratuitos recomendados
Bancos gratuitos recomendados
Unsplash
Fotografías artísticas de alta calidad
Gratis para uso comercial, atribución apreciada
Pexels
Fotos y vídeos de gran calidad
Gratis, sin atribución requerida
Pixabay
Fotos, ilustraciones, vectores
Gratis, sin atribución requerida
Freepik
Vectores, plantillas, recursos gráficos
Freemium, atribución en versión gratuita
StockSnap
Fotos de alta resolución
CC0 (dominio público)
Burst (Shopify)
Fotos comerciales y de negocios
Gratis para uso comercial
Wikimedia Commons
Contenido histórico, cultural, educativo
Variada (revisar cada imagen)
Consejos para buscar eficientemente
Consejos para buscar eficientemente
Usa palabras clave en inglés: Tendrás más resultados en la mayoría de bancos
Busca conceptos, no literales: "team collaboration" en lugar de "gente trabajando junta"
Usa filtros: Orientación (horizontal/vertical), color dominante, tamaño
Revisa colecciones curadas: Muchos bancos tienen colecciones temáticas
Descarga la resolución que necesitas: No siempre necesitas la máxima resolución
⚖️ Derechos de autor y uso legal
⚖️ Derechos de autor y uso legal
Usar imágenes sin permiso puede tener consecuencias legales para ti y tu institución.
Tipos de licencias Creative Commons
Tipos de licencias Creative Commons
CC0
Usar libremente, modificar, uso comercial
Nada (dominio público)
CC BY
Usar, modificar, uso comercial
Atribuir al autor
CC BY-SA
Usar, modificar, uso comercial
Atribuir y compartir con la misma licencia
CC BY-NC
Usar y modificar (solo uso educativo/personal)
Atribuir, NO uso comercial
CC BY-ND
Usar sin modificar
Atribuir, NO modificar
⚠️ ¡Atención: errores comunes!
❌ "Si está en Google Imágenes puedo usarla" → FALSO
❌ "Es para educación, no hace falta permiso" → FALSO
❌ "No voy a ganar dinero, no pasa nada" → FALSO
✅ Usa solo imágenes con licencia clara o genera con IA
Cómo atribuir correctamente
Cómo atribuir correctamente
Si usas una imagen CC BY (que requiere atribución), incluye:
Título de la obra (si tiene)
Autor/a
Licencia (CC BY, CC BY-SA, etc.)
Enlace a la licencia
Ejemplo: "Estudiantes en biblioteca" por John Doe, bajo licencia CC BY 4.0
♿ Accesibilidad: texto alternativo
♿ Accesibilidad: texto alternativo
Las imágenes deben ser accesibles para todos los estudiantes, incluidos aquellos con discapacidad visual que usan lectores de pantalla.
¿Qué es el texto alternativo (alt text)?
¿Qué es el texto alternativo (alt text)?
Es una descripción textual de la imagen que:
Los lectores de pantalla leen en voz alta
Se muestra si la imagen no carga
Ayuda a los motores de búsqueda a entender el contenido
Cómo escribir buen texto alternativo
Cómo escribir buen texto alternativo
❌ Mal texto alternativo
✅ Buen texto alternativo
"imagen"
"Familia hispana cenando paella en jardín"
"foto123.jpg"
"Mapa de España con regiones autónomas destacadas"
"click aquí"
"Icono de descarga PDF - Guía de verbos irregulares"
"gráfico"
"Gráfico de barras: evolución del aprendizaje de español 2020-2025, muestra crecimiento del 35%"
Principios:
Sé descriptivo pero conciso (una frase, no un párrafo)
Describe el contenido y función de la imagen
No empieces con "imagen de..." (ya se sabe que es una imagen)
Si la imagen tiene texto importante, inclúyelo en el alt text
Las imágenes puramente decorativas pueden tener alt="" (vacío)
✏️ Ejercicio práctico integrador
✏️ Ejercicio práctico integrador
Si quieres aplicar todo lo aprendido en un flujo de trabajo real, te recomendamos lo siguiente:
Busca o genera 3 imágenes para un tema de tu curso:
1 fotografía de banco de imágenes
1 imagen generada con IA
1 ilustración o gráfico vectorial
Para cada imagen:
Edítala si es necesario (recortar, ajustar)
Redimensiona al tamaño apropiado (800px de ancho máximo)
Guárdala en el formato correcto (JPG/PNG)
Comprímela (objetivo: menos de 300 KB)
💡 Recuerda: Una imagen bien optimizada no solo carga rápido - también mejora la experiencia de aprendizaje de tus estudiantes, especialmente aquellos con conexiones lentas o dispositivos más antiguos. La accesibilidad no es un extra, es una responsabilidad.
Page updated
Google Sites
Report abuse