Le immagini sono il modo migliore per rendere la tua pagina interessante e diversificata, e ovviamente informano, forniscono contesto e creano l'atmosfera. Le immagini sono anche il principale motivo di appesantimento di una pagina, perché i browser le scaricano immediatamente insieme alla pagina.

Per questi motivi ci sono diversi modi per integrare le immagini alla pagina e molte opzioni.

Una immagine si aggiunge trascinandola nell’area di lavoro direttamente dal Finder o aggiungendola dal popup "Aggiungi". Puoi sostituire un'immagine esistente facendo drag/drop sopra la miniatura dell'immagine nelle impostazioni, o sopra l'immagine nell'area di lavoro.

Un altro modo di inserire un’immagine è impostarla come sfondo di un riquadro.

Le immagini hanno un aspetto iniziale segnaposto, che può essere utile per la costruzione progressiva di un layout senza aggiungere contenuto.

Immagini bitmap

Il tipo di immagine più semplice e comune è l'immagine bitmap, che comprende le immagini provenienti dalla fotografia digitale o da strumenti di creazione di immagini che non siano espressamente vettoriali.

Sparkle è in grado di aprire la maggior parte dei tipi di immagine bitmap supportati dal sistema, inclusi JPEG, PNG, PNG con trasparenza, GIF, TIFF e i file della fotocamera negativi digitali (raw).

Le immagini GIF vengono esportate senza cambiamenti, mentre le immagini PNG e JPEG vengono ridimensionate e compresse per le dimensioni esatte utilizzate dall'elemento. Gli altri formati vengono esportati come JPEG, ridimensionati alle dimensioni richieste.

Le opzioni comprendono un titolo, mostrato come suggerimento nella maggior parte dei browser, e un testo descrittivo (a volte denominato "tag alt"), che è un'opzione di accessibilità utilizzata dagli screen reader e altri dispositivi di assistenza, ma non altrimenti visibile nel browser.

Il riquadro dell’immagine nell’area di lavoro è lo spazio massimo per l'immagine. Il modo in cui l'immagine si adatta al riquadro è gestito dalle opzioni di allineamento e di estensione.

Se la casella "Estendi" è disabilitata, l'immagine manterrà le sue dimensioni originali (e sarà ritagliata se necessario). La sua posizione nella cornice può essere allineata orizzontalmente e verticalmente usando i sei pulsanti: sinistra, centro, destra, in alto, in mezzo, in basso.

Se la casella di spunta "Estendi" è abilitata, Sparkle applicherà un fattore di ridimensionamento appropriato. Il pulsante "Adatta" assicura che l'intera immagine sia visibile, ma produrrà una cornice orizzontale o verticale. "Riempi" assicura che l'immagine copra l’intero riquadro, ma l'immagine verrà tagliata ai bordi.

La barra "Rapporto di risoluzione" sotto i controlli di estensione, consente stimare la qualità dell'immagine prodotta, e se ci sono abbastanza pixel per la risoluzione alta (retina), ma anche a dimensioni normali. Nel ridimensionare l'immagine, la barra si aggiorna automaticamente. In definitiva è buona prassi assicurarti di non scendere al di sotto di 2x, se dovesse accadere molti dispositivi mostrerebbero un'immagine che è percettibilmente a bassa risoluzione.

Se una immagine proviene da un dispositivo che ci ha inserito informazioni di profondità, l’opzione "Applica maschera ritratto" sarà disponibile, permettendoti di eliminare lo sfondo.

Sparkle supporta i browser che funzionano su dispositivi ad alta risoluzione (retina) o ad altissima risoluzione (retina 3x). Quando la dimensione dell'immagine sorgente è sufficiente, l'immagine verrà generata automaticamente per risoluzioni normali (1x), ad alta risoluzione (2x) o molto alta (3x). Le opzioni di generazione delle immagini per l’intero sito sono nel pannello delle impostazioni.

Suggerimento: trascinando una immagine con un nome che termina con @2x (ad esempio pic@2x.png), le sue dimensioni saranno dimezzate e verrà posizionata sull’area di lavoro nella dimensione 1x. Allo stesso modo per il suffisso @3x.

Rimozione dello sfondo

Sparkle ha un potente strumento di rimozione dello sfondo basato sull'intelligenza artificiale, è ottimizzato per lavorare con immagini bitmap contenenti soggetti in primo piano con un buon contrasto sullo sfondo. In pratica funziona bene con foto di persone e immagini di prodotti. La prima volta che si usa la rimozione dello sfondo, la funzione verrà caricata e richiederà un po' più di tempo, nelle esecuzioni successive sarà generalmente più veloce. Ecco un esempio prima e dopo la rimozione dello sfondo.

La rimozione dello sfondo funziona benissimo anche con lo scontornamento col testo, per ottenere un testo che scorre naturalmente intorno all'immagine di un prodotto.

Immagini vettoriali

Sparkle può caricare immagini vettoriali SVG, che si adattano a risoluzioni e a dispositivi diversi. Come per le immagini bitmap, puoi rilasciarle direttamente sull’area di lavoro o su immagini già esistenti. Le immagini SVG verranno esportate così come sono, non è necessario alcun rapporto di risoluzione perché sono intrinsecamente scalabili in modo nitido su più dispositivi.

Le immagini vettoriali sono generalmente molto compatte, rendendole ideali tutte le volte che non è serve contenuto fotografico in formato bitmap.

Le immagini SVG sono facilmente reperibili sul web e possono essere prodotti da molte app desktop, ne incoraggiamo senz’altro l’utilizzo.

Foto Live

Sparkle supporta le combinazione ibrida foto-video che possono essere scattate dagli iPhone. Inserendo sia l'immagine che il filmato esportato da Foto, puoi produrre una pagina che consenta ai visitatori del tuo sito di vedere e interagire con la Live Photo.

Puoi ottenere foto e video per una Live Photo sincronizzando le tue foto su Foto sul Mac e quindi selezionando le foto e utilizzando il comando File -> Esporta originale non modificato.

Immagini stock

Sparkle rende super conveniente scegliere un'immagine stock da collezioni gratuite di immagini ad alta qualità di unsplash.com, pexels.com o pixabay.com. Tutte le immagini sono rese disponibili sotto licenze libere, che dovreste consultare ( unsplash / pexels / pixabay).

Le immagini possono essere utilizzate liberamente, anche per uso commerciale, senza chiedere il permesso dell'autore dell'immagine. Tuttavia è sempre una tua responsabilità assicurarti che i contenuti illustrati (persone, luoghi, proprietà privata, ecc.) siano adatti al tuo sito web e non violino nessun diritto.

Immagini da un profilo Instagram

La modalità Instagram per le immagini ti permette di integrare immagini direttamente dal profilo Instagram senza il bisogno di ripubblicare il sito. Puoi anche integrare il profilo tramite la galleria o con l’ elemento Instagram dedicato.

L’immagine si collegherà al tuo profilo dal sito pubblicato, e mostrerà il post recente indicato nelle impostazioni. Quale post recente usare è indicato con un numero, 0 è l’ultimo post, da -1 a -29 sono i post precedenti nel profilo. Quindi se per esempio usi il post recente numero 0, l’elemento mostrerà sempre l’ultimo post del tuo profilo.

Rispetto ad usare un elemento Instagram dedicato, l’integrazione tramite immagini ti permette di usare tutte le impostazioni e i filtri delle immagini, ma tipi di post diversi (multi immagine e video per esempio) non funzionano con l’elemento immagine.

Immagini dalla posizione di rete

Questa modalità è principalmente usata per le immagini collegate in "hotlink" in altri siti web, è un caso relativamente raro e Sparkle può esercitare un controllo molto limitato, quindi le opzioni sono minime.

Il tuo sito web utilizzerà di fatto la banda di qualcun altro, quindi è indispensabile assicurarti che il proprietario sia d'accordo con il tuo hotlinking.

Ottimizzazione dell'immagine

Non è necessario ridimensionare o comprimere le immagini prima di incorporarle in Sparkle. Quando pubblichi o esporti il sito web, Sparkle ridimensiona e ricomprime le immagini in base alle necessità. Di fatto è probabilmente meglio essere generosi con le dimensioni e la qualità dell'immagine.

Una dimensione generosa ti dà la libertà di composizione di spostare e ridimensionare l'immagine in qualsiasi punto del tuo layout senza essere vincolato da un dimensionamento prematuro, inoltre tenere d'occhio il rapporto di risoluzione ti indica se la qualità dell'immagine pubblicata sarà degradata. Utilizzando immagini di alta qualità aiuterai Sparkle a minimizzare gli artefatti di compressione durante la pubblicazione, garantendo migliori risultati.

Quindi è meglio non ridimensionare le immagini in un'applicazione esterna prima di importarle in Sparkle.

In generale, se aggiungi più dispositivi Sparkle genererà più immagini e invierà al visitatore solo quelle con risoluzione e densità ottimale per ogni dispositivo che visita. Questo permette a browser moderni di scaricare solo quello di cui hanno bisogno, risultando in prestazioni maggiori e risparmio sul trasferimento dati.

In definitiva per ogni immagine di input, Sparkle genererà un'immagine per ciascun dispositivo e ciascuna densità dello schermo, sia in JPEG che in WebP (se l'opzione è selezionata nelle impostazioni).

Bordo dell'immagine

Più in basso nel pannello impostazioni, comune a tutti i tipi di immagine, puoi scegliere un bordo all’immagine. Il bordo viene aggiunto al di fuori del riquadro dell'immagine. Puoi avere una singola impostazione del bordo per ogni lato o un'impostazione separata per ogni lato, nell’area di lavoro vedrai l'esatta riproduzione.

Arrotondamento degli angoli dell'immagine

Gli angoli delle immagini possono essere arrotondati con un raggio di pixel specifico, puoi scegliere che ogni angolo sia arrotondato oppure no.

Arrotondando all’estremo è possibile avere un'immagine quadrata con il raggio che supera la dimensione dell'immagine, ottenendo un'immagine circolare. Questo è il classico aspetto di una immagine di profilo.

Il bordo, quando visibile, seguirà i bordi arrotondati.

Ombra dell’immagine

Le ombre un tempo erano molto di moda, oggi il loro utilizzo può rendere il tuo design un po’ datato.

Tuttavia, se usate con attenzione e con gusto possono aggiungere un sottile effetto 3D e fornire un senso di profondità.

Opacità dell'immagine

La regolazione dell'opacità può essere utile per alcuni effetti visivi. L'opacità influisce sia sul contenuto dell'immagine sia sul bordo e l'ombra, se presenti.

Filtri immagine

I filtri immagine sono un modo rapido per migliorare o modificare un'immagine. L'aggiunta di filtri non modifica l'immagine originale che rimane inalterata. I filtri possono essere combinati, anche usati più volte e in ordini diversi.

Interazione

Come per il testo, puoi decidere cosa succede quando una immagine viene cliccata. Sono disponibili tutte le azioni Al Clic, oltre ad una azione specifica per le immagini, per ingrandire l’immagine nella finestra e mostrarla in una lightbox che si sovrappone alla pagina.

Effetti di scorrimento

L’animazione allo scorrimento è comune ad altri elementi, vedi la pagina sulle animazioni.