14 strumenti gratuiti per immagini e progettazione eseguibili nel tuo browser

Il lavoro sull'immagine ha un problema specifico: il lavoro è solitamente piccolo e gli strumenti offerti sono enormi. Devi eliminare 400 KB da un'immagine hero, o ottenere un valore esadecimale menzionato dal tuo designer, o generare una favicon che nessuno ha ancora creato. Ciò non richiede un abbonamento.

I quattordici strumenti seguenti riguardano la preparazione delle immagini, il lavoro con il colore, la generazione di effetti CSS e le piccole risorse di produzione che passano inosservate. Tutti vengono eseguiti localmente, il che conta più per le immagini che per il testo: la foto che hai appena compresso è spesso una foto che non hai ancora pubblicato.

La maggior parte dei problemi di immagine sono in realtà problemi di peso. Una pagina che sembra lenta di solito contiene immagini più grandi delle dimensioni di visualizzazione, nel formato sbagliato e con un'impostazione di qualità che nessuno ha mai messo in discussione.

Quanto dovresti comprimere? La risposta onesta è: finché non sembra sbagliato, poi fai un passo indietro. Per un'immagine fotografica eccezionale, la qualità compresa tra il 70 e l'80% è solitamente indistinguibile dall'originale a dimensioni di visualizzazione normali. Per un logo, uno screenshot o qualsiasi cosa con colori uniformi e bordi netti, usa PNG e comprimi di più: guadagni di più e perdi di meno.

Una regola pratica: qualsiasi cosa sotto i 200 KB va bene per un'immagine hero, sotto gli 80 KB per una miniatura, e se non riesci a scendere sotto i 300 KB probabilmente hai un problema di dimensione piuttosto che di qualità.

La conversione di un'immagine in un URI di dati Base64 rimuove una richiesta HTTP, il che sembra una pura vittoria. Di solito non lo è. La stringa codificata è circa un terzo più grande del file binario, non può essere memorizzata nella cache separatamente e gonfia il tuo CSS o HTML.

In linea solo quando l'immagine è piccola, inferiore a pochi kilobyte, utilizzata una volta e critica. Una piccola icona in un singolo modello di email è il caso classico. Per qualsiasi cosa ripetuta su più pagine o più grande di pochi kilobyte, servila come file e lascia che il browser lo memorizzi nella cache.

Sii chiaro su cosa fa. Rimuove o oscura il segno visibile. Non è in grado di ricostruire i pixel sottostanti: le informazioni su cui è stata dipinta scompaiono e nessun filtro le inventa nuovamente. I risultati vanno da quelli invisibili, quando il segno si trova su uno sfondo semplice, a una sbavatura evidente quando si trova sui dettagli.

Un'altra cosa che vale la pena dire chiaramente: rimuovere la filigrana di qualcun altro e pubblicare il risultato è un problema di copyright nella maggior parte delle giurisdizioni e una violazione della licenza indipendentemente dal fatto che tu possa essere scoperto o meno. Rimuovere i segni dalle tue immagini o da stock di cui hai ottenuto la licenza è il caso a cui è rivolto questo strumento.

Il colore è il luogo in cui i piccoli errori diventano molto visibili. Un rapporto di contrasto che non riesce a raggiungere l'accessibilità, un valore esadecimale che in realtà è una tripla HSL, una tavolozza che appare coerente sul monitor e confusa su un proiettore.

Un avvertimento sugli strumenti per il colore: presuppongono tutti che il tuo monitor sia calibrato e che la persona che visualizza la tua pagina abbia gli occhi funzionanti. Nessuna delle due ipotesi è sicura. Questo è un motivo per preferire le combinazioni controllate dal contrasto rispetto a quelle soggettive.

Scrivere a mano una sfumatura o un'ombra a strati è un compito davvero spiacevole. La sintassi è complicata, non puoi vedere cosa stai producendo e la differenza tra un'ombra buona e una cattiva sono pochi pixel di sfocatura.

Il trucco per tutti e quattro è la moderazione. Due ombre, una stretta e scura e una ampia e morbida, vengono interpretate come elevazione fisica. Un'ombra sembra un sito web di quindici anni fa. Genera, copia, quindi elimina finché non puoi più dire che è lì.

Ecco l'intero cluster che svolge un vero lavoro. Una pagina ha bisogno di un eroe con un'immagine di sfondo, un'intestazione e un pulsante e nessuno di questi è stato ancora creato.

Cinque strumenti, nessuna suite di progettazione e ogni output è un valore che puoi incollare direttamente nel codice.

Le mie immagini vengono caricate ovunque? No. La compressione, il ridimensionamento e la conversione Base64 avvengono tutti nel tuo browser, motivo per cui non esiste alcun limite di dimensione del file né coda di caricamento.

La compressione di un'immagine perde qualità? Sempre, per definizione. La domanda è se è visibile. Con una qualità del 70-80% e dimensioni corrette, di solito non lo è.

Perché l'immagine ridimensionata appare ancora grande? Nove volte su dieci hai compresso prima di ridimensionarla o hai salvato come PNG quando una foto è migliore come JPEG.

Posso utilizzarli per il lavoro dei clienti? Sì, senza attribuzione e senza restrizioni commerciali.

Funzionano su un telefono? Sì, anche se il ridimensionamento e la compressione di foto di grandi dimensioni su un telefono dipendono dalla memoria del dispositivo e non da un server.

Ridimensiona prima di comprimere, controlla il contrasto prima di discutere sul colore, mantieni le ombre sottili e non dimenticare mai la favicon. Questo è comunque la maggior parte di ciò che una suite di design faceva per te.