Envié un logotipo convertido al sitio de un cliente una vez y volvió con un rectángulo negro donde solía estar el fondo transparente. Había convertido un PNG a JPEG sin pensarlo. La parte extraña fue que yo esperado blanco: cada artículo que había leído decía transparencia " se vuelve blanco." Se volvió negro y pasé veinte minutos asumiendo que mi código estaba roto antes de leer la especificación HTML y descubrir que el navegador estaba haciendo exactamente lo que me dijeron.
Ese es el tema honesto de esta guía. los Conversor de formato de imagen en Toolz.dev hay un contenedor delgado sobre el navegador y el propio codificador de lienzo. Eso le da ventajas reales: nada se carga, es instantáneo, funciona sin conexión una vez cargado y límites reales que la mayoría de "convierte cualquier imagen a cualquier formato" las páginas no lo admitirán. Construí este, así que yo ' Te diré ambas mitades.
TL;Dr: los Conversor de formato de imagen toma cualquier imagen que su navegador pueda abrir y la vuelva a codificar como PNG, JPEG o webp- esos tres, y sólo esos tres. No hay salida AVIF, GIF o SVG, porque la herramienta utiliza el codificador de lienzo del navegador 's y eso es lo que admite el lienzo. Elija un objetivo, arrastre el control deslizante de calidad (solo JPEG y WebP; PNG lo ignora), descárguelo. Dos cosas que debes saber antes de convertir: Transparencias compuestas en negro cuando se dirige a JPEG, según especificaciones, y Se eliminan los metadatos EXIF En cada conversión, porque un lienzo vuelve a codificar solo lleva píxeles. Para reducir los archivos, emparejarlo con el compresor de imagen y el Cambiar tamaño de imagen herramienta.
¿Qué es lo que realmente soporta este convertidor?
Primero, obtengamos el alcance correcto, porque aquí es donde la mayoría de los formatos guías de venta.
Entrada: El selector de archivos acepta image/*, y el archivo se carga en una llanura <img> elemento. Entonces, si su navegador puede mostrarlo, la herramienta puede leerlo: PNG, JPEG, WebP, GIF, BMP, AVIF y, en la mayoría de los navegadores modernos, SVG.
Salida: PNG, JPEG, WebP. Tres botones. Esa es la lista.
La razón no es la pereza, es la plataforma. La herramienta atrae su imagen a un <canvas> y llama canvas.toBlob(callback, type, quality). El HTML Living Standard requiere que todos los navegadores admitan image/png para esa llamada y deja otros formatos opcionales; en la práctica, image/jpeg y image/webp son compatibles en todas partes y image/avif la codificación no lo es. No existe una API de navegador para escribir un AVIF o un GIF desde un lienzo. Un sitio que le ofrece salida AVIF envía un codificador WebAssembly (cientos de kilobytes de descarga) o, mucho más a menudo, carga su imagen en un servidor. Tampoco es lo que hace esta herramienta.
Así que aquí está la tabla de comparación honesta, primero de la herramienta:
| tu quieres | esta herramienta | porque |
|---|---|---|
| PNG → JPEG | sí | Codificaciones de lienzo image/jpeg |
| PNG → WebP | sí | Codificaciones de lienzo image/webp |
| JPEG → WebP | sí | La conversión más útil aquí |
| WebP → PNG/JPEG | sí | Para herramientas que aún no pueden leer WebP |
| AVIF → WebP | si (avi red solo) | El navegador decodifica AVIF; no puede codificarlo |
| cualquier cosa → avif | prohibido | No existe un codificador AVIF de lienzo |
| GIF animado → Animado Webp | prohibido | una <img> le da al lienzo un marco |
| cualquier cosa → svg | prohibido | SVG es vector; esta es una canalización ráster |
| lote de 200 archivos | prohibido | Un archivo a la vez |
Si necesita AVIF o WebP animado, use squoosh localmente, cwebp/avifenc desde la línea de comandos, o el paso de imagen de la canalización de compilación. Prefiero enviarte a un lugar útil que fingir.
¿Por qué JPEG vuelve negro mi fondo transparente?
Porque la especificación lo dice, y solo aprendí eso después del correo electrónico del cliente.
JPEG no tiene canal alfa. Cuando le pides a un lienzo que serialice a un formato que no sea compatible con alfa, el HTML Living Standard es explícito: el mapa de bits debe estar compuesto en un Fondo negro sólido antes de la codificación. no blanco. negro Chrome, Firefox y Safari siguen esto, por lo que el comportamiento es consistente y por eso sorprende a todos exactamente una vez.
de modo Convertir un logotipo PNG transparente a JPEG le dará una caja negra detrás de él. cada vez Eso no es un error en la herramienta, es que la plataforma es consistente, y ninguna cantidad de arrastrar el control deslizante de calidad lo soluciona.
Qué hacer en su lugar:
- mantener la transparencia? blanco PNG investigaciones operacionales webp. Ambos llevan alfa. WebP será generalmente el más pequeño de los dos.
- ¿Necesita JPEG específicamente? Aplane la imagen en el color de fondo que realmente desea en un editor primero, de entonces Convertir.
- ¿Solo convertir una foto? Las fotos no tienen transparencia, por lo que esto nunca surge. convertir lejos.
Esta es la forma más común en que las personas dañan una imagen con un convertidor, y vale la pena internalizar: Alfa es una propiedad del formato, no de su archivo. Elegir JPEG es elegir tirar el canal alfa.
¿Qué más se pierde en una nueva codificación de lienzo?
Un lienzo contiene píxeles. Solo píxeles. Todo lo demás en su archivo original se descarta cuando el navegador vuelve a codificar, y esto atrapa a las personas:
Exif se ha ido. Marca y modelo de cámara, lente, exposición, fecha de captura, campos de derechos de autor y Coordenadas GPS todo desaparece. Esta es una victoria en privacidad por accidente: convertir una foto de un teléfono antes de publicarla elimina la ubicación en la que fue tomada, pero si usted & 39; es archivero o necesita el campo de derechos de autor para sobrevivir, no ejecute originales a través de ningún lienzo. -convertir una copia.
Los perfiles de color se aplanan. Una imagen etiquetada con un perfil de gama amplia como Display P3 o Adobe RGB se siente atraída por un lienzo que, en la práctica, lo trata como sRGB. Para las imágenes web, esto es lo que quieres de todos modos. Para el trabajo de impresión, no es.
La animación se derrumba en un cuadro. una <img> El elemento le da al lienzo cualquier marco que muestre. Déjate un gif animado de doce segundos y obtendrás un solo alambique. La herramienta no te avisa de esto, lo que considero una verdadera áspera en lugar de una característica.
Todo lo demás vuelve a codificar a partir de píxeles decodificados. Lo que nos lleva a la única regla que más importa.
¿Qué es la pérdida de generación y cómo la evito?
Cada vez que guarda un formato con pérdida, el codificador tira datos. Deseche los datos, decodifique y descárguelos más, y los compuestos de daño. Esta es la pérdida de generación, y es la razón por la que sus plantillas de memes parecen que fueron enviadas por fax.
La regla es corta: Convierta siempre del mejor original que tenga, nunca de una copia convertida.
Concretamente, JPEG → WebP → JPEG es peor que el JPEG original, dos veces. Los primeros artefactos de codificación son tratados como un detalle de imagen real por el segundo codificador, que dedica fielmente a los bits preservándolos. Si tiene un archivo sin procesar o una exportación de PNG, comience allí.
Hay un corolario que hace que la gente haga tropezar: Convertir JPEG a PNG no restaura la calidad. PNG no tiene pérdidas, por lo que preservará su imagen perfectamente, incluidos todos los artefactos de compresión ya incluidos en los píxeles. Obtienes la misma imagen dañada en un archivo tres o cuatro veces más grande. PNG-from-JPEG sólo vale la pena como paso intermedio cuando usted' Estoy a punto de realizar muchas rondas de edición y quiero evitar volver a comprimir en cada guardado.
¿Qué formato debo elegir realmente?
Omite la taxonomía de formato; aquí está la decisión en el orden en que la tomo.
¿Es una fotografía? WEBP en 80-85. Si algo en su canalización no puede leer WebP, JPEG en 80–85.
¿Tiene transparencia? Webp. PNG Si necesitas la máxima compatibilidad.
¿Es una captura de pantalla, un simulacro de interfaz de usuario, un gráfico o algo con texto y color plano? PNG o WebP. JPEG' La transformada discreta del coseno unta los bordes afilados en ruido visible de mosquitos alrededor de las letras; fue diseñada a finales de la década de 1980 para fotografías de tonos continuos (el formato está estandarizado como ITU-T T.81 / ISO/IEC 10918-1) y el texto es exactamente el contenido que peor maneja.
¿Es un logotipo o un icono del que controlas la fuente? Ninguno de los dos: use SVG y don' No lo someto a ningún convertidor ráster.
Para las especificaciones detrás de estas: PNG es ISO/IEC 15948, y WEBP finalmente se publicó como RFC 9649 En 2024, catorce años después de que Google lo enviara. En cuanto al tamaño, el propio estudio comparativo de Google & #39 sitúa a WebP con pérdidas aproximadamente un 25-34% más pequeño que JPEG en SSIM equivalente, y a WebP sin pérdidas aproximadamente un 26% más pequeño que PNG. Esos son los números de proveedor & #39;s en el corpus de proveedor & # 39; trátelos como una fuerte pista, no como una promesa sobre su imagen específica. La razón por la que me siento cómodo citándolos es que & # 39; han igualado mis resultados lo suficientemente estrechamente en capturas de pantalla y fotos reales a lo largo de los años. La suya puede diferir, razón por la cual la herramienta le muestra el tamaño de la fuente antes de convertir.
¿Cómo convierto una imagen en Toolz.dev?
Paso 1: Abra el convertidor
ir a la Conversor de formato de imagen. Nada que instalar, sin cuenta.
Paso 2: sube tu imagen
Haga clic en el área de carga y elija un archivo. Se carga en su navegador a través de la URL de un objeto; el archivo nunca se envía a ninguna parte. Usted 'Veré el nombre del archivo y su tamaño.
Paso 3: Verifique la lectura de formato
La herramienta muestra Corriente → Objetivo. "Actual" se lee del tipo de mimo del archivo, por lo que un .jpg Presentar informes como JPEG. Verificación útil de la cordura cuando alguien ha cambiado el nombre de la extensión de un archivo sin convertirlo realmente, lo que sucede más de lo que piensas.
Paso 4: Elige tu objetivo
PNG, JPEG o WebP.
Paso 5: establezca la calidad, si corresponde
El control deslizante de calidad (1-100, predeterminado a 90) Solo aparece para JPEG y WebP. Eso es deliberado: PNG es sin pérdidas y canvas.toBlob ignora el argumento de calidad por completo para image/png, así que mostrar un control deslizante que no hace nada sería una mentira.
Para saber dónde configurarlo: 90 es el valor predeterminado y es casi indistinguible del original para la mayoría del contenido. 80-85 es donde realmente trabajo, significativamente más pequeño, aún limpio. Por debajo de 60 you' Lo veré en fotos y en cualquier cosa con texto you' Lo veré mucho antes.
Paso 6: Convertir y descargar
chocar Convertir y descargar. La codificación ocurre en su máquina y el archivo se guarda como converted_<original-name>.<ext>. Las dimensiones se conservan exactamente: el convertidor pasa el ancho y el alto de su imagen ', por lo que este paso cambia la codificación y nada más.
Convertir o comprimir: ¿cuál necesito?
Las personas buscan un convertidor cuando quieren un archivo más pequeño y, a menudo, esa es la herramienta incorrecta. Tres trabajos diferentes, tres herramientas diferentes:
| portería | herramienta | que cambia |
|---|---|---|
| Cambiar la codificación | Convertidor de formato | formato, calidad |
| Mismo formato, archivo más pequeño | compresor de imagen | Solo calidad |
| Menos píxeles | Cambiar tamaño de imagen | dimensiones |
Y la mayor victoria es casi siempre la que la gente salta. Si está sirviendo una foto de 4000 × 3000 en un diseño de 1200 px, Redimensionar supera cada elección de formato combinada- tú' Estás desechando el 90% de los píxeles que el navegador iba a reducir y descartar de todos modos. Primero cambie el tamaño y luego convierta. Hacerlo en ese orden habitualmente requiere un PNG de 4 MB por debajo de 200 KB, y no se acerca ninguna cantidad de selección de formato inteligente en el original de tamaño completo.
Un hábito más que vale la pena construir: mantenga sus originales. Masters de archivo sin pérdidas, generan derivados con pérdidas para la distribución. Cuando avif-everwhere finalmente llegue, o el siguiente formato después, volverá a exportar de fuentes limpias en lugar de mejorar el arrepentimiento.
Preguntas frecuentes
¿Qué formato de imagen es mejor para los sitios web?
WebP, para la mayoría del contenido. It' es más pequeño que JPEG para fotos y más pequeño que PNG para gráficos, admite transparencia y cada navegador actual lo lee. Safari fue el último obstáculo y agregó soporte en la versión 14. AVIF se comprime mejor aún, pero tú puedes 't producirlo en un lienzo de navegador; necesitas un paso de compilación o un codificador de escritorio.
¿Puede esta herramienta convertir mi imagen a avif?
prohibido . El convertidor genera solo PNG, JPEG y WebP, ya que utiliza el codificador de lienzo del navegador y ningún navegador puede codificar AVIF desde un lienzo. Su navegador puede descifrar AVIF, para que pueda convertir un archivo AVIF para WebP o PNG aquí, pero no en la otra dirección. Para salida AVIF, utilice un codificador de línea de comandos como avifenc O la canalización de imágenes de su marco.
¿Por qué mi PNG transparente obtuvo un fondo negro después de convertir a JPEG?
Debido a que JPEG no tiene un canal alfa, y la especificación HTML dice que una serialización de lienzos a un formato sin soporte alfa debe combinar la imagen en un fondo negro sólido. Su comportamiento especifico, no es un error, y es el mismo en todos los navegadores. Convierta a PNG o WebP si necesita transparencia.
¿Convertir una imagen elimina sus datos EXIF?
Sí, todo ello, incluidas las coordenadas GPS, la configuración de la cámara y la fecha de captura. La herramienta dibuja su imagen en un lienzo y vuelve a codificar los píxeles, y un lienzo no contiene metadatos. Eso ' es útil si usted & #39;re elimina los datos de ubicación antes de publicar una foto y es un problema si necesita los metadatos, así que mantenga un original sin convertir de cualquier manera.
¿Puedo convertir un GIF animado a un webp animado?
No con esta herramienta. Carga su imagen en un <img> element y captura un solo cuadro en el lienzo, por lo que un GIF animado aparece como una imagen fija. La WebP animada requiere un codificador real de fotogramas múltiples gif2webp de las herramientas web de Google, o convierta la animación a MP4, que será mucho más pequeña que cualquiera de las dos.
¿Convertir JPEG a PNG mejorará la calidad?
No. PNG no tiene pérdidas, por lo que conserva exactamente lo que se proporciona en JPEG & #39;s, incluidos los artefactos de compresión ya integrados en los píxeles de JPEG & # 39. Terminas con una imagen de aspecto idéntico en un archivo mucho más grande. Los datos perdidos se pierden; ningún cambio de formato lo devuelve.
¿Hay un límite de tamaño de archivo?
No se aplica ningún límite estricto. El techo práctico es la memoria de su dispositivo 's, ya que toda la imagen se decodifica en un mapa de bits de lienzo con aproximadamente ancho × alto × 4 bytes; una foto de 8000 × 6000 necesita alrededor de 192 MB de RAM como píxeles sin procesar incluso antes de que comience la codificación. Los navegadores de escritorio manejan la salida típica de la cámara sin quejarse; Los teléfonos más antiguos pueden tener dificultades con archivos muy grandes.
¿Cuál es la diferencia entre PNG y JPEG?
JPEG es con pérdida y está diseñado para fotografías: descarta detalles finos para llegar a archivos pequeños y no tiene transparencia. PNG no tiene pérdidas y está diseñado para gráficos, capturas de pantalla y logotipos: mantiene cada píxel exactamente y admite un fondo transparente, a costa de archivos más grandes para fotos. Puede convertir entre ellos aquí, pero recuerde un PNG transparente guardado como JPEG obtiene un fondo sólido, ya que JPEG no tiene canal alfa.
¿Cómo convierto una imagen a webp gratis?
Cargue su PNG o JPEG, elija WebP como formato de salida, establezca la calidad si desea un archivo más pequeño y descárguelo; es gratuito y se ejecuta completamente en su navegador. WebP suele ser la conversión que vale la pena realizar para la web, ya que es más pequeña que JPEG y PNG y al mismo tiempo admite transparencia y es leída por todos los navegadores actuales.
¿Mi imagen se carga en un servidor?
No. El archivo se lee localmente con una URL de objeto, se decodifica mediante su navegador, se recodifica mediante su navegador y el lienzo #39;s y se guarda mediante su navegador. Puede verificar esto usted mismo: abra DevTools, vaya a la pestaña Red y convierta una imagen. usted & #39; No verá ninguna carga. Una vez que la página se haya cargado, la conversión funcionará con el Wi-Fi apagado.
la versión corta
Un lienzo de navegador es un convertidor de imagen bueno y honesto para tres formatos y uno malo para todo lo demás. Dentro de PNG, JPEG y WebP es instantáneo, privado y gratuito, y cubre la conversión que realmente importa para la web: llevar sus fotos a la web. Fuera de esas tres, no puede ayudar, y prefiero decirlo que deje que lo descubra con un rectángulo negro en la página de inicio de un cliente.
Antes de convertir cualquier cosa, pregunte si necesita transparencia (entonces no JPEG), si necesita los metadatos (entonces conservar el original) y si la imagen es simplemente demasiados píxeles (entonces redimensionar primero). Haz que esos tres sean correctos y la elección de formato es la parte fácil.
los Conversor de formato de imagen está aquí. Para el resto del flujo de trabajo de imagen, está el compresor de imagen, el Cambiar tamaño de imagen herramienta y, para recortes de fondo plano, el Eliminador de fondo. La imagen más amplia está en el Guía de herramientas de imagen y el Guía de compresión de imágenes.
