Contenido 14 secciones
- ¿Qué son los ajustes de medios?
- ¿Para qué sirven los ajustes de medios?
- ¿Por qué son importantes los ajustes de medios?
- ¿Cómo se configuran los ajustes de medios en Faprika?
- ¿Qué son el ancho y el alto del lienzo?
- ¿Para qué sirve el campo CDN?
- ¿Por qué el cambio de ajustes se aplica solo a los productos nuevos?
- ¿Cuántos píxeles necesita una imagen para caber en un recuadro?
- Errores más frecuentes en los ajustes de medios
- Tabla de solución de problemas de los ajustes de medios
- Lista de comprobación de los ajustes de medios
- ¿Cuándo conviene revisar de nuevo los ajustes de medios?
- Ajustes de medios con Faprika
- Preguntas frecuentes
Pasó horas fotografiando el producto en el estudio y lo subió al panel, pero en el escaparate se ve borroso, en el carrito aparece enorme o en la página de producto se ve recortado. Por bueno que sea el producto, la primera impresión la da la imagen: el cliente no confía en una foto borrosa ni espera en una página que carga con lentitud. La mayoría de las veces el problema no está en la foto, sino en los ajustes que determinan en qué tamaños y con qué calidad se muestra esa foto en el sitio.
En esta guía abordamos los ajustes de medios a partir de la pantalla real del panel de Faprika: para qué sirve cada tamaño de imagen (pequeño, mediano y grande), qué determinan el ancho y el alto del lienzo, qué se escribe en el campo CDN y por qué un cambio se aplica únicamente a los productos nuevos. Más allá del panel, ofrecemos también una herramienta práctica que calcula cuántos píxeles necesita una imagen para ajustarse a su contenedor y una lista de comprobación de ocho puntos. La preparación de la foto, su redimensionado y su nomenclatura se tratan en artículos aparte: optimización de imágenes de producto y subida masiva de imágenes de producto. Aquí nos centramos solo en configurar correctamente los ajustes de medios en el panel.
¿Qué son los ajustes de medios?
Los ajustes de medios determinan en qué medidas en píxeles y con qué calidad se guardan y se muestran en el sitio las imágenes subidas al panel. Desde esta sección gestiona las dimensiones y la resolución del lienzo donde se alojan las imágenes, es decir, sus proporciones en píxeles.
En Faprika, estos ajustes están en el panel de control, en la ruta Configuración > Ajustes > Ajustes de medios. La pantalla incluye tres tamaños de imagen (pequeño, mediano y grande), dos medidas de lienzo (ancho y alto) y un campo CDN. Estos seis campos son los controles básicos que determinan cómo mostrará su sitio las imágenes de producto.
Le recomendamos leerFormación sobre la gestión de los ajustes de medios¿Para qué sirven los ajustes de medios?
Los ajustes de medios sirven para mostrar cada imagen en el tamaño adecuado al lugar donde se usa. Cuando sube una imagen al panel, el sistema la convierte y la guarda en tres tamaños y calidades distintos; estos ajustes determinan cuántos píxeles tendrá cada uno.
En la práctica, esto significa que la misma foto aparece en su sitio en tres lugares distintos y con tres tamaños distintos: en la pequeña vista previa del carrito, en la cuadrícula de productos de la página de categoría y en la página de detalle del producto. Usar el mismo archivo en los tres obliga a sacrificar velocidad o nitidez. Mostrar un archivo grande en un contenedor pequeño vuelve la página innecesariamente pesada; mostrar uno pequeño en un contenedor grande genera borrosidad. Tres tamaños distintos resuelven este dilema.
El caso en el que este ajuste resulta más útil es cuando su foto original es de alta resolución, pero en el panel se ve con baja calidad. En ese caso no necesita volver a fotografiar; la mayoría de las veces basta con aumentar el valor en píxeles del tamaño correspondiente.
¿Por qué son importantes los ajustes de medios?
Los ajustes de medios son importantes porque la imagen del producto es el elemento principal en el momento de decisión en el comercio electrónico, y que la imagen sea nítida y cargue rápido influye directamente en las ventas. El cliente no puede tocar el producto; lo mira. Lo cómoda que resulte esa mirada depende de lo nítida y lo rápida que llegue la imagen.
Destacan tres motivos:
- Confianza. Una foto borrosa o pixelada despierta dudas sobre la calidad del producto y de la tienda.
- Velocidad. Cada imagen suma peso a la página; los archivos más grandes de lo necesario ralentizan su carga. Para conocer la relación entre velocidad y ventas, consulte el artículo por qué importa la velocidad del sitio en el comercio electrónico.
- Coherencia. Cuando en la página de categoría los productos aparecen en el mismo marco y con el mismo tamaño, la tienda se ve ordenada; la medida del lienzo es lo que lo logra.
En las tiendas con mucho tráfico móvil el tema cobra aún más importancia, porque la pantalla del teléfono es pequeña y la conexión suele ser más débil que en el escritorio. Para el comportamiento general en el teléfono, e-ticaret sitesinde mobil uyumun önemi es un buen complemento.
¿Cómo se configuran los ajustes de medios en Faprika?
En Faprika, los ajustes de medios se configuran en el panel de control, en la ruta Configuración > Ajustes > Ajustes de medios. La pantalla incluye tres tamaños de imagen, el ancho del lienzo, el alto del lienzo y el campo CDN; ajuste cada uno según sus necesidades y guarde.
Para avanzar paso a paso, siga este orden:
- En el panel de control, acceda a la pantalla Configuración > Ajustes > Ajustes de medios.
- Determine qué imagen se ve borrosa o más grande de lo necesario y en qué pantalla; localice el campo de tamaño correspondiente.
- Edite el valor en píxeles de ese campo según su necesidad.
- Compruebe si la medida del lienzo se corresponde con la proporción de sus productos.
- Si utiliza un CDN, introduzca su dirección en el campo CDN.
- Guarde y pruebe el resultado en las tres pantallas subiendo un producto nuevo.
El sexto paso es crítico: los ajustes se aplican únicamente a los productos que se añadan a partir de ese momento; por eso, para ver el efecto debe añadir un producto nuevo. Volvemos sobre este tema en una sección aparte.
Tamaño de imagen pequeña
El tamaño de imagen pequeño determina las imágenes que aparecen en la vista previa del carrito y en las pantallas de finalización del pedido. En estas pantallas el producto aparece en un pequeño recuadro meramente informativo; el cliente no examina el producto con esa foto, solo confirma que ve el producto correcto en su carrito.
Por eso no tiene sentido mantener este tamaño más grande de lo necesario. Pero reducirlo en exceso tampoco es buena idea: en teléfonos y pantallas de alta densidad, una imagen diminuta se ve suave y apagada al ampliarse al recuadro. El valor adecuado es un múltiplo de la medida real del recuadro en el carrito; la herramienta que aparece a continuación le ayuda a calcularlo.
Tamaño de imagen mediana
El tamaño de imagen mediano determina las imágenes de la vista de escaparate y de las pantallas de listado de categorías. Es uno de los lugares donde el cliente pasa más tiempo: navega entre productos y, la mayoría de las veces, decide en cuál hacer clic mirando la imagen.
En la página de categoría se cargan decenas de imágenes a la vez. Por eso el tamaño mediano debe ser nítido y a la vez comedido: si la nitidez es insuficiente, la tienda parece descuidada; si el tamaño es innecesariamente alto, la página se vuelve pesada. Cuando quiera mejorar la calidad de las imágenes, este suele ser el primer campo que debe revisar.
Tamaño de imagen grande
El tamaño de imagen grande determina la calidad de visualización en la página de detalle del producto. Es donde el cliente mira el producto de más cerca: examina la textura, el detalle, el color, y quizá lo amplía. La decisión de compra suele depender del poder de persuasión de esta imagen.
En la página de detalle se cargan unas pocas imágenes de un solo producto, no decenas como en la página de categoría. Por eso se puede ser más generoso con el tamaño grande. Aun así, hay un límite superior: un archivo enorme que no cabe en la pantalla no aporta nitidez adicional y solo alarga el tiempo de carga.
| Ajuste | ¿Dónde aparece? | ¿Para qué se ajusta? |
|---|---|---|
| Tamaño de imagen pequeña | Vista previa del carrito, finalización del pedido | Que la imagen del recuadro pequeño se mantenga nítida |
| Tamaño de imagen mediana | Vista de escaparate, listado de categorías | Calidad de la imagen en la cuadrícula de productos |
| Tamaño de imagen grande | Página de detalle del producto | Calidad de visualización en la página de detalle |
| Ancho del lienzo | Los marcos en los que se alojan los productos | El ancho del marco |
| Alto del lienzo | Los marcos en los que se alojan los productos | El alto del marco |
| CDN | La dirección desde la que se cargan las imágenes | Carga más rápida de las imágenes |
¿Qué son el ancho y el alto del lienzo?
El ancho y el alto del lienzo son las medidas del marco en el que se alojan los productos. Independientemente de la imagen en sí, con estos dos campos determina el ancho y el alto del espacio donde se colocará el producto.
Piense en el lienzo como en un marco de fotos: sea como sea la foto, la medida del marco es fija. Cuando en la página de categoría todos los productos están en un marco de la misma medida, la cuadrícula se ve ordenada; si los marcos fueran distintos entre sí, las filas se desordenarían. Por eso la medida del lienzo es una parte silenciosa pero poderosa del orden visual de la tienda.
Al elegir la medida del lienzo, tenga en cuenta dos cosas. La primera es la proporción de sus fotos de producto: si fotografía sobre todo en vertical, un marco horizontal deja demasiado espacio vacío, y lo contrario comprime el producto. La segunda es usar la misma proporción de toma en todos los productos: las fotos con proporciones mezcladas dejan demasiado espacio vacío en algunos productos, sea cual sea el lienzo. Para lograr esta coherencia en la fase de fotografía, le ayuda el flujo de trabajo de la guía de subida masiva de imágenes de producto.
¿Para qué sirve el campo CDN?
El campo CDN (red de distribución de contenido) es el lugar donde introduce la dirección del servicio CDN que utilice, si lo hay, para que las imágenes se carguen más rápido. Una red de distribución de contenido busca acortar el tiempo de carga entregando los archivos al visitante desde servidores más cercanos.
Este campo es opcional. Si no utiliza ningún CDN, déjelo vacío. Si lo utiliza, es imprescindible escribir bien la dirección: una dirección incorrecta puede hacer que las imágenes no se carguen en absoluto. Por eso, después de añadir la dirección del CDN, abra su sitio de inmediato y compruebe que las imágenes llegan. Para conocer la lógica general del CDN y otras medidas de velocidad, el artículo sobre la velocidad del sitio es un buen punto de partida.
Le recomendamos leer¿Por qué es importante la velocidad del sitio en el comercio electrónico?¿Por qué el cambio de ajustes se aplica solo a los productos nuevos?
Los cambios en los ajustes de lienzo y de tamaño se aplican únicamente a los productos que se añadan a partir de ese momento, porque la imagen se convierte y se guarda en las medidas correspondientes en el instante en que se sube al panel. Las imágenes de los productos que ya están en el panel se generaron con los ajustes anteriores y este cambio no las afecta.
La advertencia clara de la formación es esta: si desea cambiar las medidas de los productos existentes, debe eliminarlos y volver a subirlos. En la práctica, esto tiene dos consecuencias:
- Configure el ajuste antes de subir los productos. Si está montando una tienda nueva o va a empezar una subida masiva de productos, edite primero los Ajustes de medios. Corregirlo después significa volver a subir todos los productos ya cargados.
- Para los productos existentes, pruebe primero con uno solo. No elimine ni suba cientos de productos sin estar seguro de que el nuevo valor funciona. Vuelva a subir primero un producto, vea el resultado en las tres pantallas y después tome su decisión.
Eliminar y volver a subir puede afectar a otra información vinculada al producto; por eso planifique la operación. Aclare de antemano cómo se conservarán la información del producto, el código de stock y el orden de las imágenes. Para conocer la vía segura de la operación masiva, puede seguir los pasos del artículo sobre la subida masiva de imágenes de producto.
Le recomendamos leer¿Cómo optimizar las imágenes de producto?¿Cuántos píxeles necesita una imagen para ajustarse a su contenedor?
El ancho que necesita una imagen para verse nítida es el producto del ancho del contenedor en pantalla por la densidad de píxeles de la pantalla. En una pantalla de alta densidad, un píxel se dibuja con más de un punto físico; por eso, aunque el contenedor se vea de 300 píxeles de ancho, pide una imagen de 600 píxeles.
Conocer este cálculo es la forma más sólida de elegir qué valor escribir en los ajustes de medios. La herramienta siguiente toma tres valores: el ancho del contenedor en pantalla, el multiplicador de densidad de la pantalla de destino y el ancho de la imagen que ha configurado en el panel o ha subido. Como resultado, indica el ancho necesario y si la imagen es suficiente.
Al usar la herramienta, tenga presentes tres puntos. Primero, el cálculo se basa en el ancho del contenedor en pantalla; en el carrito, en la página de categoría y en la página de detalle los anchos son distintos, introduzca un valor para cada uno. Segundo, cuando la imagen supera varias veces el ancho necesario, la nitidez no aumenta, solo crece el archivo. Tercero, en la pantalla más ancha y en el teléfono la medida del contenedor puede ser distinta; mire ambos y decida según el mayor.
Los errores más frecuentes en los ajustes de medios
Los errores más frecuentes en los ajustes de medios son dejar los tamaños más grandes o más pequeños de lo necesario, hacer el ajuste después de subir los productos y probar el cambio en una sola pantalla. La mayoría nace no de la pantalla de ajustes, sino de no mirar el resultado del ajuste en el lado del cliente.
Poner todo al valor máximo
Mantener los tres tamaños altos «por si acaso» resulta tentador. Pero mostrar una imagen de alta resolución en el pequeño recuadro del carrito solo sirve para ralentizar la página. Ajuste cada tamaño según el recuadro en el que se usa.
Olvidar la imagen pequeña
Es un error habitual dedicarse a las imágenes de escaparate y de detalle y saltarse la imagen pequeña de las pantallas de carrito y pedido. El cliente mira esta pequeña imagen en el momento más cercano al pago; que se vea borrosa daña la confianza justo entonces.
Cambiar el ajuste después de subir los productos
Como el ajuste se aplica solo a los productos nuevos, cambiar el valor después de subir miles de productos no corrige nada: los productos existentes se quedan como estaban. El ajuste de medios forma parte de la preparación previa a la subida de productos.
No adaptar la proporción del lienzo a la de los productos
Mantener el marco horizontal cuando los productos están fotografiados en vertical hace que las imágenes queden pequeñas y con un amplio espacio vacío alrededor. La proporción de la toma y la del lienzo deben coincidir.
Probar solo en el escritorio
Una imagen que se ve nítida en el escritorio puede verse suave en un teléfono de alta densidad. Tras el cambio, mire siempre también desde el teléfono.
Guardar la dirección del CDN sin verificarla
Una dirección de CDN mal escrita puede hacer que las imágenes no se muestren. Después de guardar la dirección, abra tres pantallas y compruebe que las imágenes aparecen.
Buscar el problema en los ajustes y pasar por alto el archivo original
Si la fotografía original ya tiene baja resolución, ningún ajuste puede hacerla más nítida. Por mucho que aumente el tamaño de la imagen grande, un archivo pequeño no producirá una imagen grande y nítida. Primero asegúrese de que el original sea lo bastante grande.
Okumanızı öneririzE-Ticaret Sitesinde Mobil Uyumun ÖnemiTabla de solución de problemas de los ajustes de medios
La mayoría de los problemas en los ajustes de medios se pueden dirigir al área correcta según el síntoma. La tabla siguiente resume qué ajuste revisar para cada síntoma.
| Síntoma | Causa probable | Ajuste que revisar |
|---|---|---|
| La imagen se ve borrosa en el carrito | El tamaño de la imagen pequeña es bajo | Tamaño de imagen pequeña |
| Los productos se ven borrosos en la página de categoría | El tamaño de la imagen mediana es bajo | Tamaño de imagen mediana |
| La imagen se ve suave en la página de detalle | El tamaño de la imagen grande es bajo o el original es pequeño | Tamaño de la imagen grande, archivo original |
| La página de categoría tarda en abrirse | El tamaño de la imagen mediana es mayor de lo necesario | Tamaño de imagen mediana |
| Los productos tienen huecos o aparecen recortados en el marco | La proporción del lienzo no coincide con la proporción de la toma | Ancho del lienzo, alto del lienzo |
| Las imágenes no aparecen en absoluto | La dirección de CDN es incorrecta | CDN |
| Cambié el ajuste y no pasó nada | El cambio solo se aplica a los productos nuevos | Pruebe con un producto nuevo; para los existentes, vuelva a cargarlos |
Conclusión de la tabla: primero fíjese en qué pantalla aparece el síntoma. La pantalla indica de inmediato qué ajuste de tamaño es el responsable.
Lista de comprobación de los ajustes de medios
La lista de comprobación de los ajustes de medios reúne los ocho puntos que debe repasar antes de publicar los ajustes y a intervalos regulares. La imagen y la herramienta siguientes presentan los mismos puntos de otra forma; la tabla ofrece la misma información en texto.
| Campo | Comprobación | ¿Hecho? |
|---|---|---|
| Archivo original | Fotografías con resolución suficientemente alta | Sí / No |
| Imagen grande | Nítida en la página de detalle | Sí / No |
| Imagen mediana | Nítida en el escaparate, página rápida | Sí / No |
| Imagen pequeña | Nítida en el carrito y la pantalla de pedido | Sí / No |
| Medida del lienzo | Coincide con la proporción del producto, sin recortes ni huecos | Sí / No |
| Campo CDN | Introducido correctamente o vacío | Sí / No |
| Prueba | Probado con un solo producto nuevo, también en el móvil | Sí / No |
| Productos existentes | Recarga planificada | Sí / No |
¿Cuándo conviene revisar de nuevo los ajustes de medios?
Los ajustes de medios deben revisarse de nuevo cuando cambia su diseño visual o su forma de fotografiar: cuando aplica un diseño nuevo, cuando cambia la proporción de las fotografías de producto, cuando pasa a tomas de mayor resolución o cuando nota que las imágenes se ven borrosas o pesadas. El ajuste no es algo que se hace una vez y se olvida; es una configuración que se actualiza a medida que crece la tienda.
Hay un punto que no hay que olvidar: cambiar el ajuste no convierte automáticamente los productos existentes. Por eso, planifique la decisión del cambio no solo según el ajuste, sino según los productos a los que llegará. Mantener el equilibrio entre calidad de imagen y velocidad es una ganancia constante, tanto en los resultados de búsqueda como en la experiencia del cliente.
Otros detalles relativos a la propia imagen, es decir, el nombre del archivo, el texto alternativo y la elección del formato, se explican en el artículo sobre la optimización de imágenes de producto. Si aplica ambos artículos a la vez, el ajuste del panel y la preparación de la imagen se complementan: uno determina en qué medidas se guarda la imagen y el otro, cuán bien se prepara esa imagen.
Los ajustes de medios con Faprika
En Faprika, los ajustes de medios se reúnen en una sola pantalla: Configuración > Ajustes > Ajustes de medios. Desde allí gestiona los tamaños de imagen pequeña, mediana y grande, el ancho y el alto del lienzo y el campo CDN. Como cada imagen cargada en el panel se guarda en tres tamaños, la misma fotografía se muestra en el carrito, en la página de categoría y en el detalle del producto con el tamaño adecuado a su contenedor.
Así puede mejorar la calidad de las imágenes desde el panel, sin tocar código y sin volver a fotografiar. Para saber cómo usar los ajustes de medios en su propio plan y qué posibilidades tendrá junto con otras funciones, puede consultar nuestros planes o solicitar una demo.
Preguntas frecuentes
¿Qué son los ajustes de medios?
Los ajustes de medios determinan en qué medidas en píxeles se guardan y se muestran en el sitio las imágenes subidas al panel. En Faprika constan del tamaño de imagen pequeña, mediana y grande, el ancho del lienzo, el alto del lienzo y el campo CDN.
¿Desde dónde se accede a los ajustes de medios en Faprika?
Se accede desde el panel de control por la ruta Configuración, Ajustes, Ajustes de medios. En la misma pantalla están los tres tamaños de imagen, las dos medidas del lienzo y el campo CDN.
¿Para qué sirven los tamaños de imagen pequeña, mediana y grande?
El tamaño de imagen pequeña determina las imágenes de la vista previa del carrito y de la pantalla de finalización del pedido; el de imagen mediana, la vista del escaparate y el listado de categorías; y el de imagen grande, la calidad de la imagen en la página de detalle del producto. La imagen subida al panel se guarda en estos tres tamaños.
¿Por qué la imagen que subí se ve borrosa en el panel?
Si la imagen original es de alta resolución pero se ve con baja calidad en el panel, es posible que el valor en píxeles del tamaño correspondiente se haya quedado bajo. Subir ese tamaño en Ajustes de medios suele resolver el problema. Si el archivo original ya es pequeño, el ajuste por sí solo no lo hará más nítido.
Cambié los ajustes de medios pero los productos antiguos no cambiaron, ¿por qué?
Los cambios en los ajustes de lienzo y tamaño se aplican solo a los productos que se añaden después; no afectan a las medidas de los productos ya existentes en el panel. Para modificar los productos existentes hay que eliminarlos y volver a subirlos. Probar primero con un solo producto es el camino más seguro.
¿Es obligatorio rellenar el campo CDN?
No. Si utiliza un servicio CDN para que sus imágenes se carguen más rápido, introduzca su dirección en este campo; si no lo usa, se deja vacío. Tras introducir la dirección, compruebe siempre que las imágenes aparecen en el sitio.
