Cómo exportar fotos para un portfolio web

Un portfolio debe cargar con fluidez y mostrar el valor del trabajo. Tela, hojas, cielos suaves y matices de piel importan más que en una ilustración pequeña. Una miniatura aceptable puede verse mal al ampliarla.

Busca archivos que mantengan el detalle útil a las medidas reales de visualización. Esta guía explica cómo elegirlos y probarlos, incluso después del procesamiento de la plataforma.

Piensa en la galería, no solo en la miniatura

Enumera cuadrícula, proyecto, visor ampliado e imagen inicial a todo el ancho. Una foto puede recortarse cuadrada en la cuadrícula y abrirse completa. Una exportación pequeña no aporta detalle para la vista grande.

Lee las instrucciones antes de crear ajustes. Algunas plataformas generan varias medidas; otras muestran el archivo tal cual. Adobe Portfolio guarda la resolución completa y genera versiones menores. Revisa por separado la fuente subida y el archivo recibido por el visitante.

Comprueba si se permite descargar el original. No subas un máster de impresión porque la galería suela mostrar menos resolución. La copia web debe ser un archivo que aceptes hacer accesible mediante el sitio.

Averigua el tamaño de la vista abierta

1. Empieza en el editor web. Revisa ayuda de galerías y ajustes del diseño. Busca ancho o alto máximo de visualización; el límite de subida es otra cosa.
2. Abre una galería de prueba publicada. Usa la ventana más ancha prevista y abre las imágenes como un visitante, incluido el visor. Prueba retratos, que pueden limitarse por la altura.
3. Mide solo si la plataforma no da medidas útiles. En ordenador, clic derecho e Inspeccionar. El resaltado o panel de diseño puede indicar píxeles CSS. Mide la imagen, no su marco. Abrir la fuente en otra pestaña muestra los píxeles del archivo, no los de visualización.

Si no logras determinar el tamaño, empieza por la recomendación actual del servicio y prueba la vista abierta antes de crear un ajuste para toda la colección. No lo deduzcas solo de la resolución de cámara.

Elige píxeles según el diseño

Parte de la mayor visualización y decide qué detalle extra merece la pena. Una imagen de 1.200 píxeles CSS de ancho puede usar 2.400 para 2× si el sitio entrega esa fuente. No es una regla de 2.400 para todas las fotos.

6.000 × 4.000 reducido proporcionalmente a 2.400 de ancho resulta en 2.400 × 1.600. A 1.200 × 800 CSS ofrece dos píxeles de imagen por dirección por píxel CSS. Un retrato de 4.000 × 6.000 con lado largo de 2.400 queda en 1.600 × 2.400. El mismo lado largo no produce el mismo ancho.

Doblar ancho y alto cuadruplica los píxeles: 960.000 en 1.200 × 800 frente a 3.840.000 en 2.400 × 1.600. El peso no tiene por qué cuadruplicarse, pero transferencia y decodificación cuestan más. Compara pequeña y 2× en la galería. Conserva el extra si se aprecia y sirve variantes menores a vistas pequeñas.

Usa Redimensionar imagen con proporciones bloqueadas para reducir un archivo web existente. Si hace falta otra composición, recorta primero. No estires un retrato para un hueco horizontal.

El móvil no debería cargar el archivo mayor para cada miniatura. El constructor puede resolverlo; un sitio propio puede requerir marcado adaptable. La guía de imágenes responsivas explica tamaño mostrado y elección de fuente.

En pantallas normales los píxeles importan más que la etiqueta PPI. Un archivo de 2.400 de ancho sigue igual al cambiar solo metadatos de resolución. Para impresión la relación es otra: consulta DPI, PPI y píxeles.

Elige conscientemente formato y color

Empieza con un formato admitido

JPG es práctico para fotografía. PNG sirve para transparencia o gráficos, pero suele pesar demasiado en fotos. WebP y AVIF son útiles con soporte de plataforma o control de entrega. La referencia MDN explica características y compatibilidad.

No conviertas toda la colección sin probar la publicación. La plataforma puede rechazar el formato o recodificarlo. Compara la imagen que entrega la galería terminada, no solo la subida.

Exporta con gestión del color

Para un portfolio convencional con rango dinámico estándar, SDR, sRGB es un punto de partida práctico. Exporta desde un editor con gestión del color e incluye el perfil cuando sea posible. Convertir los colores a sRGB no es lo mismo que asignar un perfil sRGB a valores preparados en otro espacio de color. Las preguntas y respuestas de Adobe sobre el color explican cómo lo gestiona Lightroom.

La gama amplia y HDR requieren exportación y publicación compatibles. Úsalos con intención si hay soporte. La vista del editor no demuestra lo que verá el visitante.

Compara publicación y exportación en el mismo dispositivo con piel o superficies neutras de referencia. Las pantallas pueden seguir variando. Si la publicación cambia ahí el color, investiga procesamiento y perfiles antes de retocar. La guía de color ayuda.

Prueba la compresión con una pequeña selección

Un porcentaje de calidad no significa lo mismo en todos los exportadores. Controla un codificador concreto, no el porcentaje de calidad artística o técnica de la foto.

Elige fotos que permitan detectar distintos defectos. Un cielo uniforme revela bandas de color; el pelo, la hierba y los tejidos muestran la pérdida de textura. Las sombras pueden presentar bloques o ruido difuminado. La arquitectura deja ver daños en bordes finos y de alto contraste. Incluye los tipos de imágenes que realmente publicas.

1. Usa una misma fuente editada. Mantén medidas y color para variar solo la compresión.
2. Crea dos o tres candidatos. En una escala JPG 0–100 puedes probar 75, 85 y 95. Son puntos de prueba, no recomendaciones universales.
3. Comprueba la imagen en dos vistas. Primero evalúala al tamaño al que la verá el visitante. Después examínala al 100 % o en vista 1:1 para detectar pérdida de textura, bloques o halos. El 100 % no equivale a ajustar a la ventana ni implica necesariamente ampliar. Adobe describe la vista 1:1 de Lightroom como la visualización de los píxeles reales de la imagen.
4. Compara pesos después del aspecto. Conserva el menor solo si mantiene el detalle importante. Mucha pérdida para un ahorro mínimo rara vez compensa.
5. Publica una prueba y compara de nuevo. La plataforma puede cambiar el resultado. Comprueba cuadrícula, vista abierta y móvil antes de exportar la serie.

No existe un objetivo universal en kilobytes para las fotos de un portfolio. Una foto de un bosque detallado puede necesitar más datos que una composición sencilla de estudio con las mismas dimensiones. Elige el archivo más pequeño que supere tu revisión visual y después evalúa la carga de la página completa.

Ejemplo medido: una foto, tres exportaciones JPG

Probamos una foto de los Alpes y el Mediterráneo de NASA Earth Observatory. Crédito: NASA/JSC, ISS Crew Earth Observations Facility, imagen ISS073-E-3320. La fuente ya era JPG. La redujimos una vez a 2.400 × 1.348 y guardamos un PNG para partir siempre de los mismos píxeles. El PNG no recupera pérdidas previas.

El 17 de octubre de 2026 convertimos el mismo PNG con PNG a JPG de Pixilo a 75, 85 y 95 en Microsoft Edge 155.0.4283.45. Las medidas no cambiaron. Los números corresponden a ese codificador, no a equivalentes de Lightroom ni a resultados garantizados en otras fotos.

Cada detalle es la misma zona de 240 × 160 sin redimensionar de nuevo. La página puede escalar las vistas. Abre los archivos completos al 100 % para comparar píxeles. Mira crestas y textura: un ajuste menor ahorra bytes y puede suavizarlas. El 95 pesa casi el doble que 85; eso no decide por sí solo si mejora tu galería.

También puedes descargar el PNG de trabajo (6.464.084 bytes) y reproducir el test. Una foto aérea no define ajustes para retratos, arte o todo paisaje. Repite el método con tus imágenes representativas.

Ejemplo: crear un ajuste de exportación en Lightroom Classic

Supón una vista máxima sin recorte de 1.200 × 800 CSS y un original de 6.000 × 4.000. Quieres comparar JPG de 2.400 × 1.600 con una versión menor. Selecciona la foto y abre File → Export. La documentación de Adobe explica los paneles; nombres y opciones varían por versión e idioma.

• File Settings: elige JPEG y sRGB para este caso SDR. Compara calidades en Lightroom sin copiar el valor del navegador.
• Image Sizing: activa Resize to Fit y Width & Height. Introduce un marco de 2.400 × 1.600 para esta foto horizontal. Se ajusta proporcionalmente, sin forzar un retrato a esas medidas. Mantén Don't Enlarge para reutilizar el ajuste con fuentes pequeñas.
• Output Sharpening: compara sin enfoque y con Sharpen For: Screen, Amount: Standard. Examina bordes y textura al tamaño final. Reduce o desactiva si genera halos o bordes duros.
• Metadata: conserva descripción y derechos necesarios, y revisa las opciones para quitar ubicación y datos personales.
• Export Location: guarda en una carpeta web aparte. Distingue los candidatos por nombre para subir la copia revisada.

Sube una opción, revisa la vista abierta y el móvil y solo entonces guarda el ajuste. Retratos y miniaturas pueden necesitar otros límites. Revísalo si cambia el diseño.

Usa Pixilo cuando aporte un paso útil

Si tu editor produce medidas, formato y calidad en una sola exportación, empieza allí. Pixilo ayuda con una imagen ya generada que necesita reducción, otro recorte o comparar compresión.

El compresor crea una copia ligera y Redimensionar imagen elimina píxeles sobrantes. Admite JPG, PNG y WebP hasta 25 MB cada uno. Exporta una copia menor si la fuente supera el límite. RAW, perfiles de color y enfoque de salida requieren un editor compatible.

Evita cadenas de JPG. Aplica varios cambios antes de una única exportación final y compara desde la misma fuente preparada, no comprimiendo otra vez la descarga anterior.

Revisa metadatos, nombres y marcas de agua

Revisa GPS y datos personales aparte de la compresión; consulta la guía de metadatos. Con la herramienta de marca de agua, comprueba ubicación en cuadrícula y vista grande. No tapes el trabajo. Una marca no impide copiar.

Localiza dónde cambió la calidad

1. Revisa la fuente editada. La exportación web no recupera lo que ya falta.
2. Revisa el archivo local. Si pierde textura o añade halos, analiza medidas, compresión y enfoque por separado.
3. Revisa el archivo servido por la galería. Si el local está bien, comprueba versión, recorte y tamaño mostrado. Una miniatura estirada necesita otra solución que un exceso de compresión.

Cambia una etapa cada vez. Pedir muchos archivos grandes a la vez también ralentiza. Prueba una visita nueva y la primera apertura, no solo el paso entre fotos ya cargadas.

Revisa la galería publicada

• Miniaturas y fotos abiertas mantienen la composición deseada.
• Se conserva la textura importante sin artefactos molestos en cielos y sombras.
• La vista grande no es una miniatura insuficiente ampliada.
• Los colores son razonables entre exportación y publicación en el mismo dispositivo.
• La página móvil carga con fluidez sin descargar el archivo más grande para cada miniatura.
• Archivos públicos y enlaces contienen solo versiones y metadatos que deseas compartir.

Preguntas frecuentes

¿Debo usar siempre la máxima calidad JPG?

No. Puede aumentar mucho el peso sin una diferencia útil al tamaño final. Prueba imágenes exigentes y compara aspecto y ahorro.

¿Todas las fotos deben medir lo mismo?

No necesariamente. La coherencia no obliga a estirar todo. El diseño determina qué recortes deben coincidir y qué fotos conservan sus proporciones.

¿La exportación web sirve también para impresión?

No lo presupongas. Una entrega impresa o al cliente puede necesitar otras medidas, colores, metadatos y enfoque. Prepárala desde el original editado según los requisitos.