**Para uso web se recomienda subir imágenes con:** - Ancho máximo: entre 1.200 y 2.000 píxeles - Resolución: 72 dpi - Peso orientativo: preferiblemente menos de 500 KB por imagen (salvo casos muy concretos)
Cuando se **sube una imagen** al sistema, esta se **almacena en su tamaño original en el servidor**. A partir de esa imagen original, la aplicación **genera automáticamente las versiones necesarias** para mostrarse en los diferentes lugares de la página (por ejemplo, miniaturas, listados o sliders). Las dimensiones de cada tipo se definen en la pestaña **“Tamaños de imágenes”**, dentro del menú **Apariencia**.Si la imagen original llegara a faltar en el sistema, es posible que las versiones generadas sigan mostrándose temporalmente. Sin embargo, al solicitar una **regeneración de imágenes**, estas copias se perderán al no disponer de un archivo de origen desde el que reconstruirse.
##### **Configuración general** En la sección de **Gestor → Ajustes → Imágenes**, se definen los diferentes **tipos de imagen**, indicando sus dimensiones (ancho y alto), si se **rellena** el espacio, si lleva **marca de agua**, y cuál de ellas está marcada **por defecto**.La imagen de tipo **“list”** debe estar establecida como por defecto.
**Ejemplo de tipos configurados:**| Nombre | Ancho en px | Alto en px | Por defecto | Llenar | Marca de agua |
|---|---|---|---|---|---|
| thumb | 80 | 80 | No | ✔️ | ❌ |
| list | 300 | 200 | Sí | ✔️ | ❌ |
| preview | 550 | 350 | No | ✔️ | ❌ |
| slider | 872 | 403 | No | ✔️ | ❌ |
El tamaño de ancho y alto se especifica en pixeles.
##### ##### **1. Identificación del tipo de imagen que se está mostrando** Para reconocer qué tipo de visualización se está utilizando en una página, puedes **inspeccionar la imagen** con las herramientas de desarrollador del navegador. El nombre del tipo aparece en la clase del elemento, por ejemplo: `div.image.gallery-image-thumb` ##### ##### **2. Tipos de presentación de imágenes existentes** 1\. Thumb. Se usa para los listados o secciones del gestor en las que las imágenes se muestran en tamaño pequeño. 2\. List. Se utiliza en las vistas públicas donde las imágenes se muestran en tamaño medio, como en los editores de imágenes de las características o en miniaturas visuales de productos. 3\. Preview. Se aplica en las imágenes asociadas a valores de características u otros elementos que requieren una vista previa intermedia. 4\. Slider. Corresponde al carrusel de imágenes de la ficha de producto, donde se muestran imágenes grandes y de mayor calidad. ##### ##### **3. Recomendaciones** - Evitar eliminar tipos de imagen si ya están en uso. - Si se modifican las dimensiones de los tipos, es necesario **regenerar las imágenes** para aplicar los nuevos tamaños. - Conservar siempre la **imagen original**, ya que es la base para regenerar el resto de formatos. El maquetador Builder dispone de un gestor de imágenes. Mediante este sistema se pueden subir imágenes para luego ser mostradas en otras secciones de la tienda mediante la url absoluta de la imagen. Como por ejemplo; la publicidad del Kit Digital. [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/ZTqimage.png) # C2. Subida de imágenes por administrador - Imágenes ##### **1. El sistema de subida de imágenes en general** Es reconocible por presentar esta interfaz. [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/DqZimage.png) Presenta un botón de tipo texto llamado "Editar imágenes". Y previsualización de las imágenes subidas. Al hacer clic en el botón se accede a la interfaz de edición de subida y gestión de imágenes por el administrador para presentar en la tienda. [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/RgOimage.png)| **Elemento** | **Función** |
| botón con icono [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/XNSimage.png) | Abre el explorador del dispositivo para seleccionar y cargar la imagen. No requiere guardado. |
| Visualización de imágenes subidas | Espacio en el que se visualiza miniatura de la imagen subida. Al poner el cursor encima de una de las miniaturas mostrará en el espacio izquierdo la imagen en mayor tamaño. |
| [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/bcOimage.png) | |
| Imagen con marco azul turquesa | Destaca la imagen definida como por defecto. Es la que se mostrará en diferentes tamaños de visualización. Como por ejemplo; en el listado del producto del gestor (thumb), en la vista de los productos en la categoría, (list) entre otros. Para definir la imagen por defecto se presenta un icono de estrella. Este icono aparece al poner el cursor sobre la miniatura de la visualización de la imagen. Al hacer clic en él se establece la imagen como por defecto. Para eliminar la imagen aparece un icono de cubo de basura que actúa como botón para la acción. [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/bCLimage.png) |
| Previsualización de imágenes | Además de permitir previsualizar las imágenes subidas permite ordenar la posición en la que aparecen. Con clic en la imagen, mantener y arrastrar se puede cambiar la posición de las imágenes. En el orden en el que están será en el orden que se verán. Salvo la definida como por defecto que en otros modos de presentación será la que se muestre independientemente de la posición en la que esté en la previsualización. |
| Campo texto alternativo | El editor de texto para la etiqueta ALT permite añadir o modificar el texto alternativo de una imagen. Este texto describe brevemente el contenido o la función de la imagen, y se utiliza cuando la imagen no puede mostrarse o para mejorar la accesibilidad y el posicionamiento SEO del sitio web. En el editor puedes escribir una descripción corta, precisa y relevante del elemento mostrado, como por ejemplo: *“Fotocopias en blanco y negro" o "Pedidos online de fotocopias”*. [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/byrimage.png) |
| **Elemento** | **Función** |
| Botón con icono [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/J8kimage.png) | Acceder al buscador de imágenes en el gestor de archivos. [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/iMEimage.png) |
| Botón icono [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/lJGimage.png) | Para crear carpetas para tener organizados los archivos subidos. Se recomienda nombrar las carpetas y archivos en formato\_camello. [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/kJNimage.png) |
| Botón icono [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/svgimage.png) | Para eliminar imágenes subidas. [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/V2Bimage.png) |
| Botón icono [](https://kb.wakaprint.com/uploads/images/gallery/2026-01/xGMimage.png) | Para subir imagen |
| **Elemento** | **Función** |
|---|---|
| Crear nuevo tamaño | Permite definir y añadir un nuevo formato de imagen personalizado al sistema, especificando dimensiones y opciones. |
| Indicador de cantidad de elementos | Muestra el número total de tamaños configurados y los que se están visualizando dentro de la tabla. |
| Icono de filtro | Permite filtrar o localizar tamaños de imagen específicos dentro de la tabla. |
| Tabla de tamaños de imagen | Muestra la lista de todos los tamaños de imagen configurados y sus características principales. |
| Nombre | Identifica cada tamaño de imagen mediante una etiqueta única para su gestión y uso en el sistema. |
| Ancho | Define la dimensión horizontal en píxeles de la imagen generada. |
| Alto | Define la dimensión vertical en píxeles de la imagen generada. |
| Por defecto | Indica si el tamaño es el principal o predeterminado que utilizará el sistema. Ha de estar marcada la de tipo "List". |
| Llenar | - Si está activo la imagen se ajustará completamente al tamaño definido, pudiendo implicar recorte de parte de la imagen si la subida no es proporcional al tamaño definido en Ajustes > Apariencia > Tamaños de imágenes . - Desactivar para que si la imagen que se sube no es proporcional al tamaño definido en Ajustes > Apariencia > Tamaños de imágenes, añada espacio en blanco en los lados en los que no llega la imagen a llenar el contenedor de su visualización. Cuando se modifica el estado de activado a desactivado y viceversa requiere regenerar imágenes para que se apliquen los cambios. |
| Marca de agua | Permite activar o desactivar la aplicación automática de una marca de agua sobre la imagen generada. |
| Ver | Permite consultar la configuración específica del tamaño de imagen seleccionado. |
| Menú de acciones. Flecha del botón VER | Proporciona acceso a opciones adicionales como editar o eliminar el tamaño de imagen. 1. Actualizar 2. Eliminar |
| Sección Regenerar imágenes | Al aplicar nuevas dimensiones o ajustes permite volver a generar imágenes existentes según los tamaños configurados. |
| Selector Tipo | Permite elegir entre regenerar las imágenes de las imágenes de un producto concreto, o imágenes de todos los productos de la tienda o las imágenes de una categoría. [](https://kb.wakaprint.com/uploads/images/gallery/2026-02/oDUimage.png) |
| Selector tamaño de imagen | Permite seleccionar un tamaño específico para regenerar las imágenes. Si se quieren regenerar todos los tipos no seleccionar ninguna opción. Entre el selector anterior y éste se puede definir en qué productos y qué tipo de imágenes se van a regenerar. [](https://kb.wakaprint.com/uploads/images/gallery/2026-02/BKpimage.png) |
| Botón REGENERAR | Ejecuta el proceso de regeneración de imágenes con las opciones seleccionadas. [](https://kb.wakaprint.com/uploads/images/gallery/2026-02/kEgimage.png) |
| Ver log de la última generación | Permite consultar el historial o resultado del último proceso de regeneración. |
No modificar los nombres los tamaños creados por defecto ya que pueden ocasionar pérdida de funcionalidades básicas.
##### **Recomendación optimizada por cada tamaño**| Tamaño | Dimensiones ancho x alto | Peso recomendado | Peso máximo | Formato recomendado |
|---|---|---|---|---|
| thumb | 100 × 100 px | 5–15 KB | 25 KB | JPG, PNG |
| list | 300 × 286 px | 15–40 KB | 60 KB | Jpg, PNG |
| preview | 550 × 350 px | 30–80 KB | 120 KB | Jpg, PNG |
| slider | 1000 × 462 px | 80–180 KB | 250 KB | JPG, PNG |
| Elemento | Función |
|---|---|
| REGENERAR IMÁGENES | Título de la sección desde la que se ejecuta el proceso de regeneración de imágenes. |
| Texto informativo “Este proceso regenerará todas las imágenes” | Informa de que la acción afectará a todas las imágenes asociadas al proceso seleccionado. |
| Selector “Tipo” | Permite seleccionar el tipo de imágenes o categoría sobre la que se ejecutará la regeneración. Se explica en el punto 1.4. |
| Selector “Seleccionar un tamaño de imagen” | Permite elegir el tamaño de imagen que se regenerará. Se explica en el punto 1.5 |
| Botón “REGENERAR” | Ejecuta el proceso de regeneración de imágenes con las opciones seleccionadas. |
| Enlace “VER LOG DE LA ÚLTIMA GENERACIÓN” | Permite consultar el registro o historial de la última regeneración realizada, incluyendo posibles errores o resultados del proceso. |