Multimodalidad (multimodal: que trabaja con distintos tipos de datos, como texto e imágenes): imágenes, PDF, audio

Tiempo: unos 20 min de lectura + 30 min de práctica

Lo esencial

Hasta ahora, Claude trabajaba solo con texto, como un experto que lee pero no mira. La multimodalidad es darle vista. Ahora puedes mostrarle una captura de pantalla de una interfaz y preguntarle "¿qué está mal aquí?", pasarle una factura en PDF y pedirle "saca todos los montos en JSON", o tomarle una foto a un diagrama hecho a mano y recibir el código. Claude Code "ve" imágenes y "lee" documentos, no mediante una conversión OCR (reconocimiento de texto), sino directamente, como modelo multimodal.

Conceptos clave

• Vision (visión): Claude analiza imágenes a través de la API (interfaz de programación): base64, URL o Files API
• Soporte de PDF: la herramienta Read de Claude Code procesa PDF automáticamente (con rangos de páginas)
• Formatos admitidos: JPEG, PNG, GIF y WebP para imágenes; PDF para documentos
• Fórmula de tokens (token: unidad de texto para la IA): la imagen se divide en bloques de 28x28 px y cada bloque = 1 token: ⌈ancho/28⌉ × ⌈alto/28⌉ (según la documentación oficial)
• Límites (a octubre de 2026): máximo 10 MB por archivo directamente por la API (5 MB en Amazon Bedrock y Google Cloud, 10 MB en claude.ai), hasta 8000x8000 px, hasta 600 imágenes en una solicitud (100 para modelos con ventana de 200K, por ejemplo Haiku 4.5)
• Resolución nativa: máximo 1568 px en el lado largo; 2576 px para los modelos Claude 4.7 y posteriores (Opus 5.5, Sonnet 5.5, Fable 5.1)

Teoría

Cómo ve Claude las imágenes

🎨 Imagínalo así: la multimodalidad es darle vista a un experto ciego. Antes lo sabía todo, pero solo al tacto. Ahora le muestras la pantalla y al instante ve qué falla en la interfaz, qué cifras hay en el PDF, cómo es el diagrama.

Claude no recibe la imagen como una matriz de píxeles: la recibe como datos codificados y la procesa en su espacio multimodal. Eso significa que puede:

• Leer texto en capturas de pantalla, fotos de documentos y escritos a mano
• Analizar diagramas, gráficas y esquemas
• Describir una interfaz: "el botón Enviar está abajo a la derecha, el formulario tiene 3 campos"
• Encontrar errores: comparar el diseño con lo que se implementó
• Extraer datos estructurados de tablas y formularios

Lo que Claude NO puede hacer con imágenes (según la documentación de Anthropic):

• Generar imágenes: Claude solo analiza; no crea ni edita imágenes
• Identificar personas: Claude no dice quién es la gente en una foto (restricción de la Acceptable Use Policy, su política de uso aceptable)
• Determinar con exactitud relaciones espaciales: puede equivocarse con relojes de manecillas o posiciones de ajedrez
• Garantizar un conteo exacto de objetos: da números aproximados
• Detectar imágenes generadas por IA: no distingue lo falso de lo real
• Analizar video: solo cuadros fijos; de un GIF animado, solo el primer cuadro

Multimodalidad en Claude Code

En Claude Code, las imágenes se manejan con la herramienta Read, la misma que lee archivos de texto:

Lee ~/screenshots/ui-bug.png y encuentra problemas en la interfaz

Claude Code detecta automáticamente el tipo de archivo. Las imágenes las muestra de forma visual (Claude es un modelo multimodal). Se admiten PNG, JPG, GIF y WebP.

Para PDF existe el parámetro pages, para leer páginas concretas:

Lee ~/docs/contract.pdf, páginas 1 a 5, y señala los puntos clave

🎨 Imagínalo así: la herramienta Read de Claude Code es como un escáner universal. Pones un documento (texto, imagen, PDF) y Claude ve el contenido directamente. No hace falta convertir ni recodificar nada.

Tres formas de pasar una imagen por la API

Forma 1: URL (si la imagen es pública)

import anthropic

client = anthropic.Anthropic()

message = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=1024,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "image",
                    "source": {
                        "type": "url",
                        "url": "https://example.com/screenshot.png",
                    },
                },
                {
                    "type": "text",
                    "text": "¿Qué se ve en esta captura de pantalla? Describe los elementos de la interfaz."
                }
            ],
        }
    ],
)
print("".join(b.text for b in message.content if b.type == "text"))

Forma 2: Base64 (para archivos locales)

import anthropic
import base64

# Leemos el archivo y lo codificamos en base64
with open("invoice.png", "rb") as f:
    image_data = base64.standard_b64encode(f.read()).decode("utf-8")

client = anthropic.Anthropic()

message = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=1024,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "image",
                    "source": {
                        "type": "base64",
                        "media_type": "image/png",  # image/jpeg, image/gif, image/webp
                        "data": image_data,
                    },
                },
                {
                    "type": "text",
                    "text": "Extrae de esta factura: número, fecha, monto total, destinatario. Devuelve JSON."
                }
            ],
        }
    ],
)
print("".join(b.text for b in message.content if b.type == "text"))

Forma 3: Files API (súbela una vez y úsala muchas veces)

Para imágenes que reutilizas o para conversaciones largas, la Files API te deja subir el archivo una vez y referirte a él por su file_id:

import anthropic

client = anthropic.Anthropic()

# Subimos el archivo una vez
with open("image.jpg", "rb") as f:
    file_upload = client.files.upload(file=("image.jpg", f, "image/jpeg"))

# Usamos el file_id (no hace falta mandar el base64 cada vez)
message = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=1024,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "image",
                    "source": {"type": "file", "file_id": file_upload.id},
                },
                {"type": "text", "text": "Describe esta imagen."},
            ],
        }
    ],
)

¿Para qué la Files API? (antes necesitaba un encabezado beta; según la documentación vigente ya no hace falta) En las conversaciones de varios turnos, cada solicitud vuelve a mandar todo el historial. Si las imágenes van en base64, se envían completas en cada turno. Con la Files API solo se envía el file_id, y el tamaño de la solicitud no crece.

🎨 Imagínalo así: base64 es imprimir el plano completo cada vez y llevarlo a la junta. La Files API es decir "vean el plano #7 que ya aprobamos". Una etiqueta en lugar de un bonche pesado de papeles.

Varias imágenes en una sola solicitud

Claude puede trabajar con varias imágenes a la vez, por ejemplo para comparar el diseño con la captura de lo que se implementó.

Límites (según la documentación de Anthropic):

• Hasta 20 imágenes por mensaje en claude.ai
• Hasta 100 imágenes por solicitud en la API (modelos con contexto de 200K; hoy es Haiku 4.5)
• Hasta 600 imágenes por solicitud en la API (los demás modelos)
• Con más de 20 imágenes en una solicitud se aplica un límite más estricto al tamaño de cada una (en la documentación: no más de 2000 px por lado)

🎨 Imagínalo así: varias imágenes en una solicitud es como enseñarle a un arquitecto dos planos a la vez. "Este es el plano 1 (lo que planeamos), este es el plano 2 (lo que se construyó). Encuentra las diferencias." Sin etiquetas, el arquitecto se confunde de cuál es cuál.

Buena práctica: con varias imágenes, etiqueta cada una: "Image 1:", "Image 2:":

message = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=1024,
    messages=[
        {
            "role": "user",
            "content": [
                {"type": "text", "text": "Image 1:"},
                {
                    "type": "image",
                    "source": {"type": "base64", "media_type": "image/png", "data": design_b64},
                },
                {"type": "text", "text": "Image 2:"},
                {
                    "type": "image",
                    "source": {"type": "base64", "media_type": "image/png", "data": screenshot_b64},
                },
                {
                    "type": "text",
                    "text": "Encuentra las diferencias entre el diseño (Image 1) y la implementación (Image 2)."
                }
            ],
        }
    ],
)

El orden importa: según la documentación de Anthropic, conviene poner las imágenes antes de la pregunta de texto, igual que con documentos largos.

PDF: la herramienta Read en Claude Code

En modo interactivo, Claude Code procesa los PDF con la herramienta Read integrada. Solo indica la ruta del archivo:

Lee ~/documents/contract.pdf y señala todas las fechas de pago

Claude Code automáticamente:

1. Abre el PDF
2. Extrae el texto, las tablas y la estructura
3. Procesa el contenido

Para PDF grandes (más de 10 páginas), indica siempre el rango de páginas:

Lee ~/docs/report.pdf, páginas 1 a 5

Máximo 20 páginas por solicitud. Si no indicas el rango, leer un PDF grande puede terminar en error.

🎨 Imagínalo así: la herramienta Read para PDF es como un contador que lee cualquier documento sin escáner. Pones el contrato sobre la mesa y de inmediato ve todos los montos, fechas y condiciones. No hace falta convertir nada.

Por la API: el PDF como base64:

import anthropic
import base64

with open("report.pdf", "rb") as f:
    pdf_data = base64.standard_b64encode(f.read()).decode("utf-8")

client = anthropic.Anthropic()

message = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=2048,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "document",
                    "source": {
                        "type": "base64",
                        "media_type": "application/pdf",
                        "data": pdf_data,
                    },
                },
                {
                    "type": "text",
                    "text": "Saca todos los indicadores numéricos de este reporte en una tabla de Markdown."
                }
            ],
        }
    ],
)

El costo: la fórmula para calcular tokens

La fórmula oficial de la documentación de Anthropic: Claude mira la imagen en bloques de 28x28 píxeles y cada bloque es un token.

tokens = ⌈width / 28⌉ × ⌈height / 28⌉

Donde width (ancho) y height (alto) van en píxeles, después del escalado. (En versiones anteriores del curso aquí aparecía la fórmula width * height / 750, que ya es obsoleta.)

Resolución nativa máxima (a octubre de 2026):

• Modelos Claude 4.7 y posteriores: 2576 px en el lado largo (hasta 4784 tokens por imagen)
• Los demás modelos: 1568 px en el lado largo (hasta 1568 tokens por imagen)

Si la imagen es más grande, Claude la reduce automáticamente conservando las proporciones.

Ejemplos para el nivel de resolución estándar (por ejemplo, Haiku 4.5, $1 por 1 millón de tokens de entrada) y para el alto (Opus 5.5, $4 por 1 millón). Precios a octubre de 2026; los vigentes: Lo vigente.

Los modelos Claude 4.7 y posteriores admiten alta resolución. Hasta 3 veces más tokens por imagen, pero ven mejor los detalles pequeños. Si no necesitas tanta precisión, reduce la imagen antes de mandarla.

🎨 Imagínalo así: una vista que cuesta. Imagina que cada vez que Claude mira una imagen cuesta dinero, como una radiografía en la clínica. Una imagen pequeña para leer texto es una radiografía barata (fracciones de centavo). Un PNG enorme para analizar píxel por píxel en un modelo de alta resolución es una resonancia magnética cara (unos $0.02). Reduce la "toma" al tamaño que necesitas.

Recomendaciones de calidad de imagen (según la documentación de Anthropic)

• Formato: JPEG, PNG, GIF o WebP. Las animaciones no se admiten: solo se usa el primer cuadro
• Nitidez: la imagen debe ser clara, no borrosa ni pixelada
• Texto: si la imagen tiene texto importante, asegúrate de que se lea y no sea demasiado pequeño. No recortes el contexto visual solo para agrandar el texto
• Compresión: la compresión con pérdida de JPEG/WebP reduce el tamaño de la solicitud y la latencia, pero puede crear artefactos. Revisa que el texto siga legible después de comprimir
• Escalado: ten en cuenta que la imagen puede reducirse automáticamente, y eso puede volver ilegible el texto pequeño. Es mejor reducirla tú de antemano

Casos prácticos

Analizar capturas de pantalla de una interfaz:

Esta es una captura de nuestra página de pago [image].
Encuentra problemas de experiencia de usuario: qué puede confundir al usuario, dónde falta
contraste, qué elementos están acomodados de forma poco intuitiva.

Extraer datos de documentos:

Esta es la foto del ticket de un restaurante [image].
Extrae: nombre del lugar, fecha, cada platillo con su precio, total,
propina si la hay. Devuelve un JSON estructurado.

Procesar diagramas hechos a mano:

Esta es la foto de un diagrama de base de datos hecho a mano [image].
Conviértelo en sentencias SQL CREATE TABLE para PostgreSQL.

🎨 Imagínalo así: la revisión visual en dos pasadas (two-pass visual check) es como un fotógrafo que primero toma la foto y luego la mira en la pantalla de la cámara. "La luz no está bien, un poco más a la derecha." Toma → mira → corrige → otra vez. Sin la segunda mirada, imprimes lo que salió a la primera.

Two-pass visual check (el patrón Build → Screenshot → Review → Fix: construir → capturar → revisar → corregir):

Un patrón muy útil para desarrollar interfaces: primero escribes el código y luego Claude revisa el resultado visual:

# Paso 1: Claude genera el HTML/CSS
# Paso 2: Tomamos una captura de la página (con Playwright, Puppeteer o Computer Use)
# Paso 3: Le mandamos la captura a Claude preguntando "¿qué está mal?"
# Paso 4: Claude encuentra los errores visuales y corrige el código

message = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=2048,
    messages=[{
        "role": "user",
        "content": [
            {"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": screenshot_b64}},
            {"type": "text", "text": "Esta es una captura de la página que acabo de generar. "
             "Encuentra problemas visuales: alineación chueca, texto cortado, "
             "problemas de contraste, márgenes incorrectos. Propón correcciones de CSS."}
        ]
    }]
)

QA automático del diseño (comparar Figma con la implementación):

# Comparamos cada componente de Figma con la captura real
for component_name, figma_img, screenshot_img in components:
    result = client.messages.create(
        model="claude-opus-5-5",
        messages=[{
            "role": "user",
            "content": [
                {"type": "text", "text": "Image 1 (diseño en Figma):"},
                {"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": figma_img}},
                {"type": "text", "text": "Image 2 (implementación):"},
                {"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": screenshot_img}},
                {"type": "text", "text": f"Componente: {component_name}. Califica la coincidencia de 0 a 10 y describe las diferencias."}
            ]
        }]
    )

Práctica

Tarea: un analizador de facturas

1. Busca o crea una imagen PNG de una factura (invoice): puedes tomar una captura de cualquier plantilla en línea
2. Escribe un script de Python que lea el archivo, lo codifique en base64 y se lo mande a Claude con este prompt (prompt: la instrucción para la IA): "Extrae de esta factura: número del documento, fecha, destinatario, lista de conceptos (nombre, cantidad, precio), monto total. Devuelve JSON."
3. Ejecuta el script y revisa que los datos extraídos sean correctos
4. Agrega manejo de errores: si no se encuentra el archivo, si Claude no pudo extraer los datos
5. Extra: procesa varias facturas en un ciclo y guarda los resultados en invoices.json

Tarea 2: revisión visual en dos pasadas en Claude Code

1. Pídele a Claude Code que cree una página HTML: "Crea una landing page para una app de fitness con sección hero, precios y botón de llamado a la acción"
2. Abre el resultado en el navegador y toma una captura (o usa la herramienta Read de Claude Code para verla)
3. Muéstrale la captura a Claude: "Lee /tmp/screenshot.png y encuentra problemas visuales en esta página"
4. Claude te propondrá correcciones: aplícalas
5. Repite el ciclo (captura → revisión → corrección) hasta que el resultado quede como quieres

Objetivo: entender cómo pasar imágenes por la API y extraer datos estructurados de fuentes visuales. Dominar el patrón de revisión visual en dos pasadas.

Herramientas y recursos

• anthropic: pip install anthropic, el SDK de Python con soporte de visión
• Pillow: pip install Pillow, para cambiar el tamaño de las imágenes antes de mandarlas (ahorra tokens)
• base64: módulo integrado de Python para codificar archivos
• Herramienta Read de Claude Code: soporte integrado de imágenes (PNG, JPG, GIF, WebP) y PDF
• Files API: subir y reutilizar imágenes con file_id
• Documentación de Vision: platform.claude.com/docs/en/build-with-claude/vision
• Multimodal cookbook: platform.claude.com/cookbook/multimodal-getting-started-with-vision

Ideas clave

Una imagen se pasa a la API de tres formas: base64, URL o Files API (file_id). El tipo se indica en el campo media_type. Claude procesa JPEG, PNG, GIF, WebP y PDF.

En Claude Code, las imágenes y los PDF se abren con la herramienta Read como archivos normales: no hay que convertir nada. Para PDF grandes (más de 10 páginas), indica el rango de páginas.

Costo = ⌈width/28⌉ × ⌈height/28⌉ tokens. Máximo 1568 px en el lado largo (2576 px para los modelos Claude 4.7 y posteriores). Reduce la imagen al mínimo necesario antes de mandarla.

Claude NO genera imágenes: solo las analiza. No identifica personas en fotos. Puede equivocarse con imágenes pequeñas, borrosas o volteadas.

El patrón de revisión visual en dos pasadas (Build → Screenshot → Review → Fix) es una herramienta muy útil para desarrollar interfaces con verificación visual a través de Claude.

Siguiente lección

→ AI Image Generation Pipeline: cómo hacer imágenes si Claude no las dibuja. Después: Qué son los Skills.