Logo sfocato su Shopify o WordPress? Correggi sorgente e dimensioni
Individua la causa di un logo web sfocato: dimensioni sorgenti, miniature del tema, schermi ad alta densità ed esportazioni SVG o PNG adeguate alla visualizzazione.
Risposta rapida
Confronta i pixel effettivi del logo con la dimensione visualizzata. Un raster di 120 px ingrandito a 240 pixel CSS appare morbido. Usa un SVG pulito se piattaforma e tema lo supportano in sicurezza, oppure un PNG abbastanza grande. Verifica anche se il tema carica una miniatura più piccola.
Distingui problemi di sorgente e tema
| Osservazione | Controllo | Intervento |
|---|---|---|
| Originale già sfocato | Dimensioni sorgenti | Recuperare il master o vettorializzare |
| Originale nitido, intestazione morbida | File caricato e larghezza | Correggere dimensioni nel tema |
| Desktop buono, mobile sfocato | Densità dello schermo | Più pixel oppure SVG |
| Logo piccolo in un riquadro grande | Margini vuoti | Adattare l’area di disegno |
I pixel CSS non coincidono sempre con quelli dell’immagine. Un logo largo 200 pixel CSS su uno schermo 2× beneficia di circa 400 pixel sorgenti. È un esempio pratico, non un invito a caricare file enormi. Più pixel aumentano il peso e non recuperano una sorgente già sfocata.
Procedura di correzione
- Controlla l’immagine effettivamente caricata nell’intestazione, non soltanto la libreria media.
- Annota dimensioni naturali e larghezza visualizzata. Verifica separatamente desktop e mobile.
- Recupera il file del designer. Se resta soltanto un raster piatto, crea un master con Logo in vettore.
- Esporta nel formato accettato dal tema. SVG in PNG offre un’alternativa raster con trasparenza quando serve.
- Sostituisci la risorsa, svuota la cache pertinente e controlla la pagina pubblicata in una nuova sessione.
SVG senza aggirare la sicurezza
Alcuni sistemi limitano SVG perché può contenere elementi attivi o esterni. Segui la procedura di caricamento e pulizia prevista dalla piattaforma. Non disattivare protezioni generali per caricare un solo logo. Un PNG trasparente delle dimensioni corrette rimane una soluzione valida.
L’ottimizzatore SVG riduce marcatura superflua in un master pulito. Non recupera dettagli mancanti né sistema lettere deformate. Verifica l’aspetto dopo ogni trasformazione.
Controlli sul sito pubblicato
- Intestazione, menu mobile e piè di pagina usano il file corretto.
- Il tema non deforma le proporzioni.
- Lo sfondo chiaro e quello scuro mantengono contrasto leggibile.
- La risorsa carica e le dimensioni evitano spostamenti della pagina.
- Le lettere piccole restano leggibili alla dimensione effettiva.
Domande frequenti
Impostare 300 DPI migliora il logo sul web?
Non da solo. Il browser mostra pixel secondo il layout. Contano soprattutto dimensioni sorgenti e visualizzate, non un’etichetta di risoluzione di stampa.
Conviene sempre SVG?
No. È adatto a loghi puliti e icone. PNG resta pratico se il sistema rifiuta SVG o il disegno dipende da dettagli raster. Scegli il formato sicuro più semplice che mantenga nitidezza.