Eliminar un fondo de imagen en el navegador: lo que realmente hace un eliminador de teclas de color

Necesitaba cuarenta tomas de productos limpiadas para una página promocional de Adminify de WP y no quería pagar por imagen o subir las maquetas al servidor de alguien antes de que fueran públicos. Así que construí un removedor de fondo en Toolz.dev, le tiré mi primera foto y la vi hacer un agujero directamente en la mitad del producto.

La foto era una caja de complementos blanca sobre un escritorio blanco. La herramienta eliminó el escritorio. También eliminó la caja porque la caja era del mismo blanco que el escritorio. Había asumido que estaba construyendo algo inteligente y con forma de IA. De hecho, había construido algo mucho más simple y el agujero de mi producto me enseñó exactamente qué era y, lo que es más útil, exactamente cuándo funciona maravillosamente y cuándo falla.

Esta guía es esa lección escrita. Es honesto acerca de lo que puede hacer un eliminador de claves de color basado en navegador, porque una herramienta que falla silenciosamente en temas de cabello y del mismo color es peor que ninguna herramienta si no conoces sus bordes. Aquí todo se ejecuta en el lado del cliente: su imagen se decodifica, procesa y descarga sin salir nunca de la pestaña.

TL;Dr: los Eliminador de fondo muestra el color en la esquina superior izquierda de su imagen y elimina todos los píxeles cercanos a ese color, dejando atrás la transparencia (PNG). Es una clave de color, no un recorte de IA. Eso significa que es instantáneo, privado y genuinamente excelente en fondos planos de colores sólidos (tomas de productos, logotipos, ilustraciones planas, capturas de pantalla) y realmente malo en fotografías ocupadas, degradados, cabello y cualquier tema que comparta un color con su fondo. Gira el tolerancia Deslizador hacia arriba para quitar más, hacia abajo para proteger los bordes. ¿Necesita convertir el resultado a jpg después? los Conversor de formato de imagen hace eso, pero pierdes la transparencia.

¿Qué tipo de removedor de fondo es este?

Hay dos familias de herramientas muy diferentes que se llaman a sí mismas "removidores de antecedentes", y elegir la incorrecta para su imagen es la razón más común por la que las personas se frustran.

La primera familia es Segmentación de IA. Un modelo de aprendizaje automático entrenado en millones de fotos con etiquetas mira su imagen, decide "Este es un perro, este es un sofá detrás del perro" y traza al perro. Esto es lo que hacen remove.bg y las herramientas de nube de pago. Maneja el cabello, la piel y los fondos desordenados porque entiende guiones, no solo colores. El costo: generalmente carga su imagen a un servidor, necesita ese modelo entrenado y es más lento.

La segunda familia es una tecla de color- a veces llamado croma, la misma idea que una pantalla verde en una película. No entiende en absoluto lo que hay en tu foto. Selecciona un color de fondo y elimina todos los píxeles cercanos a ese color. El removedor de fondo Toolz.dev es este segundo tipo. Muestra el píxel del esquina superior izquierda De su imagen, lo trata como "el fondo", y camina cada píxel decidiendo: ¿está lo suficientemente cerca del color de la esquina para eliminar?

Ninguno es mejor en abstracto. Son buenos en diferentes imágenes. Una vez que puedas decir qué imagen estás sosteniendo, dejarás de luchar contra la herramienta.

¿Cómo decide el removedor de teclas de color qué eliminar?

Vale la pena entender el mecanismo porque explica cada éxito y cada fracaso que obtendrá de él.

Cuando presionas Vista previa, la herramienta lee el color del píxel de la esquina superior izquierda; llámalo referencia. Luego, por cada píxel de la imagen, se suma qué tan lejos está ese píxel de la referencia en los tres canales de color:

difference = |R - refR| + |G - refG| + |B - refB|

Esa es una suma simple de las distancias rojas, verdes y azules (una distancia de Manhattan, si quieres el término). Si el total difference está debajo de su tolerancia al configurar, el píxel 's alfa se establece en cero y se vuelve transparente. Si está arriba, el píxel permanece.

Tres consecuencias caen directamente de esa fórmula, y son toda la historia:

primero, La esquina tiene que ser de fondo. La herramienta asume que el píxel superior izquierdo es parte de lo que desea que se haya ido. Si su sujeto llega a esa esquina, le está diciendo a la herramienta que su tema es el fondo. Recorte o reformulelo para que la esquina esté limpia.

Primo primo de eso: El fondo tiene que ser aproximadamente de un solo color. Un barrido de estudio blanco plano es de un color. Un café borroso, un degradado de cielo, un escritorio de madera con vetas: son muchos colores y la herramienta solo conocía la de la esquina. Eliminará las partes que coincidan y dejará el resto como fea franja.

segundo, También se elimina cualquier color de tema que coincida con el fondo. Mi caja blanca sobre el escritorio blanco es el fracaso canónico. Una persona con una camisa gris contra una pared gris pierde la camisa. La herramienta no tiene idea de que la camisa es "sujeto" - sólo ve gris cerca del gris de referencia.

Cuando esta herramienta es exactamente correcta

Sigo alcanzando a pesar de los límites, porque para un conjunto de imágenes específico y muy común es más rápido y privado que cualquier cosa basada en la nube. brilla:

Fotos de productos en un barrido sólido. Dispara sobre un fondo blanco o de color liso (una hoja de papel, un rollo de fondo liso, una caja de luz) y el recorte estará limpio con un solo clic. Este es el flujo de trabajo del comercio electrónico: las imágenes de productos con fondo blanco son efectivamente necesarias en Amazon y esperadas en Etsy y eBay.

Logos y gráficos planos. Un logotipo exportado sobre un fondo sólido, una ilustración plana, un icono: ya están hechos de algunos colores planos, que es exactamente lo que quiere una clave de color.

Capturas de pantalla y capturas de interfaz de usuario. Una captura de pantalla con una barra de herramientas uniforme o una tecla de color de lienzo se eliminan limpiamente cuando solo necesita el contenido.

Cualquier cosa que tengas con pantalla verde. Si puede controlar el rodaje y poner su sujeto contra un color plano y contrastante que el sujeto hace no Desgaste, esta herramienta es genuinamente de grado profesional.

Cuándo usar otra cosa

Sea honesto consigo mismo acerca de la imagen antes de perder diez minutos en controles deslizantes de tolerancia:

Fotos de personas con cabello visible. Los hilos finos contra cualquier fondo son el problema más difícil en el campo, y una tecla de color no puede hacerlo. Alcance una herramienta de IA.

Fondos ocupados o degradados. Calles, habitaciones, cielos, bokeh: muchos colores, una referencia, franja garantizada.

Sujetos que comparten el color de fondo. Ningún ajuste de control deslizante corrige un objeto blanco en blanco. Vuelva a filmar en un fondo contrastante o use la segmentación.

Cómo eliminar un fondo en Toolz.dev, paso a paso

La interfaz es deliberadamente pequeña. No hay cuenta, no hay carga, no hay marca de agua.

Paso 1: Abra la herramienta

ir a la Eliminador de fondo. Todo se carga como una página; no hay modelo para descargar ni llamada de servidor.

Paso 2: sube tu imagen

Haga clic en la zona de caída y elija un archivo (JPG, PNG o webp todo funciona). Se lee directamente en la página. Compruebe que el La esquina superior izquierda es de fondo- esta es la única regla de encuadre que importa. Si tu sujeto queda atrapado en ese rincón, el resultado será incorrecto sin importar lo que hagas a continuación.

Paso 3: Establezca la tolerancia, luego vista previa

los tolerancia El control deslizante se ejecuta de 0 a 200 y comienza en 50. La baja tolerancia elimina solo los colores muy cerca de la esquina (seguro, pero puede dejar un halo de píxeles de fondo cercano). La alta tolerancia elimina una gama más amplia de colores (barrido más limpio, pero se come en los bordes y cualquier color del sujeto que coincida). chocar vista de y mira el tablero de ajedrez: ese patrón es el área transparente.

Paso 4: Sintonía

Si el fondo sobrevive, empuje la tolerancia hacia arriba y previsualice nuevamente. Si su sujeto está perdiendo sus bordes o está haciendo agujeros, empújelo hacia abajo. Estás buscando el escenario que despeje el fondo sin tocar el tema. Para un fondo plano bien tomado, generalmente hay una amplia gama cómoda que funciona.

Paso 5: Descargar PNG

clic Descargar PNG. La salida siempre es PNG porque PNG es el formato web común que admite transparencia; ese es el punto. El archivo se genera en el navegador y se guarda directamente en su máquina.

Clave de color frente a recorte de IA: ¿cuál quieres realmente?

La fila que lo decide para mi es Privacidad más fondos planos. Si controlo la sesión, controlo el fondo, y luego la tecla de color honesta y aburrida supera a la inteligente herramienta de IA en velocidad y nunca enviar mis activos inéditos a ningún lado.

Algunos hábitos que obtienen resultados más limpios

Dispara a la herramienta. La palanca más grande no es el software, es la entrada. Un tema sobre un fondo simple, contrastante y uniformemente iluminado se corta con un solo clic. Cinco minutos organizando una hoja de papel supera una hora de lucha contra el control de control.

Mantenga la esquina limpia. Marco para que el píxel superior izquierdo sea de fondo inequívoca. Es la única referencia de la herramienta.

El contraste supera la tolerancia. Si su tema y fondo tienen un color cercano, ningún control deslizante lo guarda: cambie el fondo, no la configuración.

Redimensionar antes, comprimir después. Si la imagen final va a la web, ejecute el recorte por el Cambiar tamaño de imagen herramienta para dimensiones exactas, luego la compresor de imagen para reducir el archivo. HACER ESO trasero Retire para que no comprime los detalles de borde que aún necesita.

Guárdalo PNG hasta que haya terminado. Cada paso intermedio debe permanecer en PNG para que sobreviva la transparencia. Solo aplane a JPG para el destino final si ese destino no puede tomar un PNG, y sepa que el área transparente se llena de forma sólida cuando lo hace.

Preguntas frecuentes

¿Esta herramienta utiliza IA para eliminar fondos?

No, y eso es deliberado. Es un eliminador de claves de color: muestra el color de la esquina superior izquierda y elimina los píxeles cercanos, completamente en su navegador. Eso lo hace instantáneo y completamente privado, pero significa que funciona en fondos planos y sólidos en lugar de fotografías complejas como lo haría un modelo de IA. La propia nota de la herramienta &#39 lo dice mucho: para fondos ocupados, un recorte de IA es la mejor opción.

¿Por qué eliminó parte de mi tema?

Porque parte de su tema era de color cercano al fondo. La herramienta elimina por color, no reconociendo cuál es el tema, por lo que se quita una camisa blanca en una pared blanca, o un producto de la misma sombra que el escritorio en el que se sienta, junto con el fondo. La solución es un fondo que contrasta con el sujeto, no una configuración de control deslizante diferente.

¿Qué cambia realmente el control deslizante de tolerancia?

Es el límite de cuán diferente puede ser un píxel del color de la esquina y aún así se elimina. La baja tolerancia elimina solo los colores casi idénticos (seguro, pero puede dejar un halo). La alta tolerancia elimina un rango más amplio (limpiador en un barrido plano, pero come bordes). Se ejecuta de 0 a 200 y tiene como valor predeterminado 50; previsualiza y ajusta hasta que el fondo se despeje sin tocar el sujeto.

¿Por qué la salida siempre es un PNG?

Porque PNG admite transparencia y JPG no. Eliminar un fondo significa hacer que los píxeles sean transparentes, y solo un formato con un canal alfa puede almacenarlo. Si exporta la misma imagen que JPG, el área transparente se contrae a un color sólido, generalmente blanco.

¿Puedo eliminar el fondo de una foto de una persona?

Sólo si es una toma limpia estilo estudio sobre un fondo plano y contrastante y la persona no está cerca de ese color. Para fotografías cotidianas con cabello sobre un fondo del mundo real, esta herramienta dejará un margen; ese es el caso en el que una herramienta de segmentación de IA se gana su sustento.

¿Mi imagen está subida a alguna parte?

prohibido . La imagen se decodifica y procesa dentro de la página usando el lienzo del navegador, y el PNG se genera localmente cuando la descarga. No se envía nada a un servidor, por lo que es seguro usarlo en tomas de productos y activos que aún no son públicos.

¿Cómo elimino un fondo blanco de una imagen?

Este es el caso para el que está diseñada la herramienta. Un fondo blanco es plano y uniforme, por lo que la muestra de la esquina aterriza en blanco puro y una tolerancia moderada despeja todo el campo en una sola pasada. Deje caer la imagen, verifique la vista previa y aumente la tolerancia solo si sobrevive un borde gris tenue cerca de los bordes; las tomas de estudio y los logotipos escaneados a menudo tienen un degradado ligeramente blanquecino en lugar de verdadero #FFFFFF. Lo único que debes ver es blanco dentro del sujeto: una taza blanca o una camisa blanca desaparecerán junto con el fondo, porque la herramienta combina color en lugar de reconocer objetos.

¿Por qué mi recorte tiene un borde blanco o de color alrededor?

Esa franja es suavizante. La imagen original combinó los píxeles del borde del sujeto & #39;s a mitad del color de fondo para que el contorno luzca suave, por lo que esos píxeles mezclados no son ni sujeto ni fondo, se sientan justo fuera del límite de tolerancia y sobreviven a la eliminación. Al aumentar un poco la tolerancia, normalmente se come el halo, aunque empujar demasiado comienza a morder el sujeto mismo. Si el borde persiste en cada entorno, la imagen subyacente simplemente carece de suficiente contraste en el límite, y una toma contra un fondo más contrastante fijará en un segundo lo que ningún control deslizante puede hacer.

¿Cómo pongo un color sólido detrás de mi tema recortado después?

Coloque el PNG transparente en una capa de color en cualquier editor, o exporte a JPG a través de la Conversor de formato de imagen, que llena el área transparente con un color de fondo. Para el uso web, un PNG transparente caído sobre un fondo CSS suele ser el camino más limpio.

envolviendo

El error que cometí en la primera toma del producto (esperar un recorte de IA y obtener una clave de color) es el error que casi todo el mundo comete con los eliminadores de fondo del navegador, y se puede evitar por completo una vez que sabes lo que tienes en la mano. Esta herramienta hace una cosa: elimina el color de fondo y deja transparencia. Dale un fondo plano y contrastante y será rápido, gratuito, ilimitado y privado de una manera que ninguna herramienta basada en carga puede igualar. Dale pelo a una calle concurrida y te decepcionará, y ahora sabes buscar una herramienta diferente.

Comience con el Eliminador de fondo. Limpie el tiro después con Cambiar tamaño de imagen y el compresor de imageny convertir formatos con el Conversor de formato de imagen si es necesario. Todo se ejecuta en su navegador; nada de lo que coloque sale de la pestaña.