Il tuo sito web include molte foto, comprese quelle di prodotti, collezioni e icone, proprio come altri siti, la maggior parte di esse sono formati di immagine PNG o JPEG. Ma hai scoperto che più immagini PNG o JPEG vengono caricate, più lentamente viene caricato il tuo sito web. Se è il tuo caso, è tempo di pensare all'ottimizzazione dell'immagine per alcuni tipi di immagini come le icone in formato SVG.
Rispetto a PNG e JPEG, i file SVG hanno il vantaggio di aumentare la velocità di caricamento pur mantenendo l'alta risoluzione delle immagini. Scopriamo gli aspetti migliori dei file SVG e perché dovresti utilizzarli per aumentare le prestazioni del tuo sito web attraverso questo articolo.
Su questa pagina
Che cos'è il file SVG
A differenza di altri file immagine popolari come PNG o JPEG, SVG (Scalable Vector Graphics) è un formato immagine basato su vettori e può essere scalabile più piccolo o più grande senza perdere la qualità. Per comprendere i file SVG, forse confronteremo le loro caratteristiche con il formato ampiamente utilizzato PNG.
| SVG | PNG | |
|---|---|---|
| Tipo di file | Basato su vettori | Basato su raster (o basato su pixel) |
| Dimensione del file | Molto più piccolo di PNG | Grande con alta risoluzione |
| Come funziona | Utilizzare il linguaggio di programmazione XML per comunicare con il browser Web o le applicazioni per visualizzare un'immagine | Sottoponiti al processo di filtraggio, codifica e compressione senza perdita di dati per visualizzare l'immagine compressa in modo identico all'immagine sorgente |
| Ideale per | Design del sito web, logo, icona | Fotografie, editing e logo |
Perché è necessario utilizzare i file SVG
Il formato SVG presenta molti vantaggi eccezionali che lo rendono la scelta migliore per la progettazione di siti Web e applicazioni.
Scalabilità illimitata
Grazie all'utilizzo dei vettori, le immagini SVG sono indipendenti dalla risoluzione e scalabili in qualsiasi dimensione senza che la qualità ne risenta. In base all'algoritmo matematico per creare l'immagine, il browser web la leggerà e la visualizzerà sullo schermo. Basta un piccolo codice e può adattarsi a vari visualizzatori come finestre di visualizzazione, dispositivi, design reattivi, ecc., Il formato SVG è più semplice per far apparire le tue immagini con rendering completo sullo schermo senza perdita di qualità.
Questa funzionalità rende SVG superiore ai tipi di file basati su raster come PNG o JPEG. Per quanto riguarda le immagini raster, le informazioni sull'immagine vengono archiviate in una griglia di pixel. Pertanto, quando ingrandiamo l'immagine, ogni pixel deve espandersi oltre la sua dimensione originale e ciò provoca una diminuzione della qualità.
Personalizzazione facile
I file SVG offrono molto controllo ai web designer per apportare modifiche come forme vettoriali, testi, colori con alcuni software di progettazione popolari come Adobe Illustrator o CorelDraw, ecc. Il file immagine viene modificato in pochi minuti.
Taglia piccola
Come accennato, un file SVG è molto più leggero di un'immagine raster e, soprattutto, non è necessario scendere a compromessi tra dimensioni ridotte e qualità dell'immagine. Più piccole sono le immagini, più veloce sarà il caricamento del tuo sito web. Pertanto, gli SVG possono migliorare la velocità di caricamento del tuo sito web in generale.
SEO amichevole
Poiché il formato SVG è definito in base al testo, il motore di ricerca può leggere, eseguire la scansione e indicizzare le immagini in modo più rapido e semplice. Quindi, puoi migliorare il ranking della tua pagina e l'ottimizzazione dei motori di ricerca. In questo senso gli SVG superano i PNG o i JPEG perché i motori di ricerca riconoscono le immagini raster solo in base ai loro metadati come titolo, parole chiave o tag ALT.
Ora, la maggior parte dei fornitori di temi per siti web desidera dare priorità a fattori come la velocità di caricamento, le immagini ad alta risoluzione e l’alto posizionamento sui motori di ricerca. In particolare, alcuni temi Shopify come Be Yours, designeranno alcune sezioni o blocchi in cui sono accettati solo SVG. Pertanto in questo caso si consiglia di scegliere SVG rispetto a PNG o JPEG.
Utilizzo di SVG nel tema Be Yours
Un file SVG può essere creato da solo con alcune comuni app di progettazione grafica come Adobe Photoshop o Adobe Illustrator seguendo le istruzioni contenute in questo articolo .
Se è un po' complicato creare SVG da solo, abbiamo un fornitore di icone SVG, Remixicon.com , per semplificarti la vita. Remixicon.com ha un'enorme libreria di icone SVG tra cui scegliere e puoi facilmente ottenere qualsiasi icona desideri in soli due clic:
- Su Remixicon.com, digita una parola chiave per cercare l'icona desiderata.
- Fare clic sull'icona dall'elenco e scegliere il pulsante Copia SVG .
Accedi alla sezione/blocco del tuo tema in cui desideri aggiungere un'icona SVG e incolla il codice dell'immagine SVG nel relativo campo che la contiene.
Ad esempio, nel tema Be Yours, hai la sezione Garanzia che ti consente di aggiungere SVG personalizzato nel campo Icona SVG personalizzata .
- Fare clic su Salva per confermare la modifica.
Grazie per il tuo tempo di lettura. Ci auguriamo che questo articolo ti sia utile. Seguici oggi su Facebook , Twitter e sul blog del sito web per ricevere i nostri ultimi aggiornamenti!
