Ridimensiona le immagini online: la trappola della retina e ciò che la tela butta via silenziosamente

Per circa sei mesi, ogni miniatura su questo blog è stata leggermente morbida. non rotto. Non ovviamente sbagliato. Solo... lanuginoso, nel modo in cui ti accorgi con la coda dell'occhio e poi parli di te stesso per notarlo.

Il layout diceva che lo slot per le miniature era largo 600 pixel. Quindi ho esportato le miniature a 600 pixel di larghezza. Questa è esattamente la cosa sbagliata da fare, e mi ci è voluto un tempo imbarazzante per capire perché, perché sul mio monitor sembrava a posto e sul mio telefono sembrava una fotocopia di una fotocopia.

Il motivo è che un pixel CSS non è un pixel del dispositivo Un telefono moderno o un laptop retina racchiude due o tre pixel fisici in ogni pixel CSS - che's cosa window.devicePixelRatio rapporti. Quindi la mia immagine da 600 pixel veniva allungata su 1.200 pixel fisici di vetro e il browser stava inventando la differenza. Non puoi inventare dettagli che non siano nel file. La soluzione era esportare a 1.200 e lasciare che i CSS lo mostrassero a 600.

Questo è l'errore su cui si basa questa guida, insieme agli altri tre o quattro che fanno sembrare le immagini ridimensionate peggiore del dovuto. la Strumento di ridimensionamento dell' su Toolz.dev fa il lavoro nel tuo browser - il file non lascia mai la tua macchina - ma lo strumento è la parte facile Sapere quali numeri digitare è la parte che conta davvero.

tl; dr: Esporta a 2× la dimensione del display Per gli schermi Retina (uno slot da 600px necessita di un file 1.200px) e non si ridimensiona mai sopra- puoi' t aggiungere dettagli che non sono mai stati catturati Blocca le proporzioni a meno che tu non voglia veramente distorcere l'immagine Ridimensiona prima Ti comprimi, non dopo. Usa il Strumento di ridimensionamento dell' Per impostare le dimensioni, il Calcolatrice delle proporzioni per elaborare il lato mancante e il compressore di immagini per ridurre la dimensione del file in seguito. Tutto funziona lato client. Un avvertimento che vale la pena sapere in anticipo: il ridimensionamento ricodifica l'immagine, quindi Tutti i metadati Exif vengono rimossi- ottimo per la privacy, a volte sorprendente.

Perché le mie immagini sembrano sfocate dopo il ridimensionamento?

Nove volte su dieci è una delle tre cose, e sono tutte risolvibili.

sei aumentato. L'ingrandimento di una foto da 400×300 a 1600×1200 chiede al software di produrre dodici pixel di informazioni per ognuno di essi. Lo fa interpolando - facendo la media dei vicini per indovinare cosa c'è nel mezzo - e il risultato è morbido, perché il dettaglio non esiste veramente. A dir poco un modello generativo lo inventa indietro. Inizia sempre dall'originale più grande che hai e ridimensiona. Giù è quasi senza perdite, su è un'ipotesi.

Hai ignorato il rapporto pixel. L'errore che ho descritto sopra Se la casella CSS è 600×400 e lo schermo user's è 2×, il browser ha bisogno di 1200×800 pixel reali per renderla nitida Esporta a 2× e lascia che il browser ridimensiona - il downscaling nel browser sembra fantastico; l'upscaling sembra fango.

qualcos'altro l'ha compresso dopo di te. Hai ridimensionato attentamente, quindi caricato su una piattaforma che ha ricodificato la tua immagine con la propria impostazione di qualità. Ogni piattaforma social lo fa. Non puoi fermarlo, ma puoi ridurlo: caricare vicino alle dimensioni target della piattaforma in modo che faccia il minor lavoro possibile e consegnargli un file che è già pulito piuttosto che uno che deve riparare.

Cosa succede effettivamente quando ridimensioni un'immagine?

Vale la pena capire, perché spiega la maggior parte delle sorprese.

Un'immagine raster è una griglia di pixel. Ridurre quella griglia significa decidere cosa a appena Il pixel dovrebbe essere quando si trova tra più vecchi. Quella decisione è chiamata risistemante, e l'algoritmo è importante:

• il vicino più vicino- afferra il pixel originale più vicino Bordi veloci, a blocchi e frastagliati Correggi solo per la pixel art, dove il punto è la blockiness.
• biliare- media dei quattro pixel più vicini Liscio, un pò morbido.
• bicubo- pesare sedici pixel circostanti con una curva cubica Più nitido che bilineare; il sensibile default nella maggior parte dei software desktop.
• Lanczo- un filtro sinc finestrato su un quartiere più grande La migliore qualità per il downscaling, più lento, può produrre deboli squilli su bordi ad alto contrasto.

Il ridimensionamento della tela del browser rientra nell'intervallo bilineare-bicubico e ti consente di scegliere con precisione: puoi solo chiedere una qualità di livellamento e le specifiche HTML e #39; l'impostazione predefinita per quel suggerimento è "low". Questo va bene per la stragrande maggioranza del lavoro sul web ed è per questo che lo strumento Toolz.dev sembra istantaneo.

C'è un trucco dell'utente di potere che vale la pena conoscere Quando si esegue il downscale di un grande fattore in un singolo passaggio - diciamo 4000px fino a 400px, una riduzione di 10× - alcune implementazioni del browser campionano troppo scarsamente e si ottiene aliasing: bordi scintillanti, motivi moiré in tessuto o muratura e dettagli fini persi La soluzione alternativa è Ridimensionamento a gradini: dimezzarsi ripetutamente (4000 → 2000 → 1000 → 500 → 400) in modo che ogni passo butti via solo metà dei pixel. Se una grande riduzione risulta mai più croccante di quanto ti aspettassi, questo è il motivo, e farlo in due passaggi lo risolverà.

Cosa fa effettivamente lo strumento di ridimensionamento Toolz.dev?

Preferirei dirtelo esattamente piuttosto che scoprirlo dopo. È un ridimensionatore basato su tela:

1. Il tuo file viene letto nel browser tramite un URL oggetto. lo è Mai caricato- lì' non c'è nessun server su cui caricarlo.
2. È disegnato su una tela HTML alle dimensioni di destinazione.
3. La tela è ricodificata in PNG, JPEG o webp (La qualità è impostata su 0,9 per i formati con perdita).
4. tu scarichi il risultato.

Ne derivano tre conseguenze e solo una di esse è nella maggior parte degli strumenti di marketing Copy:

I metadati EXIF vengono rimossi. Un re-encode canvas produce un file nuovo di zecca Modello di fotocamera, obiettivo, tempo di acquisizione e, soprattutto, Coordinate GPS Non sopravvivere. Per qualsiasi cosa pubblichi, questa è una caratteristica della privacy e una vera: le foto direttamente da un telefono portano regolarmente le coordinate esatte di dove sono state scattate. se tu occorrere L'Exif (per un portfolio fotografico, ad esempio), ridimensiona con uno strumento che lo preserva esplicitamente. Se la sorgente è arrivata direttamente da un rullino fotografico, guarda l'orientamento dell'output prima di pubblicare.

Le GIF animate vengono fuori come un unico fotogramma. Canvas disegna un fotogramma Non c'è un modo onesto per descrivere questo come qualcosa di diverso da una limitazione - se hai bisogno di ridimensionare un'animazione e mantenerla in movimento, questo non è lo strumento. (I' preferisco dirlo chiaramente piuttosto che lasciarlo scoprire dopo il download.)

Bloccare le proporzioni significa "si adattano all'interno", non "allungamento da riempire". Se si immette sia una larghezza che un'altezza con il rapporto bloccato, l'immagine viene ridimensionata per adattarsi entro quella scatola mantenendo le sue proporzioni Quindi una foto 16:9 con un bersaglio di 1000×1000 esce 1000×563, non 1000×1000 Non distorcerà mai la tua immagine - ma ha anche vinto' t ritaglialo per riempire il quadrato Se hai bisogno di un quadrato esatto da un rettangolo, hai bisogno di un ritaglio, non di un ridimensionamento Quella distinzione confonde costantemente le persone e vale la pena di essere precisi.

Come funzionano effettivamente le proporzioni?

Un rapporto di aspetto è solo larghezza ÷ altezza, espressa in coppia. La matematica è semplice e dovresti essere in grado di farlo nella tua testa, perché impedisce l'errore di ridimensionamento più comune: schiacciante.

Per trovare il lato mancante, mantieni il rapporto costante:

new_height = new_width × (original_height ÷ original_width)

Una foto 4000×3000 (4:3) ridimensionata a 1200 largo diventa 1200 × (3000/4000) = 900 alto. Tipo 1200 e 800 invece, e tu' ho schiacciato un'immagine 4:3 in 3:2 - le facce si restringono, i cerchi diventano ovali e tutti possono dire qualcosa' si spegne anche se possono't dire cosa. IL Calcolatrice delle proporzioni Fa questo per te e riduce il rapporto anche per te.

Ecco i rapporti che continuano a emergere, con la matematica controllata anziché copiata:

Una nota onesta su quel & quot;1.91:1" riga, poiché mi infastidisce ogni volta: 1200×628 non è in realtà 1.91:1. Ridotto correttamente it's 300:157, o 1.911. L'industria lo circonda e tutti si scrollano le spalle. Non importa't nella pratica - ma se tu've mai chiesto perché 1200×628 does't dividere in qualsiasi cosa pulita, che's perché.

Le specifiche dei pixel della piattaforma cambiano; i rapporti non lo fanno quasi mai. Piuttosto che fidarsi di una tabella delle dimensioni in un post sul blog (incluso questo) per una campagna che conta, controlla le specifiche attuali della piattaforma e quindi usa il rapporto sopra per raggiungerlo. La forma è stabile anche quando i numeri vanno alla deriva.

Che dimensione dovrebbe effettivamente essere le immagini web?

Per un sito web che controlli, dove tu'riottimizzi per la vernice più grande e contenta piuttosto che per qualcun altro's uploader: il ragionamento è diverso e migliore.

Inizia dalla casella CSS, non dall'immagine. Trova quanto è effettivamente ampia l'immagine nel tuo layout. Non il contenitore's larghezza massima - il immagine larghezza, al punto di interruzione a cui tieni. Quindi raddoppialo per la retina. Questa è la tua dimensione di esportazione. Tutto ciò che oltre a ciò è un byte che stai pagando per la spedizione e l'utente sta pagando per il download, a beneficio zero visibile.

Servire più di una taglia. Un singolo file 2400px è dispendioso per un telefono che lo renderà a 380 pixel CSS. srcset Esiste proprio per questo:

<img
  src="hero-1200.webp"
  srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2400.webp 2400w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200" height="675"
  alt="..."
/>

Il browser sceglie il file più piccolo che sembrerà ancora nitido su quel dispositivo. e sempre impostato width e height attributi: consentono al browser di prenotare lo spazio prima che l'immagine venga caricata, che è ciò che impedisce alla pagina di saltare e distruggere il punteggio Cumulative Layout Shift.

Ridimensiona prima, comprimi secondo. Questo è l'ordine in cui le persone si ritraggono. comprimendo un'immagine 4000px e poi ridimensionarlo a 800 px significa che hai speso sforzi per ottimizzare i pixel che stavi per buttare via - e probabilmente hai cotto artefatti di compressione nei pixel che hai conservato Taglia prima le dimensioni, poi comprimi ciò che' è rimasto con il compressore di immagini. Le dimensioni sono quasi sempre la vittoria comunque più grande: dimezzare entrambi i lati di un'immagine rimuove 75% dei suoi pixel prima che un compressore lo tocchi. Vado più a fondo su quello nel Guida alla compressione dell'immagine.

Quindi scegli il formato giusto. In modo approssimativo: JPEG per fotografie, PNG Quando hai bisogno di trasparenza o testo e linee nitide, WebP per praticamente tutto sul web perché batte entrambi a qualità equivalente. la Convertitore di formati immagine gestisce quel passaggio e il Panoramica degli strumenti di immagine Copre come i pezzi si incastrano.

Come faccio a ridimensionare un'immagine su Toolz.dev?

1. Apri il Strumento di ridimensionamento dell'. Nessun account, niente da installare.
2. Lascia cadere la tua immagine. Si carica direttamente nel browser Guarda la scheda Rete se vuoi la prova niente's essere inviato ovunque - che's un controllo che vale la pena eseguire su qualsiasi strumento di immagine in cui incolli foto private.
3. Inserisci le dimensioni target. Digitare la larghezza; con il rapporto bloccato, l'altezza segue. Ricordati di raddoppiare per Retina se questo è per uno schermo.
4. Scegli il tuo formato di output- PNG, JPEG o WebP.
5. Scarica. generato nel tuo browser, direttamente sul tuo disco.

Se tu' stai producendo la stessa immagine a diverse dimensioni, lavora ogni volta dall'originale più grande Don't ridimensionare l'esportazione 1200px fino a 600px - torna all'originale ed esporta 600 da quello Ogni re-codice di un file già-perdente compone il danno, allo stesso modo in cui una fotocopia di una fotocopia degrada It's una piccola disciplina che si presenta nel risultato finale.

Domande frequenti

Posso ridimensionare un'immagine senza perdere la qualità?

Il downscaling perde quasi nulla di percepibile - you' rigettare i dati dei pixel che non ti servono più, e il risultato sullo schermo sembra nitido Il upscaling perde sempre qualità, perché il software deve interpolare pixel che non sono mai stati catturati, producendo morbidezza o artefatti visibili Ridimensiona sempre dal più grande originale che hai piuttosto che su da uno piccolo.

Che dimensione devo esportare le immagini per gli schermi Retina?

Esporta a 2× la dimensione in cui viene visualizzata l'immagine. Se il tuo layout esegue il rendering di un'immagine in una scatola 600×400, esportala a 1200×800 in modo che rimanga nitido sui dispositivi con a devicePixelRatio di 2. Andare oltre 2× vale raramente i byte extra, poiché il beneficio visibile è minimo anche su display 3×.

Il ridimensionamento di un'immagine rimuove i dati EXIF?

Sì, quando il ridimensionamento avviene attraverso una tela HTML - come avviene su Toolz.dev - lo strumento ricodifica l'immagine in un nuovo file e i metadati EXIF non vengono trasferiti Ciò significa che i dettagli della fotocamera, il tempo di acquisizione e le coordinate GPS sono tutti spogliati Per la pubblicazione, questo è un vantaggio per la privacy; se hai bisogno di EXIF conservato, utilizza uno strumento che lo supporti esplicitamente.

Posso ridimensionare una gif animata e mantenere l'animazione?

Non con un ridimensionamento basato su tela. Canvas acquisisce un singolo fotogramma, quindi l'output è un'immagine fissa in formato PNG, JPEG o WebP. Il ridimensionamento di un'animazione preservando tutti i suoi fotogrammi richiede uno strumento di elaborazione GIF dedicato.

Come posso ridimensionare un'immagine in una dimensione di file specifica in KB?

La dimensione del file non è qualcosa che imposti direttamente - cade dalle dimensioni, dal formato e dalla qualità di compressione Lavora all'indietro: riduci le dimensioni a ciò su cui l'immagine è effettivamente visualizzata, esporta come WebP o JPEG anziché PNG per le fotografie, quindi abbassa la qualità e ricontrolla la dimensione dell'output Colpire un bersaglio fisso come & quot; sotto 100 KB" di solito sono due o tre passaggi di quel ciclo, non uno.

Come faccio a ridimensionare un'immagine senza ritagliarla?

Mantieni bloccate le proporzioni Quando larghezza e altezza rimangono nella loro proporzione originale, ogni pixel del fotogramma viene preservato e cambia solo la scala Il ritaglio diventa inevitabile solo quando la forma del bersaglio differisce dalla forma della sorgente - inserire una foto 3:2 in uno slot avatar 1:1 significa o scrivere in letterbox lo spazio vuoto o tagliare via parte dell'immagine.

Devo prima ridimensionare o comprimere le mie immagini?

Ridimensiona prima, poi comprimi Ridurre le dimensioni rimuove i pixel in modo definitivo - dimezzando sia la larghezza che l'altezza ne elimina il 75% - che è quasi sempre una vincita più grande in termini di dimensioni del file rispetto alla sola compressione Comprimendo prima di ridimensionare lo sforzo di spreco sui pixel che stai per scartare e puoi cuocere artefatti in quelli che tieni.

Qual è la differenza tra ridimensionamento e ritaglio?

Il ridimensionamento modifica le dimensioni dell'intera immagine, mantenendo tutto il suo contenuto Il ritaglio taglia parte dell'immagine per modificarne l'inquadratura o le proporzioni Se hai bisogno di un quadrato da una foto rettangolare, il ridimensionamento con le proporzioni bloccate si adatterà all'immagine all'interno del quadrato anziché riempirla: hai bisogno di un ritaglio per riempire la cornice.

Esiste un limite di dimensioni del file per il ridimensionamento delle immagini nel browser?

Non c'è un limite imposto dal server, perché non viene caricato nulla - il soffitto pratico è il tuo dispositivo's memoria disponibile Le foto tipiche, inclusi i file di grandi dimensioni della fotocamera, si ridimensionano istantaneamente Immagini estremamente grandi (scansioni ad altissima risoluzione, per esempio) potrebbero richiedere un momento o, su un telefono con memoria limitata, non riescono a caricarsi.

Perché la mia immagine sembra ancora sfocata dopo il ridimensionamento alle dimensioni giuste?

Controlla tre cose in ordine: se sei cresciuto da un originale più piccolo (non fissabile - trova una fonte più grande), se hai tenuto conto del rapporto pixel del dispositivo (un file 600px su uno schermo da 2× deve essere 1200px) e se la piattaforma che hai caricato per ricomprimere l'immagine in seguito Il terzo è comune sui social media ed è meglio mitigato caricando sulla piattaforma's dimensioni consigliate.