Come ottimizzare le immagini per il Web mobile

Quando si tratta di scegliere i tipi di file e le dimensioni per le tue immagini, tieni presente la qualità, i tempi di caricamento della pagina, la capacità di zoom e i requisiti del mercato, soprattutto se vendi su più piattaforme. Diamo un'occhiata all'ottimizzazione delle immagini per il Web e a come scegliere il tipo di file tenendo presente i dispositivi mobili per una migliore esperienza utente.

Scegliere le giuste dimensioni dell'immagine

È fondamentale trovare un equilibrio tra le immagini sufficientemente grandi in modo che gli utenti possano ingrandire e quelle di dimensioni ottimali in modo da non occupare troppo spazio e rallentare i tempi di caricamento della pagina. Su Shopify puoi caricare immagini fino a 4472 x 4472 pixel con una dimensione del file fino a 20 MB. Ma il costruttore di siti Web in genere consiglia di utilizzare 2048 x 2048 pixel per le foto quadrate dei prodotti. Si tratta di immagini ad alta risoluzione che conferiscono al tuo negozio un aspetto professionale e completo con grandi capacità di zoom. Tieni presente che affinché la funzionalità di zoom funzioni, le tue immagini devono essere superiori a 800 x 800 pixel.

Allo stesso modo, Amazon ed Etsy richiedono un'immagine di 1000 x 1000 pixel per abilitare lo zoom.

Per mantenere un aspetto uniforme lungo la tua linea di prodotti e sulle pagine della tua collezione, dovresti mantenere le stesse proporzioni di larghezza e altezza di tutte le tue immagini caratteristiche, ad esempio quadrato. La tua immagine caratteristica è la prima immagine di un prodotto che apparirà nel tuo negozio: nella tua home page, nella pagina del carrello, nella pagina di pagamento e in una varietà di pagine di raccolta. Mantieni anche tutte le tue miniature della stessa dimensione e forma per conferire un aspetto raffinato al negozio. Tieni presente che molti dei tuoi clienti navigheranno anche su dispositivi mobili e le immagini quadrate sono più facili da riposizionare per schermi più piccoli.

Scegliere il formato immagine giusto

Diamo un'occhiata ai formati di file più utilizzati nella fotografia di prodotto e a ciò che ciascuno porta in tavola. Sono elencati qui in base alla frequenza con cui vengono utilizzati nella fotografia del prodotto.

JPG

JPG è il formato di file di immagine digitale più comune in circolazione. È ampiamente supportato e vanta una piccola dimensione del file con una buona gamma di colori. La sua compressione consente di trovare un equilibrio tra la dimensione del file e la qualità dell'immagine. Shopify consiglia JPG, in particolare, perché può fornire immagini di dimensioni relativamente ridotte e di buona qualità, il che funziona bene per le foto dei prodotti.

PNG

PNG è stato creato per migliorare il formato GIF rimuovendo la sua limitazione di 256 colori. È ampiamente accettato, senza perdita di dati (riduce le dimensioni del file senza ridurre la qualità) e supporta la trasparenza (ad esempio per sfondi trasparenti). Gli svantaggi sono che le dimensioni dei file PNG possono essere grandi a causa della compressione senza perdita di dati e il formato non è universalmente compatibile come JPG.

GIF

GIF offre file di piccole dimensioni comprimendo e riducendo le immagini a 256 colori. Sebbene sia stato ampiamente sostituito da PNG, è ancora utilizzato per l'animazione in quanto è l'unico formato che lo supporta ed è universalmente riconosciuto dai browser.

TIFF

TIFF è un formato di compressione lossless ampiamente supportato da una vasta gamma di applicazioni web e di editing. Offre una risoluzione di alta qualità e più immagini e pagine possono essere comodamente salvate in un unico file. Tuttavia, la dimensione del file tende ad essere grande.

BMP

BMP è comunemente usato nell'ecosistema Windows. Supporta la compressione dei dati, i canali alfa (utilizzati in Photoshop per memorizzare informazioni aggiuntive che puoi utilizzare per manipolare parti dell'immagine, ad esempio aggiungere sfondi trasparenti) e una compatibilità quasi universale. Non compresso, offre immagini perfette ma anche le dimensioni dei file possono essere molto grandi.

Nel complesso, JPG è sicuramente il più conveniente quando si tratta di combinare dimensioni più piccole con una qualità decente. Sebbene PNG offra una compressione lossless di qualità superiore, lo fa al costo elevato di un file di dimensioni maggiori. GIF è utile se offri scatti a 360 gradi e desideri file leggeri. BMP e TIFF, in confronto, possono offrire una grande qualità, ma le dimensioni reali sono generalmente piuttosto pesanti e poco pratiche.

Dimensionamento delle immagini per dispositivi mobili

Shopify ridimensiona automaticamente le tue immagini per adattarle a schermi più piccoli, ma a volte alcune immagini possono richiedere la modifica manuale. Tieni presente che gli schermi desktop e mobili non solo hanno dimensioni diverse, ma hanno un orientamento opposto. E mentre Shopify cerca di adattarlo con un ritaglio delicato, sarà meglio se le tue immagini sono quadrate e il tuo prodotto è centrato verticalmente e orizzontalmente.

Inoltre, le immagini con risoluzioni eccessivamente grandi, ad esempio il massimo di Shopify di 4000 x 4000 pixel, possono risultare sfocate se ridimensionate per dispositivi mobili. Pertanto, ridurre la tua immagine a una dimensione e una forma più gestibili che tenga conto dei dispositivi mobili può aiutare il tuo negozio ad avere un aspetto migliore su tutti i dispositivi. Tieni presente che i file di grandi dimensioni rallentano anche il tempo di caricamento del tuo sito. E nell'e-commerce, e soprattutto nei dispositivi mobili, ogni secondo è importante, quindi l'ottimizzazione delle immagini dovrebbe essere una priorità.

Quindi, mentre la compressione senza perdita di dati può darti la massima qualità dell'immagine, spesso crea file di grandi dimensioni che richiedono un'eternità per essere caricati (soprattutto in blocco) e può rallentare i tempi di caricamento della pagina, facendo sì che i visitatori abbandonino il tuo negozio. Ciò è particolarmente vero sui dispositivi mobili, dove la velocità di Internet può essere più lenta e l'attesa che un'immagine appaia finalmente frustra gli acquirenti.

Sebbene i design e gli algoritmi reattivi di Shopify siano bravi a ridimensionare e visualizzare le tue immagini su tutti i dispositivi, dare loro una mano con dimensioni dei file ponderate può significare un'esperienza di acquisto ancora più fluida.

Circa l'autore

Holly Cardew è la fondatrice di Pixc, una piattaforma per aiutare i negozi di eCommerce a modificare e ottimizzare le foto dei loro prodotti in modo che possano aumentare le vendite. Pixc trasforma le immagini dei prodotti medi in belle immagini modificando e rimuovendo lo sfondo entro 24 ore. Iniziando da adolescente, vendendo su eBay e creando il proprio mercato online, Holly ha esperienza in eCommerce, marketing online, progettazione grafica e creazione di team distribuiti. Ha anche esperienza nella creazione e gestione di negozi Shopify e nella crescita di grandi seguiti sui social media. Nel 2016, Holly è stata inclusa nell'elenco Retail ed eCommerce Forbes 30 under 30. Holly divide il suo tempo tra San Francisco, Brisbane e Sydney. Quando Holly non lavora, ama viaggiare, esplorare nuovi posti, design accattivante, tipografia e trovare nuove idee di business.