5 strumenti gratuiti per immagini, colori e QR code

Ci sono lavori piccoli che tornano ogni settimana.

Comprimere una foto prima di metterla sul sito. Avere il logo in bianco per uno sfondo scuro. Creare il QR code per il menu. Ritrovare il codice esatto del colore del brand.

Sono operazioni da due minuti, ma spesso finiscono su siti pieni di pubblicità, che chiedono una registrazione o che caricano i tuoi file su un server di cui non sai nulla.

Hash42 Tools è la raccolta di strumenti gratuiti di Hash42 Labs, su tools.hash42.xyz. In questa guida trovi i 5 più usati e, per ognuno, cosa fa e come usarlo bene.

01. QR Generator

QR Generator crea QR code per diversi tipi di contenuto:

• link a un sito;
• testo libero;
• chat WhatsApp, email e numero di telefono;
• posizione su Google Maps;
• accesso a una rete Wi-Fi;
• biglietto da visita (vCard).

Puoi scegliere stile e colori, aggiungere un logo al centro oppure partire da un preset già pronto: Hash42, Minimal, Premium, Restaurant, Business e Cyberpunk.

Prima di stampare un QR code

Un QR code finisce spesso su carta: menu, volantini, biglietti da visita, vetrine. Una volta stampato non si corregge più, quindi conviene controllare tre cose.

Il contrasto. Il lettore del telefono deve distinguere bene i moduli dallo sfondo. Moduli scuri su sfondo chiaro restano la scelta più sicura, anche quando usi i colori del brand.

Il logo. Un logo al centro copre una parte del codice. Il QR resta leggibile grazie alla correzione d'errore, che ha quattro livelli: L, M, Q e H. Il livello M, il più usato, permette di recuperare circa il 15% dei dati; il livello H circa il 30%. Con un logo grande serve un livello alto.

La prova reale. Prima di mandare in stampa, inquadra il QR con almeno due telefoni diversi, alla dimensione finale e con la luce del posto in cui verrà esposto.

Contenuto
  ↓
Stile e colori con buon contrasto
  ↓
Logo, se serve
  ↓
Prova con più telefoni
  ↓
Stampa

Statico o dinamico

Un QR code statico contiene direttamente il link o il testo: funziona finché esiste la destinazione, senza scadenze. Uno dinamico punta a un servizio intermedio che poi reindirizza: se quel servizio chiude o l'abbonamento scade, il QR stampato smette di funzionare.

Molti generatori gratuiti producono QR dinamici che si bloccano dopo un periodo di prova. Prima di stampare centinaia di menu, verifica sempre quale dei due stai creando.

QR Generator crea i QR code direttamente nel browser, senza un servizio intermedio: sono statici, contengono il contenuto stesso e non scadono.

02. Image Optimizer

Image Optimizer comprime, converte e ridimensiona le immagini nei formati JPG, PNG, WebP e AVIF. Tutto avviene nel browser, senza login e senza caricare i file su server esterni.

Quale formato scegliere

• Foto: WebP o AVIF. Comprimono meglio di JPEG a parità di qualità e sono supportati dai browser moderni.
• Logo e grafiche con trasparenza: PNG o WebP. JPEG non supporta la trasparenza: un logo salvato in JPEG avrà sempre un rettangolo di sfondo.
• Dimensioni: ridimensiona l'immagine alla larghezza a cui verrà mostrata. Una foto larga 4000 pixel in uno spazio da 800 pesa molto più del necessario.

Foto dal telefono
  ↓
Ridimensiona alla larghezza reale
  ↓
Converti in WebP o AVIF
  ↓
Controlla la qualità a occhio
  ↓
Carica sul sito

Se vuoi capire perché il peso delle immagini conta così tanto, l'ho spiegato nella guida su come rendere più veloce il tuo sito.

03. Batch Optimizer

Batch Optimizer fa lo stesso lavoro su decine di immagini in una volta sola, sempre nei formati JPG, PNG, WebP e AVIF e sempre nel browser, senza login e senza upload.

È lo strumento giusto quando devi preparare:

• la galleria fotografica di un sito;
• le foto dei piatti per un menu digitale;
• le immagini dei prodotti di un catalogo;
• un archivio di foto prima di caricarlo su un CMS.

Due consigli

Usa le stesse impostazioni per tutte le immagini di una galleria: qualità e dimensioni uniformi danno un risultato più ordinato e un peso prevedibile.

Conserva sempre gli originali in una cartella a parte. Una foto compressa si può ricomprimere, ma la qualità persa non si recupera.

04. WhiteLogo

WhiteLogo trasforma un logo PNG o WebP nella sua versione bianca. Lavora anche su più file insieme ed esporta in PNG o WebP.

Puoi scegliere tra bianco, bianco morbido, bianco caldo o un colore personalizzato, e tra due modalità: una rende bianco ogni pixel visibile, l'altra conserva le differenze di luminosità del logo originale. L'anteprima mostra il risultato su sfondo scuro, chiaro o a scacchi, così vedi subito come starà nel posto in cui lo userai.

L'elaborazione è locale: nessun file viene inviato a un server.

Quando serve un logo bianco

• nel footer scuro di un sito;
• sopra la foto principale di una pagina;
• in un video, una slide o un post social;
• su materiale stampato a fondo pieno.

Attenzione al formato

Il logo bianco deve avere lo sfondo trasparente, altrimenti diventa un rettangolo bianco. Per questo va salvato in PNG o WebP, mai in JPEG. Se per il sito hai anche una versione SVG del logo, quella resta la scelta migliore: è vettoriale e resta nitida a qualsiasi dimensione.

05. Color Picker

Color Picker serve a scegliere, convertire e salvare colori, palette e gradienti. Mostra lo stesso colore in HEX, RGB e HSL, permette di ricavare i colori da un'immagine e include palette pronte e un controllo del contrasto.

HEX, RGB e HSL

Sono tre modi diversi di scrivere lo stesso colore:

• HEX (#F97316) è il formato più comune nel CSS e negli strumenti di design.
• RGB (249, 115, 22) indica quanto rosso, verde e blu contiene il colore.
• HSL (25, 95%, 53%) indica tonalità, saturazione e luminosità.

HSL è il più comodo quando devi creare varianti dello stesso colore: per una versione più scura basta abbassare la luminosità.

:root {
  --brand: #f97316;
  --brand-hover: hsl(25 95% 45%);
}

Il contrasto

Un colore può essere perfetto per il brand e illeggibile come colore del testo. Le linee guida WCAG chiedono un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande.

Prendi l'arancione #F97316, il colore predefinito dello strumento: il controllo del contrasto indica 2,8:1 sul bianco e 7,5:1 sul nero. Funziona come sfondo di un pulsante con testo scuro, non come colore del testo su fondo bianco.

Scegli il colore
  ↓
Controlla il contrasto
  ↓
Sotto 4,5:1 → solo testo grande o elementi decorativi
  ↓
Sopra 4,5:1 → anche per il testo

Cosa hanno in comune

I cinque strumenti seguono le stesse regole: sono gratuiti, non chiedono un account e fanno tutto il lavoro nel browser, anche dal telefono.

Questo conta soprattutto quando lavori su materiale che non è ancora pubblico. Loghi dei clienti, foto non ancora pubblicate, dati di un biglietto da visita: restano sul tuo dispositivo.

Scegli il file
  ↓
Elaborazione nel browser
  ↓
Scarichi il risultato
  ↓
Nessun file inviato a un server

Se vuoi verificarlo, apri gli strumenti per sviluppatori del browser, vai nella scheda Rete e poi elabora un'immagine: non vedrai nessuna richiesta che invia il file.

Sulla pagina degli strumenti trovi anche SVG Generator e Favicon Generator, e altri sono in arrivo.

Perché li ho creati

Comprimere una foto o creare un QR code non dovrebbe richiedere una registrazione, un indirizzo email o la pazienza di chiudere una pubblicità dopo l'altra.

Ho creato questi strumenti per dare a tutti la possibilità di fare questi lavori in modo veloce e pratico: senza registrarsi, senza lasciare i propri dati e senza essere bombardati di pubblicità.

Checklist prima di pubblicare immagini e grafiche

Prima di caricare qualcosa sul sito o mandarlo in stampa, verifica almeno questi cinque punti:

• Le foto sono ridimensionate e in WebP o AVIF.
• I loghi hanno lo sfondo trasparente e sono in PNG, WebP o SVG.
• Il QR code è statico, ha un buon contrasto ed è stato provato con più telefoni.
• I colori del testo superano il contrasto di 4,5:1 sul loro sfondo.
• Gli originali sono conservati in una cartella a parte.

Strumenti piccoli, lavoro pulito

Nessuno di questi strumenti cambia da solo un progetto. Ma un'immagine leggera, un logo che si vede bene su ogni sfondo, un QR che funziona tra un anno e un colore leggibile sono dettagli che, sommati, fanno la differenza tra un lavoro approssimativo e uno curato.

Gli strumenti sono su tools.hash42.xyz, gratuiti e senza registrazione.

Fonti

• Hash42 Tools
• QR Generator
• Image Optimizer
• Batch Optimizer
• WhiteLogo
• Color Picker
• DENSO WAVE, QR Code Error Correction
• web.dev, Image performance
• W3C, Understanding WCAG 2.2: Contrast (Minimum)
• MDN, hsl()