Flujo

Preparar una imagen de producto para publicarla

Publica un JPEG pequeño de un dibujo que ya tiene fondo blanco y comprueba qué cambia cuando el archivo es transparente.

Objetivo

Conseguir un JPEG de 160 px en el lado más largo a partir de un dibujo de producto con fondo blanco, y un segundo JPEG que muestra qué hace la conversión con los píxeles transparentes.

Esta página es HTML estático. El compresor y el conversor necesitan JavaScript porque vuelven a dibujar la imagen en un canvas del navegador. Puedes leer la secuencia, las medidas y los límites con JavaScript desactivado.

Entradas

Los dos PNG son dibujos originales creados para esta guía, no fotografías. El rectángulo rojo es #d91f2a y la franja verde azulada es #0f766e. Ningún archivo contiene datos personales.

Rectángulo blanco con un bloque rojo sobre una franja verde azulada.
product-on-white.png Entrada. PNG de 240×160 con fondo blanco, 367 bytes.
Bloque rojo sobre una franja verde azulada, en fondo transparente.
product-transparent.png Entrada. El mismo dibujo con fondo transparente, 707 bytes. El damero no forma parte del archivo.
Versión más pequeña del dibujo rojo y verde azulado sobre fondo blanco.
product-on-white-compressed.jpg Salida del compresor. JPEG de 160×107, 1518 bytes.
El mismo dibujo exportado como JPEG, con fondo blanco en lugar de la transparencia.
product-transparent.jpg Salida del conversor. JPEG de 240×160, 2226 bytes, con la esquina antes transparente ahora blanca.

Decisiones

No quitar el fondo de estos archivos

El primer archivo ya tiene el fondo blanco que un JPEG puede publicar. El segundo ya es transparente. Ninguno necesita el removedor de fondo.

Usar el compresor cuando el lado más largo debe reducirse

El Compresor de Imágenes cambia formato, calidad y el lado más largo. El conversor mantiene 240×160. Para un anuncio limitado a 160 px, el compresor es la herramienta de esta secuencia.

Usar el conversor para ver la transparencia volverse blanco

El Conversor de Imágenes rellena el canvas de blanco antes de exportar JPEG. Eso muestra qué ocurre después de quitar un fondo, sin encadenar las herramientas.

Secuencia verificada

Las herramientas no reciben el archivo desde esta página. Descarga cada entrada y elige el archivo de nuevo en la herramienta. No se envía nada a Kitly.

  1. Descarga product-on-white.png y product-transparent.png arriba.
  2. Abre el Compresor de Imágenes y elige product-on-white.png.
  3. Después de cargar el archivo, el formato queda en PNG y el control de calidad se desactiva. Cambia el formato a JPEG. La etiqueta de calidad debe mostrar 78%, que es el valor inicial. Cambia la dimensión máxima de 240 a 160.
  4. Haz clic en Comprimir imagen. Las dimensiones deben mostrar 160 x 107. En Chrome 154, el tamaño aparece como 1.5 KB y la comparación como La salida quedó más grande, 313.6%. Descarga product-on-white-compressed.jpg.
  5. Abre el Conversor de Imágenes en una visita nueva y elige product-transparent.png. Cambia el formato a JPEG. No muevas el control de calidad. Si ya lo moviste, recarga la página: el valor inicial es 0.86 y el control no muestra ese número.
  6. Haz clic en Convertir. Las dimensiones siguen en 240 x 160. En Chrome 154, el tamaño aparece como 2.2 KB. Descarga product-transparent.jpg y comprueba que la esquina transparente quedó blanca.
  7. Detente aquí. No abras el Removedor de Fondo de Imagen para estos dos archivos.

Resultado observado

Medido en macOS con Headless Chrome 154.0.8037.99, repitiendo el canvas de las herramientas: createImageBitmap, relleno blanco antes del JPEG y canvas.toBlob con la calidad indicada. Los JPEG se abrieron de nuevo y se muestrearon. Los botones de la página no se pulsaron en esta medición; compara el tamaño mostrado si tu navegador es otro.

Medidas comprobadas
product-on-white.png Entrada. PNG de 240×160, 367 bytes. El píxel (0, 0) es 255, 255, 255, 255. El píxel (120, 50) es 217, 31, 42, 255. El píxel (120, 110) es 15, 118, 110, 255.
JPEG del compresor product-on-white-compressed.jpg. JPEG de 160×107, 1518 bytes, mostrado como 160 x 107 y 1.5 KB. Comparación: La salida quedó más grande, 313.6%. Reabierto, (0, 0) es 255, 255, 255, 255. La muestra escalada de (120, 50) en (80, 33) siguió en 217, 31, 42, 255. La muestra escalada de (120, 110) en (80, 74) quedó en 14, 118, 107, 255.
product-transparent.png Entrada. PNG de 240×160, 707 bytes. El píxel (0, 0) es 0, 0, 0, 0. Las muestras roja y verde azulada coinciden con el archivo de fondo blanco.
JPEG del conversor product-transparent.jpg. JPEG de 240×160, 2226 bytes, mostrado como 240 x 160 y 2.2 KB. El archivo no tiene canal alfa. Reabierto, (0, 0) es 255, 255, 255, 255. (120, 50) siguió en 217, 31, 42, 255. (120, 110) quedó en 16, 117, 111, 255.

Límites

  • Son dibujos planos. Una fotografía no va a repetir estos tamaños de archivo.
  • El tamaño del JPEG depende del codificador del navegador. Estos bytes vienen de Chrome 154 en macOS.
  • El compresor ofrece JPEG, PNG y WebP cuando el navegador puede codificarlos. No se usó AVIF.
  • El removedor de fondo no se ejecutó. En el primer uso puede descargar un modelo, y puede usar un respaldo de color del borde que también quita colores parecidos del sujeto.
  • La exportación por canvas no conserva metadatos de cámara. Estos dibujos no tenían metadatos.
  • Ninguna herramienta pasa el archivo a la siguiente. Un archivo pequeño puede quedar más grande: 367 bytes pasaron a 1518 bytes.

Herramientas en este idioma

Abre cada herramienta en este mismo idioma. La página de la herramienta no recibe estos archivos automáticamente.

  • Compresor de Imágenes Reduce el lado más largo a 160 px y exporta el JPEG del dibujo con fondo blanco.
  • Conversor de Imágenes Exporta el dibujo transparente como JPEG de 240×160 y pinta la transparencia de blanco.
  • Removedor de Fondo de Imagen No forma parte del resultado medido. Úsalo solo cuando el fondo de la foto no sea el fondo que quieres publicar.