Atributos ALT-TITLE

Cómo colocar correctamente el atributo ALT:

Para cumplir con las disposiciones de accesibilidad web, cada imagen debe llevar un atributo "alt" con una descripción breve, clara y única que explique lo que representa. En el caso de fotografías de arte, escultura o pintura, lo correcto es describir la obra, su contexto y evitar redundancias como “imagen de…”.

1. Principios básicos

Obligatorio en todas las imágenes relevantes: El atributo "alt" es requerido en HTML para accesibilidad y SEO.
Breve y claro: Máximo recomendado de 125 caracteres.
Descriptivo y único: Explica qué se ve y cuál es su función en la página.
No redundante: Evita frases como “imagen de” o repetir texto ya presente en la página.
Idioma correcto: Usa puntuación y ortografía adecuadas.

2. Diferencias entre elementos

ALT (alt): Texto invisible para usuarios videntes, leído por buscadores y lectores de pantalla.
Título (title): Aparece como "tooltip" al pasar el cursor. Información adicional, no descriptiva.
Leyenda (figcaption): Texto visible bajo la imagen, complementa, pero no sustituye el "alt".

Ejemplos para imágenes de arte:

Tipo de obra	Ejemplo de ALT correcto	Ejemplo incorrecto
Fotografía artística	alt="Fotografía en blanco y negro de una paloma sobre un cielo luminoso"	alt="foto"
Escultura	alt="Escultura de bronce de un torso humano en exposición"	alt="imagen de escultura"
Pintura	alt="Óleo abstracto con tonos coral y azul petróleo"	alt="cuadro bonito"
Instalación	alt="Instalación contemporánea con espejos y luces LED"	alt="arte moderno"

Buenas prácticas específicas para galerías de arte.

Recomendable:

Contextualizar: Si la obra está en una exposición, incluir el nombre o tema. Ejemplo: alt="Escultura de mármol 'La Esperanza', expuesta en la Galería 2026".
Evitar exceso de detalle técnico: No es necesario describir medidas exactas o materiales si no aportan al contexto.
Usar ALT más descriptivo en galerías sin texto adicional: Cuando la imagen es el único contenido, el alt debe ser más completo.
Imágenes decorativas: Si son meramente ornamentales (fondos, iconos), se usa alt="" vacío para que los lectores de pantalla las ignoren.

Errores comunes a evitar:

Repetir el mismo alt en varias imágenes.
Usar palabras genéricas como “foto”, “imagen”, “gráfico”.
Escribir descripciones demasiado largas o con información irrelevante.
Omitir el atributo en imágenes clave (afecta accesibilidad y SEO).

Conviene redactar los "alt" como si fueran mini fichas curatoriales: breves, evocativas y con contexto de exposición.

Plantilla de ALT para un sitio artístico:

Plantilla práctica de atributos "ALT" pensada para un sitio en WebSite X5, adaptada a secciones típicas de una galería virtual de arte. Así podremos mantener consistencia y cumplir con accesibilidad y SEO.

1. Sección Exposiciones

Formato recomendado:

alt="Título de la obra, técnica, artista, exposición"

Ejemplo:

alt="Escultura de mármol 'La Esperanza' de Juan Flores, exposición Primavera 2026"

2. Sección Artistas

Formato recomendado:

alt="Retrato del artista + estilo o disciplina"

Ejemplo:

alt="Retrato del fotógrafo Luis García, especialista en blanco y negro"

3. Sección Galería Virtual

Formato recomendado:

alt="Obra + rasgos visuales + contexto virtual"

Ejemplo:

alt="Óleo abstracto en tonos coral y azul petróleo, recorrido virtual Galería"

4. Sección Blog / Podcast

Formato recomendado:

alt="Imagen ilustrativa del tema tratado"

Ejemplo:

alt="Micrófono vintage sobre mesa de madera, podcast sobre arte contemporáneo"

5. Sección Comunidad / Información

Formato recomendado:

alt="Icono o fotografía representativa del servicio o evento"

Ejemplo:

alt="Grupo de visitantes interactuando en la sala virtual de la galería"

Reglas rápidas para el flujo de trabajo

Usa ALT descriptivo cuando la imagen sea parte del contenido.
Usa alt="" vacío en imágenes decorativas (fondos, separadores).
Mantén un estilo curatorial: breve, evocativo, con contexto.
Evita repetir el mismo ALT en varias imágenes.

Diferencia entre “Título” y “Texto alternativo”:

Título

Es el atributo title en HTML.
Se muestra como tooltip cuando el usuario pasa el cursor sobre la imagen.
Sirve para dar información adicional, no esencial.
Ejemplo: <img src="escultura.jpg" title="Escultura de Juan Flores, GS 2026" />

Texto alternativo

Es el atributo alt.
Es invisible para usuarios videntes, pero lo leen los buscadores y lectores de pantalla.
Debe describir la imagen de forma breve y clara.
Ejemplo: <img src="escultura.jpg" alt="Escultura de mármol 'La Esperanza' de Juan Flores" />

Cómo usarlos en tu galería de arte

Título - úsalo como un dato complementario: nombre de la exposición, año, técnica.
Texto alternativo - úsalo como la descripción curatorial breve de la obra.

Ejemplo completo:

Nombre del archivo: oleo-abstracto.jpg
Alt: Óleo abstracto en tonos coral y azul petróleo.
Title: Obra expuesta en la GS, primavera 2026.

Plantilla por sección:

Ejemplos para WebSite X5; con sugerencias de qué poner en “Título” y qué en “Texto alternativo” según cada sección de tu sitio.

Exposiciones:

Imagen: Escultura.
Nombre de la escultura: La Esperanza.
Artista: Juan Flores.
Lugar: GS - Exposición Primavera 2026.
Descripción: Escultura de mármol, 90cm x 50cm.

Nombre del archivo: juan-flores-la-esperanza-escultura.jpg

Título: GS - Exposición Primavera 2026 - Escultura de Juan Flores

Alt: Escultura de mármol 'La Esperanza' de Juan Flores, 90x50cm, "siendo observada por un niño" o "por el público visitante"* en GS - Exposición Primavera 2026..

* Describir brevemente la situación que rodea al objeto principal, si es que existe.

Artistas:

Nombre: Luis García.
Profesión: Fotógrafo.
Especialista/técnica: Especialista en imágenes en blanco y negro
Imagen: Retrato del fotógrafo Luis García.
Descripción: El artistas está sentado en el piso de su estudio limpiando las lentes de sus cámaras.
Año: 2026.

Nombre del archivo: luis-garcia-fotografo-estudio-2026.jpg

Title: Luis García – Fotógrafo en blanco y negro.

Alt: Retrato del fotógrafo Luis García del año 2026, sentado en el piso de su estudio limpiando las lentes de sus cámaras, especialista en blanco y negro.

Galería Virtual:

Nombre: Imagen en Galería virtual.
Descripción: Óleo abstracto en tonos coral y azul petróleo, un recorrido virtual en la Galería.
Año: 2026

Nombre del archivo: oleo-abstracto-galeria-virtual.jpg

title: Galería virtual – Óleo abstracto coral y azul.

Alt: Óleo abstracto en tonos coral y azul petróleo, recorrido virtual, Galería 2026.

Blog / Podcast:

Nombre: Podcast sobre arte contemporáneo
Descripción: Micrófono vintage sobre una mesa de madera, podcast sobre arte contemporáneo

Nombre del archivo: podcast-arte-contemporaneo.jpg

Title: Podcast sobre arte contemporáneo.

Alt: Micrófono vintage sobre una mesa de madera, podcast sobre arte contemporáneo.

Comunidad / Información:

Imagen: Visita interactiva en sala virtual
Descripción: Grupo de visitantes interactuando en la sala virtual de la galería.
Año: 2026

Nombre del archivo: comunidad-visita-galeria-2026.jpg

Title: Visita interactiva en sala virtual.

Alt: Grupo de visitantes interactuando en la sala virtual de la galería del año 2026 con el expositor.

Reglas rápidas:

Título - breve, atractivo, tipo “etiqueta” para el visitante.
Texto alternativo - descriptivo, pensado para accesibilidad y SEO.
No repetir exactamente lo mismo en ambos campos.
Imágenes Decorativas - deja ambos campos vacíos o usa alt="".

ERROR:

Title: Visita interactiva en sala virtual.
Alt: Visita interactiva en sala virtual.

Recuerda que el titulo es visible cuando colocas el cursor sobre la imagen y el texto alternativo es para los lectores de SO.

Con esto ya tienes un guion estándar para WebSite X5.

Para varias imágenes de una misma exhibición o artista:

En el caso de tener varias imágenes de una misma exhibición o del mismo artista, lo que las diferencia es el nombre específico de cada obra y su descripción.

El Texto alternativo (alt) debe describir la obra de manera breve y clara: técnica, colores, tema o rasgos visuales.
El Título (title) puede incluir el nombre propio de la pintura o escultura, junto con el artista o la exposición.

De esa forma, aunque todas pertenezcan al mismo artista, cada imagen queda identificada por su título único.

Ejemplo práctico:

Supongamos que tienes tres pinturas de Juan Flores en la misma exposición:

Obra 1

Nombre del archivo: juan-flores-amanecer-2026.jpg

title: Amanecer – Juan Flores, Exposición Primavera 2026.

Alt: Óleo en tonos cálidos que representa un amanecer...

Obra 2

Nombre del archivo: juan-flores-silencio-2026.jpg

title: Silencio – Juan Flores, Exposición Primavera 2026.

Alt: Óleo abstracto en tonos azules y grises...

Obra 3

Nombre del archivo: juan-flores-esperanza-2026.jpg

title: La Esperanza – Juan Flores, Exposición Primavera 2026.

Alt: Escultura de mármol con figura humana estilizada...

Reglas rápidas:

Título - nombre único de la obra + artista + exposición.
ALT - describe lo que se ve (colores, técnica, tema) etc..

Así evitamos duplicados y cada imagen queda diferenciada tanto para visitantes como para buscadores.

A tomar en cuenta:

Si solo se ponen descripciones genéricas y apenas cambia las medidas, eso no cumple con las buenas prácticas de accesibilidad ni con el valor curatorial que debería tener el texto alternativo.

Lo aconsejarle es pensar en el alt como una mini ficha de catálogo:

Nombre de la obra: (lo que la diferencia de las demás).
Técnica o soporte: (óleo sobre tela, escultura en bronce, fotografía digital).
Rasgos visuales: (colores dominantes, estilo, tema).
Contexto: (exposición, año, artista).

De esa forma, aunque el visitante no sea experto en técnicas artísticas, si podrá entender esos datos.

Plantilla general:

Título (title):

[Nombre de la obra] – [Artista], [Exposición/Año] ó…

[Artista] – [Nombre de la obra], [Exposición/Año]

Ejemplo: “Silencio – Juan Flores, primavera 2026”

“Juan Flores – Silencio, primavera 2026”

Texto alternativo (alt):

[Tipo de obra] en [técnica/soporte] con [rasgos visuales], de [artista], expuesta en [exposición/año]

Ejemplo: “Óleo abstracto en tonos azules y grises sobre tela, de Juan Flores, expuesto en primavera 2026”

Recomendación práctica:

Las medidas no son necesarias en el alt, salvo que sean parte del concepto artístico.
En nombres de archivo, No utilizar caracteres extraños.

Con esto evitamos confundir al visitante y/o al navegador.

Ejemplo con varias obras ficticias de un mismo artista para insertar en código html.

En ocasiones tenemos que insertar una imagen en código html y no en un objeto de galería o imagen.

Previamente tenemos que subir las imágenes a una carpeta del servidor y así obtener la dirección web: https://www.galerie.com/imagenes/nombre-del-archivo.jpg

Ejemplo: Obras de Juan Flores – Exposición Primavera 2026

Obra 1

<img src="https://www.galerie.com/imagenes/juan-flores-amanecer.jpg"

alt="Óleo en tonos cálidos que representa un amanecer sobre tela"

title="Amanecer – Juan Flores, primavera 2026" />

Obra 2

<img src="https://www.galerie.com/imagenes/juan-flores-silencio.jpg"

alt="Óleo abstracto en tonos azules y grises sobre lienzo"

title="Silencio – Juan Flores, primavera 2026" />

Obra 3

<img src="https://www.galerie.com/imagenes/juan-flores-esperanza.jpg"

alt="Escultura de mármol estilizada con figura humana"

title="La Esperanza – Juan Flores, primavera 2026" />

Obra 4

<img src="https://www.galerie.com/imagenes/juan-flores-reflejos.jpg"

alt="Fotografía digital en blanco y negro con reflejos urbanos"

title="Reflejos – Juan Flores, primavera 2026" />

Obra 5

<img src="https://www.galerie.com/imagenes/juan-flores-memoria.jpg"

alt="Instalación contemporánea con espejos y luces LED"

title="Memoria – Juan Flores, primavera 2026" />

Observaciones:

Nombre de archivo: evita 01.jpg o 11(1).jpg. Usa nombres descriptivos como juan-flores-amanecer.jpg.
Title: siempre incluye el nombre de la obra + artista + exposición/año.
Alt: describe técnica y rasgos visuales, no solo medidas.
Medidas: no son necesarias en el alt salvo que sean parte del concepto artístico.

Formato de ficha técnica en una tabla:

Aquí tienes un formato de ficha técnica en tabla para llenar fácilmente antes de subir las imágenes. Esto te permitirá tener la información necesaria para redactar correctamente el Título y el Texto alternativo (alt) en WebSite X5:

Plantilla de ficha técnica para obras:

Nombre de la obra	Artista	Técnica / Soporte	Año / Exposición	Rasgos visuales principales	Nombre de Archivo sugerido
Amanecer	Juan Flores	Óleo sobre tela	Primavera 2026	Tonos cálidos, paisaje de amanecer	juan-flores-amanecer-2026.jpg
Silencio	Juan Flores	Óleo sobre lienzo	Primavera 2026	Abstracto, azules y grises	juan-flores-silencio-2026.jpg
La Esperanza	Juan Flores	Escultura en mármol	Primavera 2026	Figura humana estilizada	juan-flores-esperanza-2026.jpg
Reflejos	Juan Flores	Fotografía digital	Primavera 2026	Blanco y negro, reflejos urbanos	juan-flores-reflejos-2026.jpg
Memoria	Juan Flores	Instalación con espejos y luces LED	Primavera 2026	Contemporánea, juego de luces	juan-flores-memoria-2026.jpg

Cómo usar esta tabla...

Nombre de la obra + Artista + Año: se convierte en el Título en WebSite X5.
Técnica / Soporte + Rasgos visuales: se convierten en el Texto alternativo (alt).
Nombre de archivo sugerido: evita nombres genéricos como 01.jpg y usa nombres descriptivos.

Así garantizas accesibilidad, diferenciación entre imágenes y un estilo curatorial profesional.

NOTA: Puedes agregar alguna otra característica que consideres importante.

Tamaño y peso de las imágenes.

Dimensiones y tamaño de archivo de las imágenes.

En cuanto a las dimensiones y el tamaño de archivo (MB, KB) de las imágenes, se recomiendan valores muy bajos, lo que a veces puede resultar contraproducente para un sitio web.

Lo cierto es que NO se recomiendan imágenes de más de 2 MB. Sin embargo, esto depende del sitio web y su propósito. Algunos sitios web dan menos importancia a la calidad, mientras que otros prefieren imágenes más grandes con un tamaño de archivo mayor al recomendado, siempre que no superen los 2 MB por imagen.

En cuanto a la cantidad de imágenes por página, se recomienda un punto intermedio: un máximo de 500 KB a 1 MB si hay pocas imágenes.

Si hay muchas imágenes por página, deben mantenerse por debajo de 500 KB.

Para la publicación en línea de imágenes JPG, es importante un equilibrio óptimo entre alta calidad de imagen y tamaño de archivo pequeño para garantizar una carga rápida.

Google recomienda:

Tamaño del archivo: Menos de 200 KB (idealmente entre 50 KB y 150 KB) para evitar tiempos de carga prolongados.
Resolución: 72 ppp (o ppi), el estándar óptimo para pantallas.
Nivel de compresión: Entre el 70 % y el 85 % en programas de edición de imágenes.
Perfil de color: sRGB, el estándar universal para navegadores web.

En cuanto a los nombres, es recomendable evitar el uso de caracteres especiales, como ∞Ωᴓ, entre otros, ya que es posible que no se muestren correctamente en todos los idiomas del navegador.

Medidas comunes para las imágenes.

Tipo de imagen:	Dimensiones para Escritorio (ancho x alto)	Dimensiones del dispositivo móvil (ancho x alto)	Relación de aspecto (Aspect ratio)
Fondo	2560 x 1400 pixels	360 x 640 pixels	16:9
Principales	1280 x 720 pixels	360 x 200 pixels	16:9
Banner	1200 x 400 pixels	360 x 120 pixels	3:1
Blog*	1200 x 800 pixels*	360 x 240 pixels	3:2
*Para compartir en Facebook las medidas son: 1200 x 630.