Tutoriales

Imágenes de Producto Transparentes: Por Qué un PNG Todavía Muestra un Fondo Blanco

Diagnostique fondos PNG opacos, previsualice superficies y cambios de exportación, luego prepare un recorte de producto que funcione en su contexto de entrega real.

Una bolsa de lona azul cobalto, muestras de color azul y una fotografía de producto a juego.

Un PNG puede admitir transparencia sin contener realmente un fondo transparente. Si la imagen de su producto muestra un rectángulo blanco, primero verifique si ese blanco es parte de los píxeles, parte de la interfaz de previsualización o un fondo añadido durante la exportación o entrega. Cada causa necesita una solución diferente; cambiar la extensión del nombre de archivo no eliminará un fondo.

La comparación de JPEG y PNG de Adobe explica el diferente soporte de transparencia de los formatos. Utilice esa distinción para inspeccionar el archivo mismo antes de culpar al sitio web o repetir el paso de eliminación de fondo.

Diagnostique el rectángulo antes de editar la imagen

Coloque la imagen sobre dos fondos visiblemente diferentes en un editor o página de prueba. Un área realmente transparente revela ambos fondos. Un área blanca incrustada en la imagen permanece blanca. Verifique el contorno completo, incluido el espacio entre un asa y su cuerpo o entre dos correas.

Lo que veExplicación probable a verificarSiguiente acción
Rectángulo blanco en cada fondoPíxeles blancos opacosEnmascare o elimine el fondo, luego exporte con transparencia
El color circundante cambia con la páginaTransparencia realAjuste el fondo de la página si la composición lo requiere
El tablero de ajedrez permanece visible en todas partesUna imagen de tablero de ajedrez se guardó como píxelesVuelva a la fuente y cree transparencia real
Franja pálida alrededor del productoLos píxeles del borde retienen el fondo antiguoRefine la máscara e inspeccione en superficies claras y oscuras
La fuente es transparente, la imagen entregada es opacaTransformación de exportación o entregaCompare el archivo subido con el archivo que sirve la página

Estas son posibilidades de diagnóstico, no una afirmación de que cada tienda utiliza la misma cadena de procesamiento de imágenes.

Mantenga una fuente limpia y una copia para entrega

Para una bolsa de lona azul ficticia, conserve una fuente con el producto intacto y una máscara reversible. Cree copias para entrega a partir de esa fuente en lugar de eliminar repetidamente el fondo de una exportación ya aplanada.

Inspeccione asas, costuras y bordes de tela a un nivel de zoom útil. El objetivo es un contorno creíble, no un corte mecánicamente duro. La tela suave puede tener un borde más suave que una hebilla de metal. Evite borrar detalles finos del producto simplemente para obtener una silueta perfectamente limpia.

Nombre las copias según su uso previsto, como un recorte transparente y una imagen de catálogo con fondo crema. Una imagen de catálogo con fondo blanco puede ser completamente correcta; el problema es confundirla con un recorte reutilizable.

Verifique lo que realmente sirve el destino

Suba una imagen de prueba antes de procesar una gran colección. Vea su tarjeta de producto y página de detalles, luego compare el archivo mostrado con su original si el resultado cambia. Diferentes recortes, fondos y transformaciones de imagen pueden ocurrir en un flujo de trabajo de entrega.

La documentación de medios de producto de Shopify describe los medios admitidos y el manejo de imágenes para esa plataforma. Siga los requisitos actuales de su propio destino en lugar de asumir que un formato aceptado por un servicio se conservará idénticamente en todas partes.

Si la fuente muestra transparencia pero el destino es blanco, decida si el resultado es realmente indeseable. Un tema de tienda con un área de imagen blanca puede estar mostrando la imagen transparente correctamente. Se convierte en un problema cuando el mate rectangular es visible contra otro color de página o impide el diseño previsto.

Conserve la sombra intencionalmente

Una sombra puede ayudar a que un producto aislado se sienta anclado. Decida si pertenece al recorte reutilizable o a la escena final. Una sombra fuerte generada para una luz lateral izquierda puede verse mal cuando se coloca sobre un fondo iluminado desde el lado opuesto.

Para el ejemplo de la bolsa, prepare un recorte de producto limpio para una composición flexible, y añada o solicite una sombra consistente con la escena al producir el anuncio final. Si mantiene una sombra suave en la exportación transparente, pruebe su borde en fondos claros y oscuros.

La transparencia no es lo mismo que hacer opaco un producto de vidrio y eliminar todo lo que lo rodea. Los objetos transparentes pueden contener reflejos y color de fondo transmitido. Estos requieren un enfoque de retoque o composición más deliberado que una simple silueta exterior.

Use un recorte como referencia, luego juzgue el anuncio completo

Añada la referencia de la bolsa a Panelly Studio y especifique la identidad del producto que desea conservar: lona azul, forma del asa, costuras y cualquier etiqueta suministrada. Describa el entorno final directamente. El anuncio terminado de cuatro paneles puede tener un fondo completo e intencional en cada panel.

No necesita que el anuncio terminado permanezca transparente solo porque su referencia de entrada fue un recorte. Tampoco debe asumir que una imagen transparente subida crea capas editables o garantiza un contorno de píxeles idéntico en la salida generada. Inspeccione el resultado contra la referencia y nombre cualquier discrepancia en su revisión.

Para el tamaño del archivo y la calidad de entrega, utilice la guía de compresión de imágenes de producto separada. La transparencia responde a lo que rodea al producto; la compresión responde a cómo entrega la imagen de manera eficiente.

Preguntas Frecuentes

¿Cambiar el nombre de un JPEG a PNG crea transparencia?

No. Un nombre de archivo no reescribe los datos de la imagen ni elimina los píxeles de fondo opacos. Exporte un formato compatible real después de crear la máscara o el área transparente deseada.

¿Por qué mi imagen transparente se ve negra en un visor?

El visor puede estar mostrándola sobre una superficie negra, o el archivo entregado puede haber sido aplanado. Pruebe la imagen en dos fondos para distinguir esos casos.

¿Debería cada imagen de comercio electrónico ser transparente?

No. Elija el formato según el destino y la composición. Un recorte reutilizable, una imagen de catálogo con fondo blanco y un anuncio de estilo de vida completo cumplen propósitos diferentes.

Fuentes y lecturas adicionales

Cuatro viñetas. Un anuncio.

Tu próximo anuncio empieza aquí.

Describe tu producto, sus beneficios y su público. Crea un anuncio de cuatro paneles con Panelly.

Empezar a crear ↗Ver paquetes de créditos