Facebook noscript Pixel

File grafici, quale utilizzare per il Web e perché

File grafici, quale utilizzare? Sembra discorso scontato ma non lo è. Capire bene i tipi di file grafici disponibili, peculiarità e usi, ad oggi, diventa sempre più importante al fine di utilizzare quello corretto nell'ambito grafico relativo.
Condividi su linkedin
Condividi su facebook
Condividi su twitter
Condividi su whatsapp

Categorie

File grafici, quale utilizzare per il Web e perché
Cosa troverai in questo articolo

File grafici, quale utilizzare? Sembra discorso scontato ma non lo è. Capire bene i tipi di file grafici disponibili, peculiarità e usi, ad oggi, diventa sempre più importante al fine di utilizzare quello corretto nell’ambito grafico relativo.

Categorie grafiche

Per capire bene di cosa stiamo parlando, occorre fare una piccola digressione sui tipi di file digitali. Le macro-categorie di appartenenza sono vettoriale e raster.

Tipi di file vettoriali

Argomenti Correlati
Pagina | Scopri i servizi

I file vettoriali, sono quelli basati su forme geometriche come punti, segmenti di retta, curve di Bézier, ecc. (le cui forme vengono modellate attraverso calcoli matematici) e alle quali possono essere attribuiti colori e anche sfumature che determinano le caratteristiche dell’immagine e che, in modo assoluto, non alterano la qualità della stessa. Sono possibili l’UP-Scaling e il DOWN-Scaling anche quando vengono sensibilmente ingranditi o rimpiccioliti.

Immagini Vettoriali 

  • Si utilizzano nel Desktop Publishing, in Pubblicità e nalla Brand Identity
  • Formati noti: AI, EPS, SVG
  • Software: Illustrator, Photoshop, CSS
  • Upscaling: SI
  • Downscaling: SI

Tipi di file raster

Argomenti Correlati
Pagina | Scopri i servizi

I file raster (dall’inglese griglia) sono determinati da pixel quadrati che formano la griglia ortogonale di punti che costituisce un’immagine raster e che contengono informazioni dettagliate come il colore dell’immagine.

La quantità dei pixel presenti è data dalla risoluzione calcolata in DPi (dot x inch). Maggiore DPi vuol dire migliore qualità, 300 per il Desktop Publishing, 72 per il Web. Queste immagini, se allargate o rimpicciolite, perdono qualità. Vietato l’UP-Scaling.

Immagini Raster 

  • Si utilizzano nella Fotografia, in Post-produzione e nel Web Design
  • Formati noti: RAW, JPG, BMP, PNG
  • Software: Camera RAW, Photoshop
  • Upscaling: NO
  • Downscaling: SI

Compressione nei file raster

I tipi di appartenenza vengono ulteriormente suddivisi in base alla loro peculiarità di perdita di informazioni/qualità che avviene sempre tramite algoritmi interni di compressione.

Non compressi: file che pesano maggiormente sulla memoria.

  • Raw (grezzo) è il file solitamente utilizzato per mantenere intatta la qualità di un’immagine.
  • Bmp (Windows Bitmap) è veloce da leggere e da modificare ma comporta un maggior peso in termini di byte.

Compressione lossless: minor spazio su disco, stessa qualità e risoluzione.

  • Png (Portable Network Graphics) è uno dei più usati, pesa poco e mantiene le eventuali trasparenze ed è quindi perfetto per il web.
  • Gif (Graphics Interchange Format) che ha tra i suoi punti di forza la possibilità di creare delle immagini animate.
  • Tiff (Tagged Image File Format), mantiene numerose informazioni importanti anche dopo la compressione; usato per scanner e stampanti.

Compressione lossy: questi tipi di formato perdono qualità ogni volta che vengono salvati e modificati, non sono quindi adatti al fotoritocco ma sono perfetti per lo scambio di immagini via internet.

  • Jpeg (Joint Photographic Expert Group) è sicuramente il formato più utilizzato, crea una potente compressione.

Ottimizzazione dei file raster per il Web

Decisamente e sicuramente è buona pratica provvedere prima di qualsiasi upload online alla eventuale ottimizzazione di un file grafico. Inutile dire che il miglior tool sia Photoshop ma, essendo non proprio semplice per non gli addetti ai lavori, è possibile utilizzare altri software meno complessi.

Tuttavia, può capitare di avere un database media obsoleto o comunque appartenente a qualche Sito già avviato.

Cosa fare dunque?

Basta installare plugin adeguati e il gioco è fatto. Ve ne consiglio due … anzi no, tre.

EWWW Image Optimizer: gratuito, efficace, semplice

EWWW Image Optimizer 

IMAGIFY; potente in versione free, impareggiabile in versione pro. Si abbina con WP Rocket il miglior plugin di gestione cache per WordPress.

IMAGIFY 

Bonus

Enable Media Replace: questo plugin è a dir poco necessario!! Capita, infatti, che alcune immagini vengano modificate per esigenze editoriali o semplicemente perché errate o modificate. Bene, a quel punto, caricarle e sovrascriverle via FTP darebbe non pochi problemi.

Grazie a EMR puoi sostituire nel backend la tua immagine in un click, a patto però che il nome del file sia identico. A tutto il resto ci pensa lui.

Enable Media Replace 

That’s all 😉

SEO Tester Tool

Hai mai provato a verificafre lo stato di salute della SEO del tuo Sito Web?
Condividi su linkedin
Condividi su facebook
Condividi su twitter
Condividi su whatsapp
Gian Luca Partengo

Gian Luca Partengo

Professionista del Web e del Marketing da oltre 20 anni. Ha lavorato per importanti Agenzie e Aziende italiane e ha creato e seguito passo a passo il Brand di numerosi Clienti. Oggi sviluppa progetti altamente professionali a partire da un'analisi sullo stato di salute di un Sito Web e della sua SEO Organica, fornendo anche consulenza a privati e aziende.

SEO Tester Tool

Verifica GRATIS la salute della SEO del tuo Sito Web!