1Elige una imagen que aporte información

Utiliza fotografías propias, capturas, gráficos, diagramas o recursos con licencia. Pregunta qué explica la imagen y si el contenido sigue siendo comprensible cuando no carga. Las imágenes decorativas no necesitan un texto alternativo descriptivo; las informativas sí.

Evita bancos genéricos cuando la confianza depende de mostrar equipo, producto o trabajo real.

2Recorta a la proporción final

Decide si se usará como hero, miniatura, tarjeta o imagen de contenido. Recorta antes de subir para no almacenar grandes áreas invisibles. Mantén un sistema de proporciones para que el blog y las rejillas no salten.

No deformes la imagen forzando ancho y alto incompatibles.

3Ajusta dimensiones

Una imagen de contenido rara vez necesita el ancho completo de una cámara. Exporta cerca del tamaño máximo al que se mostrará, considerando pantallas densas sin multiplicar en exceso. WordPress genera varios tamaños y utiliza srcset, pero el archivo original sigue ocupando espacio y puede utilizarse accidentalmente.

4Elige formato

JPEG funciona para fotografía; PNG para transparencia o gráficos que lo necesiten; SVG para vectores confiables y controlados; WebP y AVIF pueden reducir peso con buena calidad y compatibilidad moderna. Comprueba que tu versión de WordPress, servidor y flujo aceptan el formato.

No conviertas automáticamente cada archivo si introduce artefactos o transparencia defectuosa.

5Comprime con calidad visual

Compara la imagen al tamaño real. Busca reducir peso sin crear bloques, halos o texto borroso. Una herramienta de optimización puede automatizar, pero configura límites y conserva copia de originales cuando sea necesario.

El objetivo no es una cifra idéntica para todas las imágenes; depende de dimensiones, detalle y función.

6Nombra el archivo

Usa un nombre breve y descriptivo antes de subir, como diseno-web-responsive-sevilla.webp. Evita IMG_8432-final-final.jpg, caracteres extraños y cadenas de keywords. El nombre ayuda a organizar y aporta contexto limitado, pero no reemplaza el alt ni el contenido.

7Sube desde la biblioteca de medios

WordPress permite subir desde Medios o directamente al editar una página o entrada. Ambas rutas guardan el archivo en la biblioteca. Completa título interno si ayuda a gestionar, pero no confundas título con atributo alt.

Comprueba que no subes duplicados cada vez que reutilizas una imagen.

8Escribe el texto alternativo

Describe la información o función de la imagen en su contexto. Si es un gráfico, explica la conclusión importante también en el texto. Si la imagen es un enlace, el alt debe comunicar la acción. Si es puramente decorativa, utiliza alt vacío para que el lector de pantalla la ignore.

No empieces siempre por "imagen de" ni fuerces la keyword. Un alt posible sería: "Comparación de una página de servicios en escritorio y móvil".

9Decide pie de foto y descripción

El pie es visible y sirve para contexto, autoría o fuente. La descripción de adjunto rara vez es necesaria en una web corporativa y algunas plantillas crean páginas de adjunto indexables. Revisa cómo las gestiona tu SEO.

10Inserta en el editor de bloques

Añade el bloque Imagen, selecciona biblioteca o sube, elige tamaño y alineación y revisa enlace. Evita enlazar automáticamente al archivo si no aporta. Configura anchura dentro del diseño y comprueba móvil.

Para galerías, mantén proporciones y no cargues decenas de originales en una sola vista.

11Inserta en Elementor

Utiliza el widget Imagen para contenido y el fondo solo cuando sea realmente decorativo. Selecciona un tamaño generado adecuado, configura alt en la biblioteca y evita utilizar la misma fotografía enorme como fondo en todos los dispositivos.

En fondos, Elementor puede no generar el mismo comportamiento responsive que una etiqueta img. Define posición, tamaño y versión móvil. No ocultes una imagen pesada solo con CSS esperando que no se descargue.

12Configura carga diferida con cuidado

WordPress añade carga diferida a muchas imágenes. No conviene retrasar la imagen principal visible al cargar porque puede empeorar LCP. Las imágenes por debajo del primer pantallazo sí suelen beneficiarse.

Los plugins de caché pueden modificar esta lógica. Prueba la página y no actives varias optimizaciones que compitan.

13Errores frecuentes

• Subir originales de varios megabytes.
• Utilizar el tamaño completo dentro de una tarjeta.
• Repetir la keyword en todos los alt.
• Dejar alt vacío en imágenes informativas.
• Usar texto incrustado que no se lee en móvil.
• Enlazar cada imagen al archivo original.
• Reutilizar una imagen sin revisar el contexto.
• Cargar el hero de forma diferida.
• Añadir plugins de compresión sin copia ni prueba.

14Checklist antes de publicar

• Licencia o propiedad confirmada.
• Proporción y dimensiones correctas.
• Formato y compresión adecuados.
• Nombre descriptivo.
• Alt según función.
• Pie y fuente cuando proceda.
• Tamaño de WordPress correcto.
• Móvil y pantallas densas revisados.
• Sin saltos de layout ni enlaces innecesarios.
• Rendimiento medido.

Conclusión

Una imagen bien insertada explica, refuerza confianza y se adapta sin castigar velocidad. Prepara el archivo antes de subir, utiliza el tamaño correcto, escribe un alt contextual y prueba móvil. Esta disciplina sencilla evita una gran parte de los problemas de rendimiento y accesibilidad en WordPress.