Quando inziamo a lavorare con le immagini per il web, parliamoci chiaro, è difficile trovare un formato che accomuna tutte le piattaforme messe insieme.
Specialmente se vogliamo inserire le immagini per un e-Commerce sulle più famose piattaforme social.
Ti sei spinto fino ai confini di Internet per cercare una guida definitiva da seguire per riuscire nell’intento, ma ancora non ci sei riuscito.
Ti metto subito l’anima in pace, il tuo viaggio non è finito. Ma con la guida che ti fornirò in questo articolo, potrai nel frattempo avere un vademecum sulle principali nozioni da tenere presente quando si lavora con le immagini.
Formato Immagine
Facciamo subito una distinzione sul formato immagine da utilizzare.
Tutti noi conosciamo il formato JPG oppure JPEG, l’estensione standard di ogni foto scattata con una macchina fotografica o smartphone.
La compressione JPG permette una notevolissima fedeltà nei colori, occupando poco spazio nella memoria, cosa quest’ultima che trova benefici anche nei tempi di caricamento della pagina web.
L’altro formato che è molto utilizzato negli e-commerce è il PNG. Il peso in termini di byte è sensibilmente superiore a paragone con il JPG, ma permette la trasparenza. Funzione molto utile quando si scontornano i prodotti per lasciar trasparire lo sfondo della pagina.
Come è evidente nell’immagine sovrastante, a parità di dimensioni in termini di pixel (540×540) il formato .JPG è considerevolmente più “leggero” della controparte .PNG. A fronte del “costo” maggiore in Bytes il .PNG consente di cancellare lo sfondo azzurrino per far trasparire lo sfondo della mia pagina.
Esiste anche una versione 8-bit del formato PNG che riduce drasticamente il peso dell’immagine, ma supporta solo 256 colori a fronte dei milioni del fratello maggiore. Pertanto è riservato ad immagini con colori definiti come illustrazioni o loghi, non per prodotti dalle sfumature variegate.
Proporzioni dell’immagine
Fatto luce sul formato da adottare, addentriamoci nelle proporzioni ideali per accomunare le immagini prodotto con i social networks.
Come visto nell’esempio precedente ho adottato la proporzione 540×540, ossia un quadrato per illustrare la differenza tra i formati .JPG e .PNG. Il formato quadrato si presta a numerose soluzione sia per la maggior parte della piattaforme di e-Commerce, sia per i principali social.
Il formato quadrato con risoluzione 1080×1080 è la proporzione standard di Instagram, quindi perché non adottarla anche per le immagini del nostro e-Commerce?
Di solito il peso massimo di un file per un e-Commerce è 2MB, pertanto un file con proporzioni da 1080px per lato dovrebbe rientrare abbondantemente nel limite prefissato.
Un CMS di e-Commerce prediligerà delle risoluzioni più basse, Prestashop e Woocommerce per esempio vogliono un’immagine da 800px, ma ridurre un formato quadrato sarà più semplice che ritagliare una foto panoramica o ritratto.
Quando scattiamo la foto al nostro prodotto con qualsiasi dispositivo, focalizziamolo al centro dell’immagine, proprio come se fosse all’interno di un quadrato, con un buon margine dai bordi.
Al giorno d’oggi è molto facile trovare su smartphone e fotocamera la selezione della proporzione con cui scattare la foto. Di fatti è possibile scegliere [16:9], [4:3] ed infine [1:1] che è il formato che ci interessa.
La foto del prodotto così ottenuta sara molto semplice da utilizzare sul nostro shop online e per pubblicizzarla sui social come Instagram e Facebook
Formato panoramico e ritratto
Abbiamo parlato del formato quadrato, adesso passiamo al secondo formato più in utilizzo sui social.
Il formato panoramico, o “landscape” per i tecnici, ha una risoluzione variabile a seconda della piattaforma di destinazione.
In effetti partiamo dal 1200px di larghezza di Facebook, per passare ai 1024px di Twitter per arrivare ai 1080px di Instagram.
Il “panoramico” di Facebook si presta a parecchie soluzioni specie se consideriamo che è un formato utile anche per gli Open Graphs utilizzati nei servizi di messaggistica come Whatsapp, oppure alle campagne Ad che adottano tale proporzione.
In alcuni casi, come i video di IGTV, possiamo arrivare anche alla piena definizione HD 1920x1080px.
Discorso analogo per il formato ritratto, ossia la foto verticale. I formati sono davvero tanti.
Per questo ho riunito tutte le informazioni in un unico file PDF che dove è possibile spulciare tutti i formati suddivisi per piattaforma.
Nella guida troverete le proporzioni delle immagini relative a:
- Woocommerce
- Prestashop
Ho inserito dove possibile anche i margini di sicurezza per i contenuti, per chi volesse ottimizzare al meglio le proprie immagini e renderle quanto più gradevoli al pubblico.
Se vi è stato in qualche modo utili, fatemelo sapere nei commenti.