Aggiornato per Sparkle 2.8

In Inglese

Auf Deutsch

En Français

Immagini

‍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 "Altro". 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.

‍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.

‍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 molto pratica la scelta di un'immagine stock dalle collezioni gratuite unsplash.com o pixabay.com. Tutte le immagini sono rese disponibili sotto licenze molto permissive, che dovresti consultare (unsplash / 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 tuo profilo Instagram senza la necessità di ripubblicare il sito. Puoi anche integrare le immagini 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 all’uso dell’elemento dedicato Instagram, l’integrazione nelle immagini ti permette di usare tutte le impostazioni e i filtri delle immagini, ma i diversi tipi di post Instagram (multi immagine e video per esempio) non funzionano nell’elemento immagine.

‍Immagini dalla posizione di rete

‍Questa caratteristica è 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à. In effetti 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 vincolata 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 produrrà immagini multiple e invierà al browser solo quelle con risoluzione e densità ottimale per ogni dispositivo visitante. Questo permette a ai browser moderni di scaricare solo quello di cui hanno bisogno, ottenendo prestazioni migliori e risparmiando traffico 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 è impostata nelle impostazioni).

‍Bordo dell'immagine

‍Più in basso nel pannello laterale, 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.

‍Animazione allo scorrimento

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

‍Carica quando visibile

‍I browser iniziano a scaricare le immagini anche prima di aver caricato l'intera pagina. Se la tua pagina contiene molte immagini, saranno tutte messe in coda per il download, e questo può di fatto rendere il caricamento dell’intera pagina più lento. L'opzione "Carica quando visibile" ritarda il caricamento dell'immagine, quindi è peggiorativo per immagini in alto sulla pagina, ma attivandolo per immagini non inizialmente visibili, il tempo di caricamento complessivo della pagina risulta migliore. Inoltre, se il visitatore del sito non scorre mai verso il basso per visualizzare tutte le immagini, saranno scaricate meno immagini è verrà anche risparmiata banda.

Segnalateci difetti di questa documentazione e li risolveremo al più presto!

Copyright © 2019 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.