Guarda il webinar: https://it.siteground.com/blog/ottimizzare-le-immagini-per-il-web/
Quanto sono importanti le immagini nel tuo sito web? L’immagine giusta posizionata nel modo giusto può essere l’elemento differenziante che ti permette di convertire i tuoi utenti. Ma serve cura nella scelta dei formati, nell’ottimizzazione e negli strumenti di gestione.
Marco Tesselli, Graphic Designer con oltre 15 anni di esperienza, risponderà ci mostra:
- Quali formati immagine usare e quando
- Le differenze e gli ambiti di utilizzo di raster e vettoriali
- Come ottimizzare le immagini per WordPress
- I criteri di accessibilità e l’ottimizzazione SEO
- I migliori software per la gestione delle immagini
N.B. le parole segnalate in blu sono dei collegamenti ai file che utilizzo come esempio. Allego anche qui il link alla cartella principale:
https://drive.google.com/open?id=0B6X1a2GQGpOiNVplLVlMT3BmM2c
Presentazione di Photoshop CC Desktop in sede al corso "Il Web:strategie e linguaggi di comunicazione", tenuta il 18 Aprile 2016.
N.B. le parole segnalate in blu sono dei collegamenti ai file che utilizzo come esempio. Allego anche qui il link alla cartella principale:
https://drive.google.com/open?id=0B6X1a2GQGpOiNVplLVlMT3BmM2c
Presentazione di Photoshop CC Desktop in sede al corso "Il Web:strategie e linguaggi di comunicazione", tenuta il 18 Aprile 2016.
Workshop Human Singularity Design ed AI, Adobe Firefly, Midjourney, Dalle-3, ...Human Singularity
Questo incontro è pensato non solo come un seminario, ma come un viaggio alla scoperta di come l'AI può trasformare radicalmente il nostro modo di concepire e realizzare progetti creativi.
Immaginate un ambiente dove la vostra visione artistica incontra le capacità quasi illimitate dell'AI, aprendo un mondo di possibilità che vanno ben oltre i tradizionali metodi di creazione. Durante questo workshop, guidato da esperti del settore e pionieri della tecnologia, vi immergerete in sessioni pratiche e dimostrazioni dal vivo, scoprendo come trasformare le vostre idee in realtà con l'aiuto di strumenti all'avanguardia come Adobe Firefly, DALL-E 3, Midjourney e Stable Diffusion. Attraverso esercizi specifici e sfide creative, avrete l'opportunità di sperimentare direttamente con queste tecnologie, apprendendo come personalizzare i vostri progetti per ottenere risultati unici e sorprendenti.
Questo workshop non è solo un'opportunità di apprendimento; è un invito a far parte di una comunità di innovatori, un luogo dove idee audaci prendono forma e dove la vostra voce può contribuire a definire il futuro del design e della creatività. Che siate designer esperti, artisti in cerca di nuove ispirazioni, o semplicemente curiosi di esplorare le potenzialità dell'intelligenza artificiale, questo incontro si propone di essere un momento di crescita, scoperta e condivisione.
Vedremo come sfruttare le potenzialità di WPF per realizzare applicazioni diverse dalle classiche LOB (Line of Business applications), basandosi su 3D e Natural User Interface.
CORSO BASE DI PHOTOSHOP
OBIETTIVI
Questo corso è rivolto a tutti coloro che muovono i primi
passi nel mondo della grafica. Infatti è stato pensato e progettato per chi, amando il fotoritocco e la fotografia, vorrebbe iniziare ad avvicinarsi a Photoshop partendo dalle basi. Tutti gli argomenti verranno trattati con prove ed esercizi pratici al computer. Il corso fornirà la conoscenza base per poter affrontare tuorial e formazione avanzata
PROGRAMMA
- Interfaccia e preferenze
- Dimensione e risoluzione
- Creazione documento
- Profondità colore
- Barra strumenti
- Righelli, guide e griglie
- Livelli e opzioni livelli
- Stili livello
- Oggetti avanzati
- Livelli di regolazione
- Metodi colori
- Colore e campioni
- Sfumature
- Selezioni
- Ritagliare e trasformare
- I canali
- Istogramma, curve e valori tonali
- Pennelli
- Filtri ed effetti base
- Oggetti vettoriali e testo
- Maschere
- Metodi fusione
- Formati (JPEG, PNG, ecc...)
- Salvataggio per il Web
- Stampa
SVILUPPO DI VIDEOGIOCHI SU PIATTAFORMA ANDROID: TUTTA LA POTENZA SU DUE DIMEN...Danilo Riso
Into the game. Le basi concettuali. Cosa sono sprites e i tiles. In cosa consistono gli effetti di scrolling e di parallasse. Come si realizzano le animazioni dei fondali e degli sprites . Quali sono gli strumenti adatti per realizzare la grafica, gli effetti sonori? Usare Allegro Sprites Editor, Tiled Map Editor, GiMP, GrafX2. Quali tecnologie scegliere per scrivere un gioco? Panoramica fra gli engine 2D free ed a pagamento attualmente disponibili sul mercato. Introduzione ad uno di questi. AndEngine. Come rendere redditizio lo sviluppo di un gioco. Scelta del target, scelta delle logiche di distribuzione, sceglierlo come veicolo pubblicitario.Impostare e gestire la logica del gioco con AndEngine. Come creare il corretto loop per la gestione del flusso del gioco; Impostazione del GameLoop e corrispondenti azioni. Concetti di multithreading applicati al gamingGestire le animazioni con AndEngine. Come creare grafica ed animazioni e come integrarle ed utilizzarle. Gestire gli eventi e le collisioni sprite-sprite e sprite-background. Impariamo a gestire sprites e tiles. In cosa consistono gli effetti di scrolling, parallasse e come si ottengono. Come si realizzano le animazioni dei fondali e degli sprites.
I migliori strumenti digitali per automatizzare il tuo lavoroSiteGround.com
Oggi più che mai, l'utilizzo di strumenti digitali di automazione è cruciale per chiunque gestisca un'attività. Gli strumenti digitali di automazione, gratuiti o a pagamento, permettono di ottimizzare e velocizzare una vasta gamma di processi, dalle operazioni amministrative alla gestione del marketing, fino al servizio clienti.
Ma quali sono gli strumenti digitali più efficaci per automatizzare la tua quotidianità e risparmiare tempo prezioso?
Scopriamolo nel nostro webinar: https://it.siteground.com/blog/strumenti-digitali-per-automatizzare-il-lavoro
Accessibilità digitale: come rendere un sito web accessibile a tuttiSiteGround.com
Lo sai che solo il 3% dei siti al mondo rispetta le regole di accessibilità web? Il tuo sito web è accessibile da qualsiasi tipologia di utente o non hai mai lavorato su questo aspetto? Se la risposta è NO per te si apre una grande opportunità etica ed economica. Scopri come rendere il tuo sito accessibile a tutti!
L’accessibilità web è un tema fondamentale a livello globale ed è importante non solo essere consapevoli di questo problema, ma apportare ai propri siti web le modifiche necessarie per essere conformi e dare la possibilità anche a chi ha disabilità di accedere al web.
Vai al webinar: https://it.siteground.com/blog/come-rendere-un-sito-accessibile-a-tutti
More Related Content
Similar to Come usare e ottimizzare le immagini per il web
Workshop Human Singularity Design ed AI, Adobe Firefly, Midjourney, Dalle-3, ...Human Singularity
Questo incontro è pensato non solo come un seminario, ma come un viaggio alla scoperta di come l'AI può trasformare radicalmente il nostro modo di concepire e realizzare progetti creativi.
Immaginate un ambiente dove la vostra visione artistica incontra le capacità quasi illimitate dell'AI, aprendo un mondo di possibilità che vanno ben oltre i tradizionali metodi di creazione. Durante questo workshop, guidato da esperti del settore e pionieri della tecnologia, vi immergerete in sessioni pratiche e dimostrazioni dal vivo, scoprendo come trasformare le vostre idee in realtà con l'aiuto di strumenti all'avanguardia come Adobe Firefly, DALL-E 3, Midjourney e Stable Diffusion. Attraverso esercizi specifici e sfide creative, avrete l'opportunità di sperimentare direttamente con queste tecnologie, apprendendo come personalizzare i vostri progetti per ottenere risultati unici e sorprendenti.
Questo workshop non è solo un'opportunità di apprendimento; è un invito a far parte di una comunità di innovatori, un luogo dove idee audaci prendono forma e dove la vostra voce può contribuire a definire il futuro del design e della creatività. Che siate designer esperti, artisti in cerca di nuove ispirazioni, o semplicemente curiosi di esplorare le potenzialità dell'intelligenza artificiale, questo incontro si propone di essere un momento di crescita, scoperta e condivisione.
Vedremo come sfruttare le potenzialità di WPF per realizzare applicazioni diverse dalle classiche LOB (Line of Business applications), basandosi su 3D e Natural User Interface.
CORSO BASE DI PHOTOSHOP
OBIETTIVI
Questo corso è rivolto a tutti coloro che muovono i primi
passi nel mondo della grafica. Infatti è stato pensato e progettato per chi, amando il fotoritocco e la fotografia, vorrebbe iniziare ad avvicinarsi a Photoshop partendo dalle basi. Tutti gli argomenti verranno trattati con prove ed esercizi pratici al computer. Il corso fornirà la conoscenza base per poter affrontare tuorial e formazione avanzata
PROGRAMMA
- Interfaccia e preferenze
- Dimensione e risoluzione
- Creazione documento
- Profondità colore
- Barra strumenti
- Righelli, guide e griglie
- Livelli e opzioni livelli
- Stili livello
- Oggetti avanzati
- Livelli di regolazione
- Metodi colori
- Colore e campioni
- Sfumature
- Selezioni
- Ritagliare e trasformare
- I canali
- Istogramma, curve e valori tonali
- Pennelli
- Filtri ed effetti base
- Oggetti vettoriali e testo
- Maschere
- Metodi fusione
- Formati (JPEG, PNG, ecc...)
- Salvataggio per il Web
- Stampa
SVILUPPO DI VIDEOGIOCHI SU PIATTAFORMA ANDROID: TUTTA LA POTENZA SU DUE DIMEN...Danilo Riso
Into the game. Le basi concettuali. Cosa sono sprites e i tiles. In cosa consistono gli effetti di scrolling e di parallasse. Come si realizzano le animazioni dei fondali e degli sprites . Quali sono gli strumenti adatti per realizzare la grafica, gli effetti sonori? Usare Allegro Sprites Editor, Tiled Map Editor, GiMP, GrafX2. Quali tecnologie scegliere per scrivere un gioco? Panoramica fra gli engine 2D free ed a pagamento attualmente disponibili sul mercato. Introduzione ad uno di questi. AndEngine. Come rendere redditizio lo sviluppo di un gioco. Scelta del target, scelta delle logiche di distribuzione, sceglierlo come veicolo pubblicitario.Impostare e gestire la logica del gioco con AndEngine. Come creare il corretto loop per la gestione del flusso del gioco; Impostazione del GameLoop e corrispondenti azioni. Concetti di multithreading applicati al gamingGestire le animazioni con AndEngine. Come creare grafica ed animazioni e come integrarle ed utilizzarle. Gestire gli eventi e le collisioni sprite-sprite e sprite-background. Impariamo a gestire sprites e tiles. In cosa consistono gli effetti di scrolling, parallasse e come si ottengono. Come si realizzano le animazioni dei fondali e degli sprites.
I migliori strumenti digitali per automatizzare il tuo lavoroSiteGround.com
Oggi più che mai, l'utilizzo di strumenti digitali di automazione è cruciale per chiunque gestisca un'attività. Gli strumenti digitali di automazione, gratuiti o a pagamento, permettono di ottimizzare e velocizzare una vasta gamma di processi, dalle operazioni amministrative alla gestione del marketing, fino al servizio clienti.
Ma quali sono gli strumenti digitali più efficaci per automatizzare la tua quotidianità e risparmiare tempo prezioso?
Scopriamolo nel nostro webinar: https://it.siteground.com/blog/strumenti-digitali-per-automatizzare-il-lavoro
Accessibilità digitale: come rendere un sito web accessibile a tuttiSiteGround.com
Lo sai che solo il 3% dei siti al mondo rispetta le regole di accessibilità web? Il tuo sito web è accessibile da qualsiasi tipologia di utente o non hai mai lavorato su questo aspetto? Se la risposta è NO per te si apre una grande opportunità etica ed economica. Scopri come rendere il tuo sito accessibile a tutti!
L’accessibilità web è un tema fondamentale a livello globale ed è importante non solo essere consapevoli di questo problema, ma apportare ai propri siti web le modifiche necessarie per essere conformi e dare la possibilità anche a chi ha disabilità di accedere al web.
Vai al webinar: https://it.siteground.com/blog/come-rendere-un-sito-accessibile-a-tutti
WhatsApp Marketing: cos’è e come farlo nel modo giustoSiteGround.com
Hai mai pensato di utilizzare WhatsApp per il tuo sito o attività? Lo sappiamo, WhatsApp è l’app di messaggistica più utilizzata al mondo. Ogni giorno mandiamo centinaia di messaggi a decine di persone e gruppi. Ma ha senso integrarlo nella propria strategia online?
Vediamo i consigli di due esperte del settore! Vai al webinar:
https://it.siteground.com/blog/whatsapp-marketing/
5 cose da sapere per fare un sito responsive su WordPressSiteGround.com
Guarda il webinar: https://it.siteground.com/blog/5-cose-da-sapere-per-fare-un-sito-responsive-su-wordpress/
Il tuo sito è ottimizzato per i dispositivi mobile? Ormai da tempo gli utenti accedono ai siti maggiormente da mobile ed è quindi essenziale avere un sito che sia perfettamente responsive e mobile-friendly. Non solo, Google da anni penalizza i siti non responsive con conseguenze negative sul loro posizionamento.
In questo webinar vediamo non solo come rendere un sito adatto alla lettura da mobile ma anche quali strumenti, temi e plugin utilizzare per renderla il più possibile efficace.
Carmela Maggio, Graphic e Web Designer, ci mostra come lavorare sulla user experience e interface del sito in modo da renderle ottimali per i visitatori che usano dispositivi mobile.
Black Friday: 10 consigli per fare promozioni e migliorare il tuo eCommerceSiteGround.com
Guarda il webinar: https://it.siteground.com/blog/black-friday-10-consigli-per-fare-promozioni-e-migliorare-il-tuo-ecommerce/
Quanto è importante fare promozioni e sconti sul proprio eCommerce? Quando conviene farli e in che modo? Scoprilo insieme a noi in questo webinar!
Creare promozioni e offerte che funzionano è un’arte e non è sempre facile capire quando e come conviene farle. Da una parte si punta ad aumentare le vendite ma dall’altra si deve cercare di non ridurre troppo i margini di profitto facendo super sconti fin troppo esagerati.
Maria Luisa D’Urso, consulente aziendale di eCommerce management e imprenditrice digitale, ci mostra le migliori tecniche di promozione che permettono di ottenere risultati efficaci e svela alcuni consigli su come applicarle al proprio sito.
Attacchi informatici: cosa sono e come funzionanoSiteGround.com
Guarda il webinar: https://it.siteground.com/blog/attacchi-informatici-cosa-sono-e-come-funzionano/
Hai mai visto come funziona un attacco hacker? Ti sei mai chiesto se il tuo sito è completamente protetto o se è vulnerabile a particolari attacchi?
La sicurezza informatica è sempre uno degli argomenti fondamentali da trattare per chi ha un sito web e in questo webinar, passeremo in rassegna tutte le tipologie di attacchi esistenti e come fare a fronteggiarli in autonomia.
Guarda il webinar per vedere una simulazione di un attacco hacker e scopri il “dietro le quinte” di queste attività criminali.
Google Analytics 4: affrontare il cambiamento senza sforziSiteGround.com
Guarda il webinar: https://it.siteground.com/blog/google-analytics-4-webinar/
Le prime ore con GA4 non sono facili. L’interfaccia è completamente diversa, così come le metriche e le dimensioni principali. Ma come vedremo, Google Analytics 4 è uno strumento incredibilmente potente e funzionale, ed una volta superata la curva di apprendimento iniziale non vorremmo mai più tornare indietro.
Yoast SEO: trucchi e consigli per sfruttarlo al meglioSiteGround.com
Guarda il webinar: https://www.youtube.com/watch?v=I1knDooCTN8
Con oltre 12 milioni di installazioni attive, Yoast è il plugin WordPress per la SEO più scaricato al mondo.
Per questo abbiamo deciso di invitare il team di Yoast per svelare i trucchi di questo plugin per utilizzarlo al meglio! In questo webinar gratuito:
- Passiamo in rassegna le varie funzionalità di Yoast per capire quanto e come possono influire sulla SEO di un sito.
- Analizziamo le funzioni della versione Premium vs quelle gratuite.
Scopriremo alcuni trucchi di utilizzo del plugin per sfruttarlo al meglio.
- Rispondiamo con il team di Yoast alle domande e ai problemi degli utenti
In questo webinar Luca Papa, Founder e Digital Marketing Manager di Digital Coach®, ci spiegherà quali sono i problemi e gli errori ricorrenti per chi vende online e come evitarli. Vedremo inoltre quali sono i principi da seguire per vendere online al meglio e quali metodi di lavoro risultano più funzionali.
Cookieless World: La Marketing Automation a supporto del business onlineSiteGround.com
Guarda il webinar: https://www.youtube.com/watch?v=C-Wvy0sNXOc
Lo sapevi? Dal 2023 i cookie commerciali scompariranno! Ma cosa vuol dire questo per gli utenti e per chi lavora sul web?
In questo webinar Francesco Susca, CRM e Marketing Automation Specialist, In questo webinar Francesco Susca, CRM e Marketing Automation Specialist, ci spiega nel dettaglio:
- Cosa vuol dire Cookieless
- Lo scenario attuale e quello futuro dei cookie
- Le differenze tra dati di prime parti, terze parti e dati zero-party
- Quali strategie di Marketing Automation possono aiutare in questa situazione
È meglio la SEO on-page o la SEO off-page?SiteGround.com
Guarda il webinar qui: https://youtu.be/b7PXCev6pg8
Quando bisogna fare SEO per il proprio sito web o per il sito di un cliente, spesso ci si domanda quale sia la strada migliore da percorrere: ottimizzare tutto in modo maniacale o fare guest post e ottenere backlink come se piovessero?
Esistono diverse strategie SEO la cui efficacia varia molto in base alle proprie capacità e necessità. Conoscere la differenza fra tecniche SEO on-page e off-page e capire quali sono le più adatte al proprio sito è importante per evitare di sprecare tempo e denaro in attività che non porterebbero risultati.
Giancarlo Sciuto, co-fondatore e CMO di SEO Tester Online, ci aiuterà a fare chiarezza e a capire se è meglio la SEO on-page o la SEO off-page per il proprio sito.
Analytics: Trasforma il tuo sito in uno strumento di businessSiteGround.com
Guarda il webinar qui: https://youtu.be/AMFZTJcNcGc
Quanto sono importanti i dati oggi? Potremmo dire che i dati sono tutto, ma senza un’attenta analisi e gestione di essi si rischia di perdersi in un bicchiere d’acqua.
È quindi importante saper riconoscere quali dati sono più importanti, monitorarli e utilizzarli per sviluppare una strategia di crescita per il proprio sito e attività.
Chiara Magnani, analista esperta in pianificazione strategica e controllo dei dati, ci mostra:
- Quali indicatori valutare per la strategia del tuo sito
- Come definire gli obiettivi e misurarli
- Come integrare i dati di Google Analytics
- Come monitorare i risultati per prendere decisioni migliori
Come e perché ottimizzare il proprio sito per i Core Web VitalsSiteGround.com
Guarda il webinar qui: https://youtu.be/Oj0T4aoVWSI
I Core Web Vitals sono una delle novità più importanti del 2021 introdotte da Google all'interno del proprio algoritmo. Per superare la prova dei Core Web Vitals, avere un sito veloce è ora diventata condizione necessaria ma non sufficiente.
Andrea Cardinali, esperto di web performance, ci spiega:
- Cosa sono i Core Web Vitals e come impattano sulla SEO
- Come misurare correttamente i Core Web Vitals anche quando Google non ce li fornisce
- Le tecniche Black hat utilizzate da diversi plugin per imbrogliare i CWV
- Perché ottenere PageSpeed 100 non serve a nulla e cosa fare invece
- Best practices per ottimizzare per i core web vitals.
SEM: il centravanti del tuo Marketing OnlineSiteGround.com
Guarda il webinar: https://youtu.be/v_vQuggjrig
Il SEM (Search Engine Marketing) è un modo molto efficace per migliorare il tuo posizionamento sui motori di ricerca e attirare traffico sul tuo sito. Studiare e applicare strategie di SEM è un ottimo modo per aumentare la propria visibilità e aumentare le vendite.
Luca Papa, Founder e Digital Marketing Manager di Digital Coach®, ci spiega:
- Che cos’è il SEM
- Come approcciare il SEM per sfruttarlo al meglio
- Quali sono le differenze tra SEM, SEO e SEA
- Cosa scegliere tra SEM e pubblicità online
- Come fare del SEM una macchina per generare clienti
- Come massimizzare i risultati e contenere i costi
10 plugin fondamentali per migliorare il tuo sito WooCommerceSiteGround.com
Guarda il webinar qui: https://youtu.be/WhBUNu3izas
Affrontiamo insieme a Rodolfo Melogli il tema eCommerce.
Vuoi sapere come avere un eCommerce pronto per i picchi di traffico delle festività? Non farti cogliere impreparato! Rodolfo, grande esperto di WooCommerce ci suggerisce i migliori plugin da utilizzare per avere un eCommerce sempre al top!
Ottimizzazione e gestione WordPress: Azioni semplici per risultati immediatiSiteGround.com
Guarda il webinar qui: https://youtu.be/3C_KFaQpSRE
Vuoi aumentare le prestazioni del tuo sito WordPress e migliorarne la gestione? Bastano pochi e semplici accorgimenti alla portata di tutti!
Nicholas Marmonti, ingegnere front-end e UX/CRO Expert che da 20 anni si occupa di design e sviluppo web, ci spiega come fare consigliandoci metodi e strumenti adeguati.
Crea fantastiche landing page con il nuovo editor WordPressSiteGround.com
Guarda il webinar qui: https://youtu.be/9Goc3jeJv7c
Qualcuno ha detto Gutenberg? È arrivato il momento di dedicare un webinar alla scoperta del nuovo editor a blocchi di WordPress. E quale modo migliore se non vedendo insieme come sfruttarlo per creare landing page accattivanti e funzionali?!
Andrea Barghigiani, scrittore e formatore, ci mostra le caratteristiche principali di Gutenberg e le features più interessanti da utilizzare per la creazione di landing page.
Personal Branding: strategie digitali per il marketing personaleSiteGround.com
Guarda il webinar qui: https://youtu.be/MR13YddPz_U
In tanti parlano di Personal Branding ma quanti davvero mettono in pratica la teoria? Vediamo insieme ad Alessandro Mazzù e Luca Rodino alcune strategie per sfruttarlo nel modo giusto e ottenere il massimo dalla propria presenza digitale.
Alessandro Mazzù, consulente di web marketing, personal branding e scrittore di diversi libri ci introduce al mondo del marketing personale.
Le 10 domande più frequenti su WordPress (e le 10 risposte)SiteGround.com
Guarda il webinar qui: https://youtu.be/37XMT1txdhA
WordPress è il CMS più utilizzato al mondo (il 34% dei siti web sono fatti con WP) e continua a crescere e svilupparsi cercando di rendere sempre più alla portata di tutti, la creazione e la gestione di un sito web. Ma ci sono alcune domande ricorrenti che gli utenti fanno su WordPress...
Vediamo insieme a Francesca Marano i “dietro le quinte” dello sviluppo e del lancio di una Release WordPress e scopriamo le 10 domande più comuni che vengono fatte su WP.
Local marketing e Local SEO. Conoscere e utilizzare Google per aumentare le v...SiteGround.com
Guarda il webinar qui: https://youtu.be/6UkxOpEIcQM
Conosci il local marketing e la local SEO? Per chi ha un business locale sono il valore aggiunto per posizionarsi meglio sul mercato, ottenere visibilità sul web e vendere di più. Non è soltanto una questione di recensioni e feedback.
Francesco Antonacci, ci aiuta a conoscere i principali strumenti di Local marketing che Google ci mette a disposizione e ci spiega come utilizzarli.
3. Gli argomenti del webinar
● Pixel e risoluzione
● Approfondimento: la densità di pixel
● Formati raster e vettoriali: differenze e ambiti di utilizzo
● Formati raster e vettoriali: formati di file
● Software per la creazione ed editing delle immagini (i più diffusi)
● Ottimizzazione delle immagini per il web: best practices e integrazione con
WordPress
● Criteri di accessibilità e perfezionamento SEO: l'importanza dell'attributo alt
● Google Web Vitals: attenzione al Largest Contentful Paint (LCP)
● Risorse: dove trovare le immagini per i nostri siti web?
7. Risoluzione
Numero di pixel presenti in un'immagine.
Può essere espressa sia in forma [larghezza x altezza]:
che come [totale dei pixel che compongono l’immagine]:
1920x1080px
2.073.600px (ossia ~ 2 megapixel)
21. È relativa nel senso che la stessa immagine ha una
resa che dipende dalle caratteristiche del supporto
che la sta rappresentando.
22. DPI(Dots Per Inch)
Su un supporto di stampa, il numero
di punti o pixel che è possibile
stampare in un’area corrispondente
ad un pollice (2,54cm).
Su uno schermo, il numero di pixel
contenuti in un’area di schermo
corrispondente ad un pollice
(2,54cm).
PPI(Pixels Per Inch)
28. Contestualizziamo: analisi immagini in una pagina del sito SiteGround
Dimensione fisica:
333x285px
Dimensione renderizzata:
999x855px
iPhone 14 pro 1179x2556px (393x852@3x)
35. Immagini VETTORIALI
Nella grafica vettoriale le informazioni
vengono rappresentate attraverso un
insieme di primitive matematiche che
sono punti, linee, curve e poligoni.
La linea che compone la sagoma viene
memorizzata come un’equazione che parte da
un punto identificato con delle coordinate iniziali
e termina in un altro punto definito con delle
coordinate finali.
36. Ne consegue che un’immagine VETTORIALE è sempre
nitidamente perfetta indipendentemente dalla
dimensione di utilizzo.
37. Immagini RASTER (o bitmap)
Un’immagine raster (o bitmap) è
costituita da una griglia di pixel, dove
ogni pixel ha un colore specifico.
38. Ne consegue che la nitidezza di un’immagine RASTER
(o bitmap) dipende dalla dimensione di utilizzo.
Al variare della dimensione di impiego dell’immagine,
il numero di pixel resta lo stesso.
39. Quindi è sempre meglio usare le immagini in
formato vettoriale?
40. La risposta è “dipende”.
La grafica vettoriale è spendibile correttamente
solo per un numero limitato di componenti
dell’interfaccia.
41. Un componente figurativo come ad esempio una
foto non è adatto per essere rappresentato
tramite una formula matematica.
42. La ricostruzione di questa foto provocherebbe la
creazione di un numero altissimo di forme singole
(vettori) e l’impiego di questo formato
perderebbe senso.
https://www.pexels.com/photo/time-lapse-photography-of-waterfalls-during-sunset-210186/
43. La grafica vettoriale è adatta per componenti
costituiti da un numero relativamente contenuto
di forme geometriche e con colori limitati.
44. Immagini VETTORIALI: pro e contro
● Qualità sempre perfetta indipendentemente
dalle dimensioni di utilizzo.
● Peso del file inferiore rispetto alla stessa
immagine raster.
● Possibilità di variare parametri all’interno del
codice css.
● Possibilità di animare le immagini (svg)
attraverso codice css e js.
● Formato inadatto a
contenuti figurativi
complessi (es. foto).
● Variabilità di
comportamento in fase di
rendering su diversi
dispositivi (in via di
fixing).
45. Immagini RASTER (o bitmap): pro e contro
● Unica soluzione percorribile per
disporre di immagini fotografiche o
comunque figurative.
● Formato nativo della maggior parte
dei device di creazione immagini
(es. fotocamere)
● All’aumento della dimensione di
utilizzo, l’immagine perde
progressivamente qualità.
● Peso dei file tendenzialmente
maggiore rispetto al formato
vettoriale.
46. UI design: quando usare un
formato vettoriale o raster:
● Icone
● Loghi
● Pulsanti
● Illustrazioni
● Pattern di background semplici
● Foto
● Elementi figurativi complessi
● Pattern di background complessi
VETTORIALE RASTER
48. Formati file VETTORIALI
● Lo standard per gli elementi vettoriali
rappresentabili su una pagina web
● Formato basato su .xml
.svg (Scalable Vector Graphic)
49. Formati file VETTORIALI
● Formato proprietario Adobe
● Generato ed editabile da Adobe Illustrator
● Incorpora setting del file di progetto
Illustrator
.ai (Adobe Illustrator)
50. Formati file VETTORIALI
● Formato proprietario Adobe
● Generato ed editabile da diversi software di
grafica vettoriale
.eps (Encapsulated PostScript)
51. Formati file VETTORIALI
● Formato proprietario Adobe
● Universalmente utilizzato per generare file
che contengano immagini, testo e vettori
mantenendoli tali
.pdf (Portable Document Format)
52. Formati file RASTER (o bitmap)
● Formato lossy
● Comprime il file eliminando i dati in
maniera selettiva, pur mantenendo una
buona qualità dell’immagine
● Non supporta la trasparenza
.jpg (Joint Photographic Experts Group)
53. Formati file RASTER (o bitmap)
.png (Portable Network Graphics)
● Formato lossless
● Supporta la trasparenza
● .png 8 bit o .png 24 bit a seconda del
numero di colori
.png 8 bit: 256 colori
formato adatto per elementi grafici non complessi che richiedano
la trasparenza
.png 24 bit: 16,7 milioni di colori
formato adatto per elementi grafici complessi e ricchi di colori,
es. foto, che richiedano la trasparenza
54. Formati file RASTER (o bitmap)
● Formato lossless
● Dimensioni file minime
● Supporta la trasparenza
● Qualità non ottimale
● Max 256 colori
● Possibilità di integrare nel file semplici
animazioni
.gif (Graphics Interchange Format)
56. ● Formato lossless + lossy
● Dimensioni file minime: con qualità
percepita simile, 50% in meno di peso
rispetto alla stessa immagine in .jpg
● Supporta la trasparenza
● Possibilità di integrare nel file semplici
animazioni
● Non ancora pienamente supportato dai
browser (MS Edge)
● Supportato ancora relativamente poco dai
software di editing immagine
.avif (AV1 Image File Format)
57. ● Formato lossless + lossy
● Dimensioni file minime
● Supporta la trasparenza
● Possibilità di integrare nel file semplici
animazioni
● Max 8 bit. Formato non adatto a contenuti
fotografici di qualità molto elevata
● Supportato ancora relativamente poco dai
software s.a.a.s proprietari per l’importazione
.webp (WEB Picture)
58. Software per la creazione ed editing delle
immagini (i più diffusi)
59. Software per la creazione
ed editing delle immagini
VETTORIALE RASTER
Open source Open source
61. 1.
Utilizza le immagini nella risoluzione
che ti serve.
È sbagliato utilizzare immagini troppo piccole e sgranate allo stesso modo
in cui è sbagliato fare caricare al browser immagini più grandi di quanto ci
serva.
Hint: considerare la massima risoluzione renderizzata desiderata.
62. 2.
Scegli il formato file corretto.
Utilizza il formato JPG per le fotografie e il formato PNG per le immagini con
sfondo trasparente.
Hint: JPG e PNG sono attualmente lo standard, ma entro breve
WebP sarà maggiormente supportato dai software commerciali e
li sostituirà progressivamente. Tieniti informato ;)
63. 3.
Regola la compressione delle immagini.
Il formato JPG permette una compressione variabile in scala percentuale.
Hint: trova il compromesso leggerezza file/buona resa di visualizzazione.
64. 4.
Nomina semanticamente le immagini.
Questo accorgimento permetterà ai motori di ricerca di indicizzare
correttamente le immagini e le pagine web che le contengono
Hint: img-64874.jpg ristorante_rossi_piatti_del_giorno.jpg
65. 5.
Definisci un tuo metodo per nominare le
immagini.
Considera che molti server (Linux) sono case-sensitive e definire un
metodo per strutturare il nome dei file agevolerà il tuo flusso di lavoro.
È preferibile non utilizzare gli spazi tra le parole.
Hint: Foto Marco per sito.jpg nome_sito-foto_marco.jpg
66. 6.
Sui siti WordPress, utilizza un plugin di
caching.
Questi plugin creano una copia statica delle pagine del sito web e la
salvano nella cache del server web, in modo che i visitatori possano
accedere ai contenuti più velocemente.
Hint: utilizza il plugin SiteGround optimizer, integrato nel servizio.
68. L’attributo “alt”
All’interno di una pagina web, l’attributo "alt"
assegnato alle immagini attraverso il
codice HTML viene utilizzato per fornire
una descrizione testuale di un'immagine e
viene visualizzato al posto dell'immagine
quando questa non può essere visualizzata
o non è disponibile.
L'attributo "alt" è importante per
l'ottimizzazione per i motori di ricerca (SEO)
perché consente ai motori di ricerca di
comprendere il contenuto dell'immagine e
di inserirlo nei risultati di ricerca.
72. Google Web Vitals
I Web Vitals di Google sono un insieme di metriche chiave di esperienza
utente che vengono utilizzate per valutare le prestazioni e la qualità del
sito web.
Google ha introdotto i Web Vitals nel 2020 per aiutare i proprietari di siti
web a valutare e migliorare l'esperienza utente sui loro siti web.
73. Largest Contentful Paint (LCP)
Una delle 3 categorie dei Web Vitals è costituita dal Largest Contentful
Paint (LCP).
Si tratta del tempo che impiega il contenuto principale della pagina
(solitamente l'immagine o il video) a caricarsi completamente.
Google considera un LCP inferiore a 2,5 secondi come "buono".
76. Proprietà intellettuale
Le foto sono “opere originali”, sono quindi soggette al diritto che riguarda
la proprietà intellettuale.
Chi le realizza ha il diritto di riprodurre, distribuire e pubblicare le
fotografie, nonché il diritto di autorizzarne l'utilizzo da parte di terzi.
Non è quindi una soluzione raccomandabile quella di “saccheggiare” le
pagine web e salvarne le foto per poi inserirle nel nostro sito.
77. Come trovare le foto?
Autoproduzione Fotografo
https://iconscout.com/illustration/photographer-2671540 https://commons.wikimedia.org/wiki/File:Canon_EOS_5D_Mark_II_with_50mm_1.4_edit1.png
78. Come trovare le foto?
Foto royalty-free
- Portali a pagamento -
https://www.flickr.com/photos/pockethifi/51989572383/ https://www.pexels.com/photo/photo-of-a-gray-dell-laptop-displaying-pexels-webpage-811587/
Foto royalty-free
- Portali gratuiti -
79. Come trovare le foto?
Contenuti con licenza
Creative Commons
80. Gratuito Risultato altamente
customizzato
Qualità professionale
Competenze
Attrezzatura
Soluzione non
economica
Spesa sostenibile
Range di ricerca
puntuale
Qualità professionale
A pagamento
Difficile acquistare la
singola immagine
Gratuito
Grande disponibilità di
immagini
Livello qualitativo non
sempre alto
A volte licenza di
utilizzo o qualità
limitate
Gratuito
Livello qualitativo non
sempre alto
Ricerca guidelines
licenze
92. References
● Densità di pixel su dispositivi Apple:
https://iosref.com/res
● Densità di pixel su dispositivi Android:
https://developer.android.com/guide/practices/screens_support
● Licenze Creative Commons
https://creativecommons.org/about/cclicenses/