Cómo combinar imágenes para tu web

¿Combinar las imágenes o mostrarlas por separado?

Un collage reúne varias imágenes en un solo archivo. Puede ofrecer una visión general compacta en una página de proyecto o mostrar un tema junto a un detalle útil. Las imágenes deberían responder a una misma pregunta, como qué aspecto tiene una cocina terminada y cómo funcionan sus soluciones de almacenaje.

Muestra las imágenes por separado cuando cada una necesite una explicación, un enlace o una revisión detallada. Una galería de productos permite examinar cada vista en lugar de verla en una cuadrícula pequeña.

El collage conserva su distribución al mostrarse más pequeño. Las imágenes añadidas por separado en el editor de tu web pueden apilarse en el móvil; las unidas en un archivo mantienen sus posiciones. Esto hace previsible la distribución, pero reduce la flexibilidad de la página para mostrar cada foto a un tamaño útil.

Elige imágenes que aporten información distinta

Entre dos y cuatro imágenes son un punto de partida práctico para resumir un proyecto. Asigna una función a cada una: una vista general sitúa el tema y un primer plano muestra una característica difícil de apreciar de otro modo. Dos vistas generales casi idénticas suelen aportar menos que una vista general acompañada de un detalle útil.

Busca iluminación y colores que encajen entre sí. En una comparación de antes y después, usa ángulos, encuadres y escalas similares para facilitar la evaluación del cambio. Evita recortes que oculten una diferencia importante. Nuestra guía para elegir imágenes para tu web explica qué debería comunicar cada imagen.

Elige una distribución adecuada para las imágenes

En la distribución de tres imágenes de Pixilo, la primera aparece grande a la izquierda y las otras dos se apilan a la derecha. Cambia el orden para decidir qué foto recibe más espacio. Una cuadrícula normal se llena de izquierda a derecha y después de arriba abajo. Las casillas vacías muestran el fondo elegido.

Adapta la forma del collage a sus marcos

La anchura y la altura del collage determinan la forma de los marcos interiores. Un collage cuadrado no siempre produce marcos cuadrados: con dos imágenes en paralelo, cada marco es vertical. Una cuadrícula de dos filas y dos columnas da marcos aproximadamente cuadrados si los espacios y márgenes son pequeños.

Para dos fotos verticales en paralelo, prueba un collage más alto para que cada marco siga siendo vertical. Un collage ancho y bajo recorta más por arriba y por abajo cuando rellenas los marcos. Para dos fotos horizontales en una fila, un collage más ancho puede conservar una mayor parte de cada escena.

Empieza por el espacio disponible en la página y prueba una distribución y una forma que encajen con las fotos. Si tu web exige una forma fija, mantenla y cambia la distribución o la selección de imágenes. En Pixilo, desbloquea las proporciones para cambiar la forma y vuelve a bloquearlas cuando quieras modificar el tamaño sin alterar las proporciones.

¿Mostrar la imagen completa o rellenar el marco?

Mostrar la imagen completa conserva todos los bordes, aunque puede dejar espacio alrededor. Es útil para logotipos, diagramas o fotos de productos en las que un recorte eliminaría información importante.

Rellenar el marco recorta la imagen para ocupar su espacio sin deformarla. Así se consigue una cuadrícula de bordes uniformes, pero hay que comprobar qué desaparece. Selecciona cada miniatura y ajusta la posición del recorte para mantener visible el tema importante.

Si en un marco no caben a la vez una cara y la actividad que ocurre al lado, prueba otra forma o distribución, muestra la imagen completa o elige otra foto. Desplazar el recorte no permite encajar toda una escena amplia en un marco estrecho. Usa primero la herramienta de recorte si quieres precisar el encuadre del original y comprueba después cómo encaja en el collage.

Separa las imágenes con espacios

Un espacio pequeño ayuda a distinguir las fotos contiguas. Un margen exterior enmarca el collage, pero también resta espacio a las imágenes. Mantén ambos moderados si el collage aparece en una columna estrecha. Se reducen junto con la imagen cuando esta se muestra más pequeña.

Elige un fondo que encaje con las fotos y con la página. Aparece en los espacios, los márgenes y las zonas que dejan libres las imágenes que no rellenan sus marcos. Cambiar el color o elegir transparencia no elimina un fondo que ya forme parte de una foto.

Combina las imágenes con Pixilo

1. Abre la herramienta para combinar imágenes y elige tus archivos JPG, PNG o WebP.
2. Selecciona la distribución y usa las flechas bajo las miniaturas para cambiar el orden.
3. Establece la anchura y la altura de todo el collage, incluidos los espacios y el margen exterior.
4. Muestra cada imagen completa o rellena su marco. Si usas recortes, selecciona cada miniatura y ajusta su posición. Los controles deslizantes solo están disponibles en las direcciones en las que se recorta la imagen.
5. Configura los espacios, el margen exterior y el color o la transparencia del fondo.
6. Descarga el PNG, revisa su calidad y prepara la versión que publicarás.

Puedes usar Añadir imágenes sin perder el orden, los recortes ni los ajustes existentes. Cambiar imágenes sustituye la selección. La distribución de una imagen grande y dos pequeñas requiere exactamente tres imágenes; añadir una cuarta cambia la distribución a una cuadrícula.

Ejemplo: cuatro fotos de una cocina terminada

Una empresa de reformas quiere presentar un resumen visual en la página de un proyecto. Elige una vista general, el interior de un armario de almacenaje, un detalle de la encimera y las luces sobre ella. Cada foto muestra un aspecto distinto del mismo trabajo terminado.

La empresa empieza con una cuadrícula de 2 × 2 para mostrar los cuatro aspectos. Si la vista general fuera el principal argumento de venta, la distribución de tres imágenes podría darle más espacio, con dos detalles al lado y la cuarta foto en otro lugar de la página.

La página muestra el collage con una anchura máxima de 600 píxeles. Para este ejemplo, expórtalo a 1200 × 800 píxeles, con espacios de 16 píxeles, un margen exterior de 24 píxeles y fondo blanco. El archivo tiene el doble de anchura que la visualización para ofrecer más detalle en pantallas de mayor densidad de píxeles. Son ajustes de ejemplo, no un tamaño obligatorio para todas las webs. Nuestra guía de tamaños de imagen para sitios web explica cómo elegir las dimensiones para tu página.

Rellena los marcos y coloca primero la vista general, seguida del armario, la encimera y la iluminación. Ajusta cada recorte para mostrar la característica que la foto debe explicar.

Al mostrarse con 360 píxeles de anchura en un móvil, cada foto mide solo unos 170 píxeles de ancho. El armario y las luces siguen siendo reconocibles, pero supongamos que la junta de la encimera queda demasiado pequeña para valorarla. Saca esa foto del collage y muéstrala por separado a mayor tamaño. Reorganiza las otras tres dando protagonismo a la vista general. Aumentar solo las dimensiones de exportación no daría más espacio a la junta en la página.

Comprueba el collage en la versión móvil de la página

Previsualiza la página a anchuras de ordenador y móvil sin ampliar. Comprueba qué se entiende realmente: ¿se pueden comparar dos acabados, ver el almacenaje o seguir la secuencia? Reconocer el tema general no basta si el detalle útil ha desaparecido.

Revisa la imagen dentro de la página, no solo el archivo descargado. El tema de tu web puede aplicar un recorte adicional para ajustarla a una zona de imagen fija. Cambia esa zona o sus ajustes si corta parte del collage.

Si la distribución queda demasiado apretada, simplifícala o muestra las imágenes por separado. Si tu creador de sitios permite usar otra imagen para móvil, prepara una versión con menos fotos o una distribución vertical. Nuestra guía de imágenes adaptables explica este método.

Mantén los títulos y las indicaciones esenciales como texto de la página. El texto dentro de una imagen se reduce con ella y resulta más difícil de actualizar. Añade los pies de foto explicativos en el editor de tu web.

Añade un pie de foto y un texto alternativo útil

Un pie de foto puede identificar el proyecto y explicar el orden. Para la cuadrícula de cocina: «Reforma de cocina terminada. Desde arriba a la izquierda, en sentido horario: vista general, almacenaje extraíble, iluminación de la encimera y detalle de la encimera». Ajusta la descripción si mueves o eliminas alguna foto.

Un collage informativo exportado como un archivo necesita un texto alternativo para el conjunto. En este caso podría ser: «Cocina reformada con almacenaje extraíble, una junta enrasada en la encimera y luces sobre la zona de trabajo». Describe lo importante en lugar de escribir solo «Collage de cuatro fotos».

Si las imágenes explican una comparación detallada, presenta las diferencias principales en el texto cercano, en vez de intentar incluir toda la explicación en el texto alternativo. Las indicaciones del W3C sobre imágenes complejas explican cómo combinar una alternativa breve con una descripción más amplia. Nuestra guía de textos alternativos y nombres de archivo ayuda a escribir descripciones adecuadas para la página.

Prepara el archivo para tu web

Pixilo guarda el collage como PNG, conserva la transparencia y no añade compresión con pérdida al exportarlo. Esto no recupera detalles ausentes en las fotos originales. Una imagen pequeña puede perder nitidez al ampliarla para llenar el marco, sobre todo tras un recorte ajustado. Examina cada foto del collage descargado; si una resulta mucho menos nítida que las demás, usa un original más grande o un marco más pequeño.

Un collage compuesto principalmente por fotografías puede producir un PNG grande. Usa PNG a WebP o, si no necesitas transparencia, PNG a JPG para crear una copia para la web. Compara su tamaño y su calidad visible con el PNG. Revisa los detalles finos y los bordes al ajustar la calidad: el archivo más pequeño no sirve si oculta la característica que quieres mostrar.

Si el fondo de la página debe verse a través de la imagen, conserva una versión con transparencia. JPG no la admite. Nuestra guía de formatos de imagen para la web explica las opciones con más detalle.

Sube la versión elegida y confirma que la página utiliza el archivo y las dimensiones previstos. Conserva las fotos originales para futuros cambios: no puedes reorganizar las fotos dentro del PNG descargado.