Retalla

Retall circular Retallar imatge

Optimitzar

Comprimir imatge Ampliar imatge IA Eliminar fons

Editar

Redimensionar imatge

Convertir

Altres

Imatge a PDF

Retallar imatge en línia

Retalla JPG, PNG, WebP o AVIF amb qualsevol proporció: 1:1, 16:9, 9:16, 4:5, 3:2, 4:3 o píxels exactes.

o deixa anar la imatge aquí

Sobre aquesta eina

Retalla qualsevol imatge en un rectangle directament al navegador, amb l'eina de retall d'Araluma basada en cropperjs v2. Puja un fitxer JPG, PNG, WebP o AVIF i el marc de retall s'obre de seguida. Arrossega les nanses per posicionar la selecció, bloqueja una proporció (1:1, 16:9, 9:16, 4:5, 3:2, 4:3 o A4) o escriu les dimensions exactes en píxels i el marc s'ajusta automàticament. El comptador en temps real mostra la mida de sortida en píxels reals de la imatge original abans de descarregar. La imatge es queda al teu ordinador durant tot el procés, la pestanya de Xarxa del DevTools no mostra cap petició de sortida mentre retalles. La sortida en PNG i WebP conserva la transparència original, la sortida en JPG substitueix les zones transparents per un fons blanc. Les metadades EXIF s'eliminen en cada exportació. Aquesta eina és per a qui necessita un retall rectangular ràpid i precís, fitxer per fitxer, sense instal·lar cap programa.

Retallar imatge
Com funciona el retall al navegador

Com funciona el retall al navegador

La imatge s'obre directament al navegador mitjançant la File API. No hi ha pujada al servidor i no es guarda cap còpia temporal fora del teu ordinador. Arrossega el marc de retall a la posició que necessites, redimensiona'l des dels cantons o les vores, i el comptador de píxels en directe s'actualitza amb cada moviment. Les coordenades estan a l'espai de píxels de la imatge original, per tant el número que es mostra és la mida literal del fitxer de sortida. Obre el DevTools i passa a la pestanya Xarxa mentre retalles, no apareixerà cap petició d'imatge sortint. El fitxer que penges i el fitxer que baixes es queden completament al teu ordinador durant tota la sessió.

Retallar imatge
Bloqueja una proporció o escriu píxels exactes

Bloqueja una proporció o escriu píxels exactes

Prem un xip de proporció (1:1 per a quadrat, 16:9 per a pantalla ampla, 9:16 per a retrat, 4:5, 3:2, 4:3 o A4) i el marc de selecció es bloqueja en aquesta proporció. Arrossega'l a qualsevol lloc de la imatge per triar quina part conservar. Per encertar un objectiu de píxels concret, escriu l'amplada i l'alçada als camps de dimensions i el marc de retall canvia de mida per coincidir. La sortida sempre és igual a la mida en píxels d'origen de la selecció. Aquesta eina no amplia, si la teva selecció és de 600 píxels d'amplada, el fitxer de sortida també és de 600 píxels d'amplada.

Retallar imatge
JPG substitueix la transparència per blanc

JPG substitueix la transparència per blanc

Si el teu fitxer d'origen té zones transparents (PNG, WebP amb canal alfa o AVIF amb canal alfa) i tries JPG com a format de sortida, aquests píxels transparents s'omplen amb blanc. JPG no té canal alfa, per tant no hi ha lloc on guardar la transparència. Per conservar la transparència, tria PNG, WebP o AVIF al selector de format a la pantalla d'acabat. Les sortides PNG i WebP transporten el canal alfa original sense canvis. AVIF també admet alfa. El selector de format etiqueta cada opció perquè el compromís es vegi abans de descarregar.

Retallar imatge
Mou la selecció amb precisió de teclat

Mou la selecció amb precisió de teclat

Prem Tab per anar al marc de retall, després utilitza les tecles de fletxa per moure la selecció un píxel cada cop. Mantén premut Shift amb una fletxa i el pas augmenta a deu píxels. Aquesta navegació de teclat està integrada a cropperjs v2 com a funció nativa, no és una capa d'accessibilitat afegida. És útil quan necessites un alineament visual subpíxel que el ratolí tàctil no pot oferir, o quan treballes en un entorn només amb teclat. La selecció també respon al tacte al mòbil, fes pessigada per ampliar el llenç, després arrossega els cantons de la selecció per reenquadrar. En cap dels dos casos cal activar un mode addicional.

Retallar imatge
Formats de sortida: PNG, JPG, WebP i AVIF

Formats de sortida: PNG, JPG, WebP i AVIF

Després de retallar, tria el format de descàrrega a la pantalla d'acabat. PNG és sense pèrdues i conserva la transparència. JPG aplica compressió amb pèrdues a qualitat 0.9 per defecte, que és visualment indistingible de l'original a la majoria de fotos. WebP equilibra els modes sense pèrdues i amb pèrdues i també admet transparència. AVIF es codifica mitjançant la biblioteca @jsquash/avif a qualitat 0.9. Produeix el fitxer més petit a qualitat visual equivalent, però la primera codificació AVIF en una sessió requereix descarregar un mòdul WASM de 870 KB una sola vegada. El format de sortida per defecte coincideix amb la teva entrada, l'entrada PNG per defecte va a sortida PNG, l'entrada JPG per defecte va a JPG. Pots canviar-ho en qualsevol moment a la pantalla d'acabat.

Retallar imatge
Quan convé fer servir una eina diferent

Quan convé fer servir una eina diferent

Aquesta eina només retalla rectangles, quadrats, proporcions horitzontals, proporcions verticals i dimensions de píxels personalitzades. Per a un retall circular, una foto de perfil amb cantons transparents, fes servir Circle Crop. Comparteix el mateix processament del costat del navegador però genera un PNG rodó. Per a preajustaments específics de plataforma amb dimensions per defecte ja configurades (Instagram 1080×1080, miniatura YouTube 1280×720, portada Facebook 1200×630), les pàgines de preajustament de retall a la família Crop s'obren amb aquestes dimensions ja carregades, així no has de calcular res. Si la teva imatge necessita canviar de format sense retallar abans, fes servir l'eina Convert per arribar a PNG, JPG, WebP o AVIF.

Com retallar una foto en cercle

  1. Puja la imatge

    Obre l'eina i arrossega el fitxer JPG, PNG, WebP o AVIF a l'àrea de càrrega, o fes clic per cercar-lo al teu ordinador.

  2. Tria una proporció o mida en píxels

    Prem un xip de proporció (1:1, 16:9, 9:16, 4:5, 3:2, 4:3 o A4) o escriu l'amplada i l'alçada exactes als camps de dimensions per establir el marc de retall.

  3. Posiciona el marc

    Arrossega el marc de retall fins a l'àrea que vols conservar, després redimensiona'l des dels cantons o les vores fins que el comptador en temps real mostri la mida de sortida que necessites.

  4. Retalla i baixa

    Fes clic a Retalla, tria el format de sortida (PNG, JPG, WebP o AVIF) a la pantalla d'acabat i baixa el fitxer retallat al teu dispositiu.

Preguntes freqüents

Què és el retall d'imatges?

El retall és el procés de seleccionar una àrea específica d'una imatge original i descartar la resta. L'eina utilitza cropperjs v2 per mostrar un marc ajustable sobre la imatge al navegador. Arrossegues el marc fins a l'àrea que vols, tries una proporció o un tamany en píxels, i l'eina genera un fitxer nou que conté només els píxels seleccionats. No cal pujar cap fitxer al servidor.

Com triar la proporció de retall adequada?

Per a publicacions d'Instagram, usa 1:1 (quadrat) o 4:5 (retrat). Per a YouTube o imatges panoràmiques, usa 16:9. Per a Stories o Reels, usa 9:16. Per a fotos clàssiques, 3:2 o 4:3. Si necessites dimensions concretes en píxels, escriu l'amplada i l'alçada directament. La proposta estàndard A4 és útil per a documents i impressions.

Es perd qualitat en retallar?

En PNG la sortida és sense pèrdues, els píxels seleccionats es copien exactament. En JPG i WebP la recodificació aplica compressió amb pèrdues (qualitat 0.9 per defecte), que és visualment indistingible per a la majoria de fotos. En AVIF s'usa la biblioteca @jsquash/avif a qualitat 0.9. Les metadades EXIF s'eliminen en totes les sortides però els píxels de la zona retallada no es degraden addicionalment.

Puc posar mesures exactes?

Sí. Escriu l'amplada i l'alçada en píxels als camps de dimensions i el marc de retall s'ajusta automàticament. El comptador en temps real confirma la mida de sortida en píxels reals de la imatge original. L'eina no amplia la selecció, si la selecció és de 600 píxels d'amplada, el fitxer descarregat tindrà 600 píxels d'amplada.

Serveix per a fotos de carnet?

Per a fotos de carnet rectangulars (les que porta el document d'identitat, passaport, visat), sí, escriu les dimensions exactes requerides (per exemple 35×45 mm en píxels al DPI indicat) i retalla. Aquesta eina no fa retalls circulars ni ovalats. Per a un retall circular amb fons transparent, fes servir l'eina de retall circular.

Es pot retallar una imatge amb transparència?

Sí, sempre que triïs PNG, WebP o AVIF com a format de sortida. Aquests formats conserven el canal alfa del fitxer original. Si tries JPG, les zones transparents es substitueixen per un fons blanc perquè el format JPG no admet transparència. L'eina mostra l'opció de format a la pantalla de descàrrega.

Els detalls

Notes de l'equip sobre artesania, formats i les petites decisions darrere d'un bon retall rodó.

La biblioteca cropperjs v2 i els canvis respecte a v1
Aquesta eina es construeix sobre cropperjs versió 2.1.1, una reescriptura completa de la biblioteca cropperjs original. El llançament v2 substitueix l'antiga API basada en constructor (new Cropper(img, { aspectRatio: 1 })) per una arquitectura Web Components. El llenç de retall, la superposició de selecció i l'element d'imatge són tots elements HTML personalitzats registrats mitjançant el CustomElementRegistry del navegador. Això significa que Shadow DOM gestiona tots els estils interns, no cal cap fitxer cropper.css separat per importar, cosa que elimina una sol·licitud d'actiu de Vite en comparació amb v1. El bloqueig de proporció ara s'estableix directament a l'element de selecció (cropperSelection.aspectRatio = 1), no al constructor, per tant la proporció es pot canviar en temps d'execució sense reinicialitzar tota la interfície de retall. La biblioteca pesa 41 960 bytes en brut i 12 175 bytes amb gzip, mesurat directament des de la capçalera content-length del CDN jsDelivr. Aquests 12 KB es paguen una vegada per sessió i es reutilitzen en totes les rutes de preajustament de retall mitjançant la divisió de chunks de Vite.
Com es calculen les dimensions de sortida sense ampliació
Quan arrossegues la selecció de retall a la pantalla, les coordenades que veus estan a l'espai de píxels de la imatge d'origen, no a l'espai de píxels CSS. Aquesta distinció és important per a pantalles d'alta densitat de píxels, un telèfon amb proporció de píxels de dispositiu 3× mostra una imatge de 300 píxels CSS d'amplada com a 900 píxels reals, però les coordenades de selecció reflecteixen 900 píxels reals, no 300 CSS. El fitxer de sortida que baixes conté exactament el nombre de píxels que el rectangle de selecció representa a la imatge d'origen. L'operació de retall crida selection.toCanvas() des de l'API de cropperjs v2, un mètode asíncron que retorna un nou HTMLCanvasElement amb la mida de les dimensions de píxels de la selecció. Aquest llenç es passa després a canvs.toBlob() per a PNG, JPG o WebP, o al codificador @jsquash/avif per a AVIF. No s'insereix cap pas d'ampliació. Si la selecció té 800 píxels d'amplada, la sortida té 800 píxels d'amplada.
Eliminació de metadades EXIF i el que es perd
Cada exportació elimina les dades EXIF, IPTC, XMP i el perfil ICC. Això passa al nivell del canal de llenç, el navegador dibuixa els píxels d'imatge descodificats sobre HTMLCanvasElement i el llenç codifica a un fitxer nou. El llenç no té concepte de contenidors de metadades, només emmagatzema valors de píxels i paràmetres de codificació. El que s'elimina inclou coordenades GPS, marca i model de càmera, distància focal de l'objectiu, configuració d'exposició, camps de drets d'autor i etiquetes de perfil de color. El perfil de color sRGB és efectivament la suposició que fa el llenç, els colors es renderitzen mitjançant el canal de visualització del navegador i es recodifiquen sense cap perfil adjunt. Per a la majoria de publicacions web i ús a xarxes socials, l'EXIF retirat és preferit, ja que les dades GPS poden exposar informació de localització que l'usuari no tenia intenció de compartir. Per a fluxos de treball fotogràfics professionals, on la precisió del perfil de color importa, utilitza una eina d'exportació amb gestió de color.
Formats de sortida: PNG, JPG, WebP i AVIF
El selector de format a la pantalla d'acabat dóna quatre opcions. PNG és sense pèrdues, cada píxel a l'àrea de retall es guarda exactament tal com es va descodificar des de l'origen. La mida del fitxer és més gran que JPG per al mateix contingut, normalment de tres a cinc vegades més gran per a una foto. JPG aplica compressió amb pèrdues a qualitat 0.9 (en una escala de 0 a 1), que correspon aproximadament al preajustament d'alta qualitat a la majoria d'editors d'escriptori. A q0.9 la diferència entre l'original i la sortida generalment no és visible en un monitor estàndard però el fitxer és significativament més petit. WebP a la mateixa configuració de qualitat produeix un fitxer aproximadament del 25 al 35 per cent més petit que JPG en les nostres proves de codificació, amb la mateixa qualitat perceptiva en fotos. WebP també admet el mode sense pèrdues i preserva la transparència. AVIF a qualitat 0.9 mitjançant la biblioteca @jsquash/avif produeix la sortida més petita dels quatre formats, però la primera codificació en una sessió requereix descarregar un mòdul WASM de 870 KB.
Accessibilitat de teclat al marc de retall
L'element de selecció de cropperjs v2 implementa la navegació de teclat com a part de la seva especificació Web Component. Un cop Tab fins a la selecció de retall, les tecles de fletxa mouen el marc un píxel en la direcció premuda. Shift més una tecla de fletxa mou el marc deu píxels. Això és accessible de manera nativa sense cap solució alternativa per a lectors de pantalla o capa JavaScript personalitzada, el gestor de teclat viu dins del shadow root de l'element de selecció i s'activa amb keydown. Això és important per als usuaris que confien en la navegació només amb teclat, incloent algunes configuracions de tecnologia assistencial, dispositius d'accessibilitat motora i fluxos de treball de precisió on el ratolí tàctil no pot aconseguir un alineament subpíxel fiable. El comptador de píxels en temps real adjunt a la selecció també s'actualitza amb cada pulsació de tecla, per tant els usuaris de lectors de pantalla amb regions aria-live al comptador poden sentir com canvien les dimensions actuals.
Diferències entre retallar i retallar en cercle
Aquesta eina només retalla rectangles, quadrats, paisatges, retrats i dimensions de píxels personalitzades. El retall circular és una eina separada que utilitza cropperjs v1.6.2 per generar PNG rodons amb cantons transparents. El cas d'ús: pujades d'avatar a LinkedIn o Discord on una foto quadrada es veu neta en un marc circular necessita l'eina circular. Ambdues romanen al costat del client, ambdues utilitzen el mateix pipeline File API i Canvas, ambdues eliminen EXIF, ambdues mostren la mida de sortida en píxels reals abans de descarregar. La diferència és puramente la forma del marc de selecció: rectangular aquí, circular allà. Si tens dubtes sobre quina eina necessites, prova primer la circular per a fotos de perfil. Per a tot el demés, aquesta eina rectangular és l'opció predeterminada.