Perché il PNG del mio logo è sfocato e come posso correggerlo?

Individua il primo punto in cui compare la perdita di nitidezza

Esportare un PNG più grande aiuta quando la grafica originale contiene abbastanza dettagli. Ingrandire un piccolo file raster non può recuperare le curve e le forme esatte delle lettere del logo vettoriale originale.

Apri il PNG stesso prima di modificare il sito web o esportare di nuovo. Esaminalo alla dimensione d’uso prevista e a livello di pixel. Poi confrontalo con il sorgente approvato e con la versione caricata.

Usa i controlli seguenti per individuare la fase che richiede attenzione. Non presumono che ogni bordo poco nitido abbia la stessa causa.

• Poca nitidezza già nella grafica originale: trova un sorgente migliore o rivedi la versione del design per piccole dimensioni.
• Sorgente nitido, PNG scaricato poco nitido: controlla dimensioni di esportazione, limiti e impostazioni di rasterizzazione.
• Download nitido, ma poca nitidezza sul sito o nelle email: controlla quale immagine viene servita e come viene scalata.
• Marchio nitido, lettere minuscole illeggibili: rivedi la dimensione minima del logo o usa una versione semplificata approvata.

Controlla cosa contiene davvero il sorgente

Un vero master vettoriale offre forme che possono essere renderizzate a nuove dimensioni. Un SVG può contenere anche immagini bitmap incorporate, quindi il solo nome di un file SVG non dimostra che il logo sia grafica vettoriale.

Se il tuo sorgente è un piccolo PNG copiato da un vecchio sito web, chiedi il file di lavoro originale o un’esportazione vettoriale verificata. Riesportare quel piccolo PNG a dimensioni maggiori aggiunge pixel stimati. Adobe descrive l’upsampling come un processo che può introdurre artefatti e non può aggiungere dettagli assenti nell’originale.

Se il master non è disponibile, ricostruire o ricalcare il marchio è un’attività di design separata. Confronta le forme delle lettere e le figure ricostruite con un riferimento approvato prima di usarle come nuovo master.

Approfondimenti: MDN: formati di immagine · Adobe: dimensioni dell’immagine e ricampionamento

Confronta i pixel del file con quelli visualizzati

Usa la dimensione di visualizzazione effettiva anziché la larghezza che ti aspettavi dal layout. Gli strumenti di sviluppo del browser possono aiutarti a controllare il riquadro dell’immagine renderizzata. Considera i breakpoint responsive e qualsiasi trasformazione che ingrandisca il logo.

Ridimensionare il PNG esistente da 200 × 50 a 400 × 100 non crea un’esportazione equivalente a quella ottenuta dalla grafica vettoriale. I due file possono avere le stesse dimensioni ma dettagli diversi sui bordi. Il rapporto di pixel del dispositivo è la relazione fra pixel fisici dello schermo e pixel CSS.

Per il calcolo completo e gli esempi di consegna, consulta le dimensioni PNG del logo per siti web ed email.

Ecco un esempio illustrativo con il logo immaginario di Morrow Quay, non un test effettuato per un cliente reale:

• L’intestazione visualizza il logo a 200 × 50 pixel CSS.
• Il PNG caricato contiene solo 200 × 50 pixel.
• Un obiettivo 2× richiede 400 × 100 pixel.
• Riesporta la grafica vettoriale a 400 × 100, mantenendo la visualizzazione a 200 × 50.

Continua con: dimensioni PNG del logo per siti web ed email

Approfondimenti: MDN: devicePixelRatio

Controlla l’immagine effettivamente servita dalla destinazione

Un originale grande non aiuta se la pagina carica una miniatura generata più piccola. Controlla la risorsa selezionata e le sue dimensioni in pixel. Per le immagini responsive, la proprietà currentSrc del browser identifica l’URL dell’immagine scelta. Confronta quella risorsa con il caricamento originale.

Se il file servito è più piccolo, esamina le impostazioni delle immagini del CMS o chiedi allo sviluppatore di usare la risorsa appropriata. Se le dimensioni sono corrette, confronta visivamente i file prima di attribuire il problema all’ottimizzazione. Un servizio può ridimensionare, convertire o elaborare in altro modo un caricamento, ma verifica quale modifica sia effettivamente avvenuta.

PNG usa una compressione senza perdita. Ridurne il peso con un processo realmente senza perdita non sfoca di per sé i pixel. Anche convertire in PNG un JPEG già danneggiato conserva il danno esistente. Controlla l’intero percorso di elaborazione, compresi ridimensionamenti o conversioni con perdita, anziché trattare la “compressione” come un’unica operazione.

Approfondimenti: MDN: currentSrc · MDN: formati di immagine e compressione

Controlla i margini e le impostazioni dei bordi

I margini trasparenti occupano parte delle dimensioni dell’immagine. Un’area larga 400 pixel con un marchio largo 200 pixel ha solo 200 pixel orizzontali che descrivono il logo visibile. Se visualizzi l’intera immagine a dimensioni maggiori per far sembrare più grande il marchio, ingrandisci anche quei pixel. Correggi i limiti accidentali nel sorgente, preservando l’area di rispetto approvata.

Un po’ di smussatura lungo le curve è normale antialiasing. Valuta la risorsa sia alla dimensione d’uso reale sia ingrandita. Lettere estremamente piccole o tratti sottili possono richiedere un’alternativa approvata per piccole dimensioni, anche quando le dimensioni di esportazione sono tecnicamente sufficienti.

Figma offre opzioni di ricampionamento delle immagini PNG: Detailed è l’impostazione predefinita e Basic usa il campionamento nearest-neighbor. Confronta le impostazioni sulla tua grafica effettiva: un bordo dall’aspetto più netto non è automaticamente un risultato più fedele. Figma accetta anche una larghezza fissa di esportazione, come 400w.

Illustrator offre la funzione nativa Export for Screens per output raster alle scale scelte. Le opzioni di esportazione PNG includono controlli di antialiasing. Verifica una nuova esportazione dalla grafica originale, anziché ridimensionare ripetutamente il PNG precedente.

Approfondimenti: Figma: impostazioni di esportazione · Adobe: Export for Screens · Adobe: opzioni di esportazione PNG

Riesporta e verifica la correzione

Crea un solo file sostitutivo alle dimensioni richieste prima di rigenerare l’intero pacchetto. Inseriscilo nello stesso contesto e confrontalo con la versione precedente. Controlla di nuovo il file servito, così una vecchia miniatura o una risorsa in cache non confonde il risultato.

Con un sorgente SVG approvato, le dimensioni PNG personalizzate di logopack.app Pro possono aiutare a creare file specifici per ogni destinazione come parte di un pacchetto logo. È un flusso di esportazione, non un servizio di vettorializzazione o riparazione di loghi a bassa risoluzione.

Se la destinazione supporta SVG, una versione vettoriale verificata può essere più adatta. La nostra guida ai formati di file spiega questa scelta, mentre la guida all’esportazione da Figma tratta la preparazione del sorgente.

Considera il problema risolto quando il file corretto è sufficientemente nitido alla dimensione prevista, lo sfondo funziona e il sistema di destinazione conserva le proporzioni previste. Mantieni il master verificato e le impostazioni di esportazione per la prossima consegna.

Continua con: guida ai formati di file · guida all’esportazione da Figma

Approfondimenti: Prepara le esportazioni con logopack.app