SEO de imágenes para gráficos de blog de forma práctica: reglas de nombres, texto alternativo que describa la imagen, tamaños ideales y elección entre WebP/AVIF con un flujo de trabajo de marca repetible.
Cuando se habla de SEO de imágenes para gráficos de blog, normalmente se quieren tres cosas: que las imágenes carguen rápido, que reflejen claramente de qué trata la página y que los buscadores (y las apps sociales) las interpreten correctamente.
El fallo más común es simple: las imágenes se tratan como decoración. Alguien sube un archivo enorme llamado algo como "final-final-2.png" y deja el texto alternativo en blanco (o lo rellena con palabras clave). La página carga más lenta, la imagen se ve borrosa en algunas pantallas y la entrada pierde oportunidades de aparecer en la búsqueda de imágenes.
Las malas decisiones también afectan cómo se ve tu publicación donde la gente la descubre. Tus gráficos pueden aparecer como miniatura en resultados de búsqueda, tarjeta de vista previa en apps de mensajería o la imagen principal al inicio del artículo. Si esa imagen es pesada, está mal recortada o es poco clara, menos gente hace clic.
La mayoría de los problemas se solucionan si los detectas a tiempo:
No necesitas perfección. Necesitas un hábito repetible: carga rápida, significado claro y una apariencia coherente que los lectores reconozcan entre publicaciones.
Un buen nombre de archivo es algo pequeño que recompensa durante años. Te ayuda a encontrar activos después, ayuda a compañeros a entender qué es una imagen y añade contexto útil para los buscadores.
Usa palabras reales que coincidan con el tema de la página, no identificadores de cámara (como IMG_4920) ni cadenas aleatorias. Manténlo corto y específico. Si la publicación trata sobre WebP vs AVIF, el nombre del archivo debería reflejar esa idea, no un código de proyecto interno.
Los guiones son el separador más seguro porque se leen como espacios. Mantén minúsculas. Evita caracteres especiales (%, &, ?, comas) y, si puedes, omite acentos. También evita el relleno de palabras clave. Una frase clara vence a una larga cadena de términos.
Incluye un tamaño o variante solo cuando prevenga errores. Las imágenes responsivas suelen generar varios tamaños, así que incrustar dimensiones en el nombre principal generalmente crea desorden. Añade un sufijo cuando realmente tengas variantes distintas que la gente podría confundir, como fondo oscuro vs claro o una tabla actualizada.
Una plantilla simple que puedes reutilizar:
<topic-or-post-slug>-<what-it-shows>-<variant>
Ejemplos que se mantienen limpios:
El texto alternativo es principalmente para personas que usan lectores de pantalla y para los casos en que una imagen no carga. Eso significa que debe describir lo que realmente se ve, no lo que desearías que dijera la imagen. Si lo tratas como un lugar para meter palabras clave, se vuelve ruidoso e inútil.
Una buena regla: escribe una oración clara que responda: "¿Qué es esta imagen?" Si aparece una persona, producto o elemento de marca, nómbralo. Si ocurre algo, di qué ocurre. Evita relleno como "imagen de" o "gráfico que muestra".
Las imágenes decorativas son diferentes. Si una imagen no añade información (un patrón de fondo, un separador, un icono puramente decorativo), usa texto alternativo vacío (alt="") para que los lectores de pantalla puedan omitirla. No lo dejes ausente por accidente; elige el alt vacío a propósito.
Alt text, pies de foto y el texto que rodea la imagen hacen trabajos distintos:
Ejemplos rápidos "malo vs bueno" para gráficos comunes de blog:
Si creas imágenes a escala, una pequeña guía de estilo ayuda: una oración para el alt, palabras sencillas y nombres consistentes para elementos recurrentes (logo, interfaz del producto, gráficos).
La mayoría de los problemas con imágenes vienen de dos extremos: exportar un archivo enorme para todo, o exportar un archivo pequeño y estirarlo hasta que quede suave. La consistencia corrige ambos.
Elige un pequeño conjunto de anchos estándar y apégate a ellos. Eso mantiene el rendimiento predecible y reduce exportaciones únicas. Un conjunto práctico es:
Diferentes ubicaciones necesitan tratamientos distintos. Una imagen hero suele ser ancha y puede manejar más detalle. Una imagen dentro del artículo debe ser legible sin forzar al lector a hacer zoom. Una miniatura debe ser simple y de alto contraste porque a menudo se ve muy pequeña.
Imágenes responsivas solo significa: enviar un archivo más pequeño a una pantalla pequeña y uno más grande a una pantalla grande. Ofreces unos pocos tamaños y el navegador elige el más adecuado automáticamente. Eso mantiene las páginas rápidas sin sacrificar claridad.
Recortar vs redimensionar: redimensiona cuando quieres el mismo encuadre, solo más pequeño o más grande. Recorta cuando la forma cambia (por ejemplo, convertir un hero ancho en una miniatura cuadrada). Si omites el recorte, la miniatura a menudo se vuelve ilegible porque el sujeto se reduce demasiado.
Para evitar el desenfoque en pantallas de alta resolución ("retina"), asegúrate de que tu tamaño más grande servido sea al menos 2x del tamaño mostrado. Ejemplo: si un hero se muestra a 1200px de ancho en escritorio, ten una fuente de 2400px disponible y luego usa compresión para reducir el peso del archivo.
Elegir el formato correcto afecta el tiempo de carga, la claridad y la probabilidad de que la gente se vaya antes de que termine de cargar la página.
WebP es una opción segura por defecto para la mayoría de las imágenes de blog. Mantiene los archivos pequeños y suele verse bien en fotos, capturas de pantalla y gráficos sencillos.
AVIF puede ser incluso más pequeño que WebP con la misma calidad, especialmente para fotos grandes y degradados. La compensación es una codificación más lenta y un mayor riesgo de verse mal cuando se comprime demasiado (tonos de piel y texturas sutiles pueden verse un poco "cerosos"). Muchos equipos reservan AVIF para visuales grandes donde el ahorro de tamaño importa.
JPEG sigue teniendo sentido para fotos cuando necesitas máxima compatibilidad o procesamiento rápido. PNG es una buena elección para gráficos que necesitan transparencia (como un logo sobre un fondo) o cuando los bordes nítidos importan más que el tamaño. SVG es ideal para iconos y formas simples porque se mantiene nítido a cualquier tamaño.
| Caso de uso | Mejor elección | Por qué | Precauciones |
|---|---|---|---|
| Fotos (cabecera del blog, imágenes de estilo de vida) | WebP (o AVIF para cabeceras grandes) | Archivos pequeños, buena calidad | Artefactos por sobrecompresión |
| Capturas de pantalla (UI, paneles) | WebP | Buen equilibrio, maneja bien texto | Si el texto queda borroso, aumenta la calidad |
| Gráficos con transparencia (insignias, superposiciones) | PNG (o WebP si conserva transparencia bien en tu flujo) | Mantiene fondo transparente | PNG puede ser pesado |
| Logos e iconos | SVG | Muy ligero, nítido a cualquier tamaño | Mantener simple; SVG complejos hinchan el archivo |
| Gráficos con líneas finas | SVG (o PNG) | Líneas y etiquetas nítidas | No exportes como JPG de baja resolución |
La compresión hace los archivos más pequeños para que las páginas carguen más rápido. Bien hecha, no debería cambiar lo que la imagen transmite. Los colores siguen creíbles, los bordes limpios y los detalles importantes siguen siendo fáciles de ver.
Una manera práctica de elegir la calidad es empezar un poco más alta de lo que crees necesario, luego bajar hasta que apenas notes un problema y retroceder un paso. El número correcto depende de la imagen, así que confía más en tus ojos que en una regla fija.
Busca artefactos que dañen la confianza y la legibilidad: banding en degradados (como cielos), halos alrededor de sujetos recortados y bordes suaves o manchados. El texto es el lugar más fácil para ver problemas. Si tu imagen contiene texto pequeño, la compresión a menudo lo vuelve borroso.
El texto pequeño dentro de imágenes es arriesgado por otra razón: no escala bien en móviles y no es buscable. Si las palabras importan, ponlas en la página como texto real y usa la imagen solo como visual. Si realmente necesitas texto incrustado (como etiquetas de un gráfico), hazlo más grande y considera un formato que mantenga bordes nítidos.
Una comprobación rápida antes y después que evita pensar demasiado:
Los visuales consistentes hacen que tus publicaciones parezcan venir del mismo lugar, aunque cambien los temas. Además facilitan el SEO de imágenes porque repites los mismos patrones, lo que hace que nombres, tamaños y textos alternativos sean más predecibles.
Empieza con una guía de estilo de una página que cualquiera pueda seguir. Manténla simple: 2 o 3 colores de marca (más neutros), 1 o 2 tipografías y algunas reglas de espaciado. Decide detalles temprano como el radio de las esquinas, la fuerza de la sombra y si usas contornos o formas rellenas. Esas pequeñas elecciones son las que hacen que las imágenes se sientan "coincidentes".
Crea un puñado de plantillas reutilizables para no reinventar la rueda cada vez. La mayoría de los blogs aprovechan mucho:
Define reglas para iconos e ilustraciones. Elige un estilo y apégate a él. Si mezclas estilos, hazlo intencionalmente (por ejemplo: solo iconos lineales y fotos solo cuando sean capturas reales).
Mantén una pequeña biblioteca de elementos aprobados: fondos, degradados, formas, insignias y un conjunto de iconos. Guárdalos con nombres claros para que la gente no coja activos aleatorios que parezcan “suficientemente parecidos”.
Para campañas estacionales, cambia solo una capa, no todo el sistema. Cambia un color de acento, añade una pequeña insignia estacional o usa un conjunto limitado de fondos. Cuando la campaña termine, quitas la capa estacional y tu aspecto de marca principal sigue intacto.
La consistencia es lo que hace que esto funcione. Si haces los mismos pasos pequeños cada vez, evitas nombres desordenados, alt text vagos y tamaños aleatorios que ralentizan las páginas.
Antes de diseñar nada, decide qué pretende hacer cada imagen: un hero que explique el tema rápido, algunas imágenes de apoyo que aclaren secciones y una versión para compartir en redes (a menudo un recorte más ajustado).
Redacta las palabras temprano. Escribe nombres de archivo y alt text mientras la idea está fresca, no después de exportar. Ejemplo: si la publicación trata sobre WebP vs AVIF, planifica webp-vs-avif-size-chart.webp con alt text como "Gráfico que compara los tamaños de archivo de WebP y AVIF para la misma foto."
Luego exporta en un pequeño conjunto de tamaños para que tu sitio pueda elegir el mejor para la pantalla:
Después de la compresión, haz una "verificación humana" de 30 segundos: ¿puedes leer algún texto?, ¿los rostros se ven naturales?, ¿los fondos están limpios?, ¿coincide con tu marca (colores, tipografías, espaciado)?
Finalmente, revisa en la página antes de publicar. Confirma que los nombres de archivo coinciden con la publicación, el alt describe la imagen (sin relleno de palabras clave), las dimensiones son correctas y el conjunto parece pertenecer junto.
Una publicación semanal titulada "WebP vs AVIF: qué usar para gráficos de blog" a menudo necesita cinco visuales: un hero, tres imágenes dentro del artículo y una vista previa social. Tratar esto como un pequeño sistema hace el trabajo más rápido y la serie más reconocible.
Empieza eligiendo un slug y úsalo en todas partes: webp-vs-avif-blog-graphics. Luego nombra cada archivo por lo que es y dónde aparece:
webp-vs-avif-blog-graphics-hero.webp | Alt: "Comparación lado a lado de la misma imagen de blog guardada como WebP y AVIF" | 1600x900 | WebP (AVIF si está soportado)webp-vs-avif-blog-graphics-format-table.avif | Alt: "Tabla comparando tamaño de archivo y calidad de WebP y AVIF a la misma resolución" | 1200x675 | AVIFwebp-vs-avif-blog-graphics-responsive-sizes.webp | Alt: "Ejemplo de una imagen servida en múltiples tamaños responsivos para escritorio y móvil" | 1200x675 | WebPwebp-vs-avif-blog-graphics-export-settings.png | Alt: "Pantalla de configuración de exportación mostrando opciones de calidad y metadatos para imágenes web" | 1200x675 | PNG (solo si el texto debe quedar perfectamente nítido)webp-vs-avif-blog-graphics-social-1200x630.jpg | Alt: "Tarjeta de vista previa social con el título del post y una pequeña etiqueta WebP vs AVIF" | 1200x630 | JPEGEl branding permanece consistente cuando cada imagen viene del mismo conjunto de plantillas: par de tipografías fijo, dos colores de marca y un área segura para que el texto no se recorte en vistas sociales.
La forma más rápida de perder valor de SEO en imágenes es tratarlas como un pensamiento posterior. Unos cuantos hábitos pequeños mantienen las páginas más ligeras, claras y consistentes.
El relleno de palabras clave es el principal problema. Nombres como best-image-seo-for-blog-graphics-best-seo.png y alt text que parece una lista de frases se ven spammy y no ayudan a nadie. Nombra el archivo por lo que es y escribe el alt como se lo explicarías a un amigo que no puede verlo.
Otro problema común es subir imágenes enormes y dejar que la página las reduzca. Una imagen de 4000px mostrada a 800px sigue obligando a descargar el archivo grande. Exporta a los tamaños que realmente necesitas y usa imágenes responsivas para que los móviles no descarguen activos de escritorio.
Los gráficos con mucho texto también fallan. Una tarjeta de cita con texto pequeño puede verse bien en un portátil pero volverse ilegible en móvil. Mantén el texto corto y grande, o traslada el detalle a un pie de foto. Si la imagen debe incluir texto, prévisualízala a ancho de móvil antes de publicar.
La deriva de estilo es sutil pero perjudica el branding. Colores aleatorios, tipografías mezcladas y márgenes inconsistentes hacen que un blog parezca remendado. Elige un pequeño conjunto de reglas (2 tipografías, paleta limitada, padding estándar, radio de esquina consistente) y reutiliza plantillas.
Por último, prueba las vistas previas y modo oscuro. Algunas imágenes se lavan sobre fondos oscuros y las vistas sociales pueden recortar detalles clave. Revisa en tema oscuro y confirma que el punto focal aún funciona cuando se recorta a una vista amplia.
Usa esto como un pase final de 2 minutos antes de publicar:
Después de eso, revisa en móvil y escritorio. En móvil busca texto recortado, etiquetas pequeñas e imágenes que empujen demasiado abajo el primer párrafo. En escritorio busca imágenes más grandes de lo necesario o que se vean suaves porque se están estirando.
Si quieres que esto se mantenga consistente a medida que publicas más, trátalo como un pequeño sistema. El objetivo es simple: cada imagen sale con lo básico bien hecho, sin pensar de más.
Empieza con un estándar interno corto que cualquiera pueda seguir en un día ajetreado. Incluye tu patrón de nombres, reglas de alt text, tamaños por defecto (hero, inline, social), formatos preferidos y una comprobación rápida pre-publicación para ortografía, contraste y recorte.
Luego elige tres plantillas reutilizables y comprométete con ellas durante un mes. Una tarjeta de título sencilla, un visual estilo gráfico y un diseño de foto con etiqueta son suficientes para muchos blogs. Las plantillas consistentes hacen que tu marca se sienta familiar y también aceleran la redacción de alt text y el nombrado porque la estructura se repite.
Para escalar, trabaja por lotes: planifica las imágenes para toda la publicación, exporta el conjunto completo de tamaños, comprímelos y haz QA en grupo. Mide también los resultados, como clics desde publicaciones con miniaturas fuertes y qué visuales se reutilizan o comparten.
Si quieres una forma todo en uno para generar y mantener este tipo de consistencia, GENERATED (generated.app) soporta generación de contenido además de generación, redimensionado, pulido y seguimiento de rendimiento de imágenes de blog, lo que puede ayudarte a mantener el flujo de trabajo repetible a medida que aumente tu volumen de publicaciones.
Tratar cada imagen como decoración en lugar de contenido. Usa un nombre de archivo claro, texto alternativo preciso, las dimensiones adecuadas para donde aparece y un formato moderno con compresión sensata para que cargue rápido y se vea nítida.
Usa una frase corta y descriptiva que coincida con la publicación y lo que muestra la imagen, como webp-vs-avif-format-comparison-chart.webp. Mantén minúsculas, usa guiones, evita caracteres especiales y no rellenes con palabras clave.
Escribe una frase clara que describa lo visible e importante de la imagen, como si se lo explicaras a alguien que no puede verla. No añadas relleno como “imagen de” ni lo conviertas en una lista de palabras clave.
Usa texto alternativo vacío (alt="") cuando la imagen no aporte información, como un patrón de fondo, un separador o una forma puramente decorativa. El alt vacío es mejor que no tener alt porque le indica al lector de pantalla que debe omitirse a propósito.
El alt es para accesibilidad y para cuando la imagen no se puede ver. Las leyendas son para todos y sirven cuando necesitas añadir contexto, explicar una conclusión o aclarar lo que el lector debe notar.
Elige un pequeño conjunto de anchos estándar y reutilízalos para que el rendimiento sea predecible. Un conjunto práctico es 480px, 768px, 1200px y 1600px; deja que tu sitio sirva el tamaño adecuado según la pantalla.
Redimensiona cuando quieras el mismo encuadre en distinto tamaño. Recorta cuando cambia la forma, por ejemplo al convertir un hero ancho en una miniatura cuadrada; reducir sin recortar suele hacer que el sujeto sea ilegible.
WebP es una buena opción por defecto para la mayoría de las imágenes de blog. AVIF puede ser más pequeño para fotos grandes y degradados, pero puede verse “ceroso” si se comprime demasiado; PNG es mejor para transparencia o bordes muy nítidos; SVG es ideal para iconos y gráficos simples.
Comprime hasta que apenas notes problemas de calidad y luego retrocede un paso. Revisa al 100% de zoom buscando bandas en degradados, halos en los bordes o texto borroso, y también haz una vista previa en móvil para confirmar que el mensaje sigue legible.
Crea una pequeña guía de estilo y unas plantillas (hero, tarjeta de cita, gráfico de pasos, gráfico simple) para que los visuales repitan fuentes, colores, espaciados y estilo de iconos. Luego sigue una rutina consistente: asignar roles, nombrar archivos, escribir alt text temprano, exportar tamaños estándar, comprimir y revisar en la página y en las vistas sociales.