La primera vez que la página de inicio de un cliente ' falló a Vitales principales de la web auditoría por mi culpa, la culpable fue una imagen de un solo héroe: un PNG de 4,2 MB que un diseñador había exportado directamente desde Figma y colocado en la biblioteca multimedia de WordPress. Se mostraba a 1200 px de ancho y se almacenaba a 3800 px. La página tardó once segundos en pintarse en una conexión móvil acelerada. Yo y #39;d lo envié.
Eso fue durante mis días de administración de WP, y me enseñó algo que ha dado forma a cada herramienta de imagen para la que luego construí Toolz.dev: La mayoría de los problemas de imagen no son problemas de edición, son fontanería Problemas. Dimensiones incorrectas, formato incorrecto, sin pase de compresión. No necesitas Photoshop para arreglar nada de eso. Necesitas tres o cuatro herramientas pequeñas que hagan una cosa bien y funcionen rápido.
Esta guía recorre cada operación diaria de imágenes (cambiar tamaño, comprimir, convertir formato y eliminar fondo) con el razonamiento detrás de cada una y los errores que I' He cometido para que puedas omitirlos. Cada herramienta en Toolz.dev procesa imágenes completamente en su navegador. Tus fotos nunca tocan un servidor, lo cual importa más de lo que la gente cree una vez que ' Estamos manejando el trabajo del cliente o fotografías personales.
TL;Dr: Para los trabajos comunes puedes quedarte 100% en el navegador: Cambiar tamaño de imagen Para fijar dimensiones, comprimir imagen Para cortar el tamaño del archivo, Convertidor de formato para moverse entre PNG/JPEG/webp/AVIF, y Eliminador de fondo para tomas limpias de productos y perfiles. Nada se carga: el archivo se mueve desde su disco a la pestaña del navegador y permanece allí. El orden de optimización correcto casi siempre es cambiar el tamaño, luego convertir y luego comprimir.
¿Por qué procesar imágenes en el navegador en lugar de cargarlas?
La mayoría de las herramientas de imagen en línea gratuitas funcionan de la misma manera debajo: carga el archivo, un servidor lo procesa, descarga el resultado. La página web es una piel delgada sobre una máquina alquilada en alguna parte. Ese modelo tiene tres problemas, y la privacidad es solo el más ruidoso.
La privacidad es la preocupación obvia. Las tomas de productos bajo embargo, las fotos de identificación, las capturas de pantalla de los paneles internos, las imágenes personales: las imágenes que la gente necesita con mayor frecuencia para cambiar el tamaño o comprimir son exactamente las que deberían 't sentarse en un directorio temporal de extraños 's. "Archivos eliminados después de una hora" es una promesa que puedes 't auditoría.
La latencia es el coste más silencioso. Cargar un lote de imágenes de cámara de 20 MB a través de Wi-Fi de oficina lleva más tiempo que cambiar el tamaño. Una herramienta basada en navegador se salta el viaje de ida y vuelta: "upload" es instantáneo porque el archivo simplemente se mueve a la memoria. Cuando I'm procesa una carpeta de fotos de productos, esa diferencia es la diferencia entre una pausa para tomar café y un flujo continuo.
Y luego están las paredes que nadie menciona hasta que golpean uno: mayúsculas de tamaño de archivo, límites diarios, "actualizar a Pro para procesar imágenes de más de 10 MB", marcas de agua en el nivel gratuito. Una herramienta del lado del cliente tiene exactamente un límite, y es la RAM de su máquina.
La tecnología para hacer todo esto en una pestaña ha sido estándar durante años. el html <canvas> Element y su contexto 2D pueden decodificar, remuestrear y volver a codificar imágenes ráster sin ningún servidor. el propio navegador Image Decoder maneja JPEG, PNG, WebP y cada vez más AVIF. Ya no hay una razón técnica para enviar una imagen a través de Internet solo para que sea de 800 px de ancho.
¿Cómo se cambia el tamaño de una imagen a las dimensiones correctas?
El cambio de tamaño es la operación que busco en la mayoría, y obtener las dimensiones hacia arriba evita la mayoría de los problemas de rendimiento aguas abajo. La regla que deseo que internalizré antes: nunca almacene una imagen mucho más grande que el tamaño más grande que jamás mostrará.
El flujo de trabajo en el Cambiar tamaño de imagen Herramienta:
- Arrastre su imagen a la herramienta o haga clic para navegar.
- Introduzca el ancho y la altura de destino en píxeles.
- Mantenga la relación de aspecto bloqueada a menos que desee estirarse deliberadamente; con él encendido, el cambio de ancho ajusta automáticamente la altura para que nada se distorsione.
- Elija el método de remuestreo (Bicuc es el valor predeterminado seguro para las fotos; el vecino más cercano para el arte de píxeles que desea mantener nítido).
- Proceso y descarga.
El único número que vale la pena memorizar es el multiplicador de Retina. Una ranura que se muestra a 800 px debe contener una imagen a aproximadamente 1600 px para que se mantenga nítida en pantallas 2×, no en el monstruo de 3800 px que envié esa primera vez. Duplique el tamaño de la pantalla, no cinco veces.
Aquí hay una hoja de trucos de caso de uso que mantengo fijada, porque "qué ancho debería ser" es la pregunta que surge en cada proyecto:
| Caso de uso | Ancho objetivo | proporción de este | formato |
|---|---|---|---|
| Héroe del sitio | 1920 px | 16:9 | webp |
| Blog / Imagen de contenido | 1200 px | 3:2 o 16:9 | webp |
| uña del pulgar | 320-400 px | 1:1 o 4:3 | webp |
| Publicación de Instagram | 1080 px | 1:1 | JPEG |
| X / Twitter en la alimentación | 1200 px | 16:9 | JPEG |
| Encabezado de correo electrónico | 600 px | 3:1 | JPEG |
| Producto de comercio electrónico | 1000-1500 px | 1:1 | WebP o PNG |
Un error que todavía veo en la revisión del código constantemente: upscaling. haciendo una imagen más grande que su fuente puede 't inventar detalles que nunca fueron capturados: la herramienta simplemente interpola nuevos píxeles y, más allá de aproximadamente el 200%, obtiene un resultado suave y blando. Si un cliente envía un logotipo de 500 px y lo necesita a 2000 px, la respuesta honesta es "reexportarlo desde la fuente vectorial," no " escalarlo y esperar."
¿Cómo se comprime una imagen sin destrozarla?
La compresión es donde viven los ahorros reales de peso de página. Las imágenes suelen ser la cosa más pesada en una página web, por lo que reducirlas es el trabajo de rendimiento de mayor apalancamiento que la mayoría de los sitios pueden realizar.
Hay dos tipos, y la distinción lo decide todo:
Compresión con pérdida tira datos que es poco probable que el ojo humano pase por alto: variación sutil de color, textura de alta frecuencia. Un JPEG con una calidad del 80% suele ser entre un 60 y un 70% más pequeño que la misma imagen con una calidad máxima sin diferencias visibles con el tamaño de visualización normal. Esto es lo que quieres para fotografías.
Compresión sin pérdidas reorganiza los datos de manera más eficiente sin descartar nada de ellos; la imagen descomprimida es idéntica píxel por píxel. PNG funciona de esta manera. Úselo cuando cada píxel importe: logotipos, capturas de pantalla, diagramas, cualquier cosa con texto nítido o bordes duros.
los comprimir imagen la herramienta le permite establecer un nivel de calidad, obtener una vista previa del resultado y comparar tamaños de archivos uno al lado del otro antes de comprometerse. Mi valor predeterminado honesto para las fotos web es 80% de calidad - I' He probado cada vez más bajo en muchas páginas, y 80 es el punto en el que dejo de poder distinguir la versión comprimida del original en tamaño de visualización real. Si quieres el razonamiento completo, el Guía de compresión de imágenes Profundiza en por qué ese número se mantiene.
El error que cometí con vergonzosamente largo: comprimir antes de que redimensionando. Si comprime una imagen de 3800 px y luego la cambia a 1200 px, gasta todo ese esfuerzo de compresión en píxeles que están a punto de tirar, y el archivo final es más grande y peor que si lo hubiera hecho de otra manera. Redimensionar primero, luego comprime la imagen más pequeña. Siempre.
¿Qué formato de imagen deberías usar?
El formato horizontal tiene más opciones buenas que antes, lo cual es un buen problema. Así es como decido, sin el brillo de marketing.
JPEG es el formato universal con pérdidas, compatible en todas partes, ideal para fotografías y sin transparencia. It' es el respaldo seguro y sigue siendo la llamada correcta para el correo electrónico, donde la atención al cliente para formatos más nuevos es un lanzamiento de moneda.
PNG es sin pérdidas con total transparencia. Es la opción correcta para capturas de pantalla, logotipos y cualquier cosa con texto o bordes afilados. es el equivocado elección de fotografías: una fotografía guardada como PNG puede ser muchas veces más grande que la misma fotografía que JPEG sin ningún beneficio visible.
webp es mi valor predeterminado para la web en 2026. Tiene pérdidas y sin pérdidas, apoya la transparencia y funciona aproximadamente entre un 25 y un 35% más pequeño que JPEG con una calidad comparable. La compatibilidad con el navegador es efectivamente universal en este punto. Si tuviera que elegir un formato para las imágenes de un nuevo sitio, esto es todo.
todoterreno comprime aún más fuerte, comúnmente alrededor de un 50% más pequeño que JPEG, con un excelente manejo de gradientes y textura fina. Las compensaciones son una codificación más lenta y admiten eso ' es muy bueno, pero no del todo en todas partes. Lo uso como la mejor opción en a <picture> Elemento con webp debajo.
SVG is't un formato rasterizado en absoluto - it's vector, por lo que escala a cualquier tamaño sin un solo píxel borroso. Úselo para logotipos, íconos e ilustraciones. Don' Intento convertirle una fotografía.
Convertir entre estos es un trabajo de dos clics en el Convertidor de formato: Suelte la imagen, elija el formato de destino, ajuste la calidad si está con pérdida, descargue. El patrón que envío en sitios reales utiliza la negociación de formato propio del navegador:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Description" width="1200" height="675" loading="lazy">
</picture>
El navegador elige el primer formato que entiende, por lo que un teléfono moderno obtiene AVIF, uno más antiguo obtiene WebP y cualquier cosa antigua todavía obtiene un JPEG que funciona. Tenga en cuenta lo explícito width y height- esos son 't decoración, reservan espacio de diseño y evitan que la página salte a medida que se cargan las imágenes, lo cual es una victoria por cambio de diseño acumulativo.
¿Cómo se elimina un fondo de imagen en el navegador?
La eliminación de fondo solía significar una herramienta de suscripción o veinte minutos con la herramienta Pluma en Photoshop. Ahora, un modelo de aprendizaje automático lo suficientemente pequeño como para ejecutarse en una pestaña del navegador maneja los casos comunes en un par de segundos.
los Eliminador de fondo analiza la imagen, crea una máscara de píxeles que separa el sujeto del fondo y genera un PNG con un canal alfa transparente. Cargue, espere un momento, verifique los bordes, descargue. Todo sigue siendo local: el modelo se ejecuta en su máquina, por lo que incluso las tomas de productos sensibles nunca lo abandonan.
Funciona mejor cuando le das una oportunidad de luchar: incluso iluminación, contraste decente entre el sujeto y lo que hay detrás y una fuente de resolución razonablemente alta. El cabello, el pelaje y los bordes tenues siguen siendo los lugares donde estos modelos luchan, si el resultado tiene un halo alrededor de alguien & 39; s cabeza, eso & # 39; es el modo de falla que se puede esperar, no un error que se pueda configurar. Los temas con bordes limpios, como los productos empaquetados, salen casi perfectos.
¿Cuál es el orden correcto para optimizar las imágenes para la web?
Cada vez que me he saltado este pedido o lo he hecho fuera de secuencia, lo he pagado. Hágalo en este orden y la salida es más pequeña y de mejor apariencia:
Paso 1: cambie el tamaño para mostrar las dimensiones. Calcule el tamaño más grande que la imagen se renderizará, el doble para retina y redimensionar a eso. Este solo paso suele hacer más para el tamaño del archivo que para cualquier otra cosa, porque está eliminando píxeles que nunca se iban a ver.
Paso 2: convierta al formato correcto. convertido Fotos a WebP (o AVIF con un respaldo). Mantenga logotipos y capturas de pantalla como PNG. Mantenga el arte vectorial genuino como SVG.
Paso 3: comprima con la calidad objetivo. oprimir alrededor del 80% para las imágenes web con pérdida, luego observe el resultado en tamaño real.
Paso 4: sirva responsablemente en HTML. aprovechamiento srcset Por lo tanto, los navegadores descargan un tamaño apropiado para el dispositivo y agregan loading="lazy" a cualquier cosa debajo del pliegue para que no bloquee la pintura inicial.
Un presupuesto de rendimiento flexible que vale la pena mantener: imágenes de héroes de menos de 200 KB (conducen la pintura con contenido más grande, por lo que son lo más importantes), imágenes de contenido normal de menos de 100 KB, miniaturas de menos de 30 KB y logotipos de menos de 10 KB; use SVG y usted & # 39; Generalmente lo superará sin intentarlo. Estas son & # 39;t leyes, ellas & # 39; son una prueba de olfato. Si una sola imagen pasa volando por su cubo, vale la pena echarle un segundo vistazo.
Preguntas frecuentes
¿Cuál es la mejor herramienta de imagen en línea gratuita?
Depende del trabajo, por lo que Toolz.dev los divide en herramientas enfocadas en lugar de un editor inflado. Para dimensiones, use Cambiar tamaño de imagen. Para el tamaño de archivo, use comprimir imagen. Para cambiar formatos, utilice el Convertidor de formato. Para aislar sujetos, utilice el Eliminador de fondo. Los cuatro son gratuitos, no necesitan registro y procesan imágenes completamente en su navegador.
¿Cómo cambio el tamaño de una imagen sin perder calidad?
Reducir la escala (hacer una imagen más pequeña) apenas cuesta calidad porque la fuente tiene más detalles de los que necesita el tamaño más pequeño. Utilice un remuestreo bicúbico para obtener el resultado más fluido. La ampliación de escala es la dirección arriesgada: la herramienta tiene que inventar píxeles, por lo que la calidad disminuye y, más allá de aproximadamente el 200% del tamaño original, la suavidad se vuelve obvia. Cuando necesite una versión mucho más grande, vuelva al archivo fuente original en lugar de ampliar una copia pequeña.
¿Qué formato de imagen debo utilizar para mi sitio web?
Utilice WebP para fotografías y la mayoría de las imágenes de contenido: it' es aproximadamente un 25-35% más pequeño que JPEG con soporte casi universal en 2026. Utilice SVG para logotipos e íconos para que se mantengan nítidos en cualquier tamaño. Utilice PNG solo cuando necesite calidad sin pérdidas con transparencia. Busque AVIF cuando desee la máxima compresión y pueda emparejarlo con un respaldo WebP en a <picture> Elemento.
¿Debo cambiar el tamaño antes o después de la compresión?
Redimensiona primero y luego comprime. Comprimir una imagen grande y luego reducirla desperdicia el esfuerzo en píxeles que se descartan durante el cambio de tamaño, y el archivo final termina siendo de mayor calidad y menor que si lo hiciera en el orden correcto. Redimensionar primero significa que el compresor funciona en la imagen más pequeña, produciendo el resultado más pequeño y limpio.
¿Es seguro usar herramientas de imagen en línea con fotos personales o de cliente?
La mayoría de las herramientas de imagen en línea cargan sus fotos a sus servidores para procesarlas, lo cual es una verdadera preocupación para cualquier cosa privada o bajo NDA. Las herramientas de imagen en Toolz.dev procesan todo en el lado del cliente de su navegador mediante la API de Canvas y, para la eliminación de fondo, un modelo ML en el navegador. Sus imágenes nunca salen de su dispositivo, por lo que son seguras para imágenes personales, trabajo con el cliente y tomas de productos confidenciales.
¿Cuál es la diferencia entre webp y avif?
Ambos superan a JPEG y PNG en compresión. WebP es alrededor de un 25-35% más pequeño que JPEG con soporte universal para navegador, lo que lo convierte en el valor predeterminado práctico. AVIF impulsa aún más la compresión (comúnmente aproximadamente un 50% más pequeño que JPEG) y maneja mejor los gradientes y la textura, pero codifica más lentamente y admite is't en todas partes todavía. El enfoque común es servir AVIF primero con WebP como respaldo para que cada navegador obtenga el mejor formato que pueda decodificar.
¿Cómo elimino el fondo de una imagen de forma gratuita?
Abre el Eliminador de fondo, suelte su imagen y un modelo en el navegador detecta el tema y reemplaza el fondo con transparencia, lo que le brinda un PNG con un canal alfa. Funciona mejor con una iluminación uniforme y un claro contraste entre el tema y el fondo. Los detalles finos como el cabello flyway siguen siendo el estuche rígido para cualquier herramienta automática, así que verifique los bordes antes de confiar en el resultado.
¿Por qué las imágenes de mi sitio web ralentizan la página?
Casi siempre es 's una de tres cosas: la imagen se almacena mucho más grande de lo que muestra, it's en un formato antiguo como una foto PNG sin comprimir, o nunca se pasó por un pase de compresión. Arreglarlos para cambiar el tamaño a las dimensiones de visualización, convertirlos a WebP y luego comprimirlos a aproximadamente un 80% de calidad, y usted ' Por lo general, reducirá el peso total de la imagen a más de la mitad, lo que aparece directamente en su puntuación de Pintura con contenido más grande.
¿Cómo obtengo una imagen de menos de 100 kb?
Trabaje en este orden y deténgase tan pronto como usted & #39; esté por debajo del límite: cambie el tamaño a las dimensiones en las que realmente se muestra la imagen, conviértala a WebP y luego comprima con una calidad del 80%. Para una foto típica de 1600px de ancho, esa combinación alcanza entre 60 y 120 KB. Si usted ' Aún terminamos, baje la calidad al 70% antes de reducir aún más las dimensiones: la pérdida de calidad al 70% es mucho menos notable que una imagen visiblemente más pequeña.
¿Puedo convertir HEIC fotos de mi iPhone a JPG?
Sí. Suelte el archivo .heic en el Convertidor de formato y exportarlo como JPG, PNG o WebP. HEIC es el formato en el que guardan los iPhone de forma predeterminada y, aunque se comprime bien, la mayoría de las aplicaciones de Windows, los navegadores más antiguos y los sistemas de gestión de contenidos aún se niegan a abrirlo, razón por la cual convertir a JPG o WebP antes de cargarlo en cualquier lugar suele ser la medida segura.
