Risoluzione immagini news e sezioni
Uno degli aspetti che dobbiamo maggiormente considerare all'interno del sito è l'importanza di come esso si presenti agli utenti e, questo concetto, si applica anche alle immagini presenti. Immagini tirate oppure sgranate non aiutano nell'esperienza utente, il quale, si troverà a sforzare gli occhi per comprenderne il contenuto. In questo articolo tratteremo della gestione delle immagini all'interno dei componenti Notizie e Sezioni in maniera tale da consigliarvi la risoluzione e il formato migliore per ogni evenienza.
Immagini nelle notizie
I contenitori di notizie si presentano come blocchi composti da un numero variabile di elementi, ognuno avente un titolo, una descrizione e di una immagine, se attivata la visualizzazione nel feed. Si consiglia di caricare immagini orizzontali con una larghezza in pixel minima di 1200 pixel e massima di 1920 e di una altezza minima di 800 pixel e massima di 1200 pixel. Per ogni notizia si invita ad utilizzare immagini aventi le stesse dimensioni e con un focus sulla parte centrale, posizione che viene utilizzata come fulcro del riadattamento delle stesse. I formati sempre validi sono:
1200 * 800 pixel
1920 * 1080 pixel
1920 * 1200 pixel
Le immagini con formati superiori al 1920 * 1200 possono essere utilizzate stando attenti al peso effettivo del file (deve essere sempre inferiore ai 16 MB) e al rateo: 16:9 o 16:10. Possono essere utilizzate immagini con estensioni:
svg
png
jpg
Stando però sempre attenti al rateo sopra indicato e all'orientamento orizzontale. Si sconsiglia l'utilizzo di immagini quadrate.
Queste regole si applicano anche al componente Archivio Notizie.
Immagini per sezioni
Il calcolo per le immagini delle sezioni è più complicato perché varia molto in base al numero di sezioni da visualizzare, alla dimensione massima dell'immagine e dal tipo di immagine. Come per le notizie si consiglia l'utilizzo di immagini con orientamento orizzontale e aventi rateo 16:10, una altezza minima di 750 px ed una larghezza minima di 1200 pixel. In base al numero di sezioni inserite le immagini potranno essere più o meno stretchate:
In questo caso, verrà visualizzata solo la parte centrale dell'immagine, nascondendo pezzi di quest'ultima. Per ovviare a questo problema, si consiglia di utilizzare un numero di sezioni da visualizzare pari ad un multiplo di 3 o multiplo di 4 (quattro è preferibile) :
Le immagini in png possono essere utilizzate tenendo conto delle raccomandazioni precedenti: l'immagine non deve essere troppo piccola, l'orientamento deve essere orizzontale e il rateo deve essere o di 16:9 o di 16:10.
Strumenti
Proponiamo uno strumento online che potrebbe esservi utile a modificare rapidamente le vostre immagini: Adobe Express
Questa applicazione è la soluzione che Adobe propone per la modifica delle immagini online, ha una versione premium che sblocca diverse funzionalità, ma anche un piano free che nella maggior parte dei casi è più che sufficiente. Questa applicazione richiede la creazione di un account per essere utilizzata.
Dopo aver caricato l'immagine nell'editor si può cliccare su di essa per selezionarla, in questo modo apparirà a destra l'opzione "Ritaglia e forma"
Se l'opzione viene selezionata si aprirà un menù con varie possibilità, tra cui quella di ritagliare l'immagine andando a scegliere una delle proporzioni più comuni, scalare l'immagine, ruotarla e così via.
Finite le modifiche si potrà salvare il risultato con il tasto "Scarica" in alto a destra.