Immagini progressive = Migliore esperienza utente?
Le immagini progressive offrono un'esperienza utente migliore per le applicazioni Web basate su browser?
Come per tutte le cose ci sono pro e contro, anche se la maggior parte dei pro non sono realmente rilevanti se il sito web è progettato correttamente e l'utente finale ha una connessione Internet veloce. Quindi la pertinenza di questi dipende dal tuo pubblico di destinazione.
Professionisti:
- Le immagini di livello base arrivano rapidamente assicurando così che il layout sia corretto il prima possibile. Tuttavia, se gli attributi di altezza e larghezza dell'immagine sono impostati correttamente, ciò è praticamente irrilevante (grazie a DA01)
- È più chiaro che la pagina si sta ancora caricando se le immagini sono interlacciate durante il caricamento su una connessione Internet lenta.
Contro:
- Può essere peggio vedere un'immagine sfocata di nessuna immagine. Aspetti di vedere se l'immagine è importante, mentre se non ci fosse alcuna immagine potresti non essere disturbato.
- Come altri hanno menzionato nella loro risposta , l'interlacciamento aumenta la dimensione dei file di immagine, quindi aumentando il tempo di caricamento della tua pagina web . Questo offre un'esperienza peggiore per tutti, anche per coloro che hanno una connessione veloce.
Quindi, a conti fatti, direi che probabilmente non offre un'esperienza utente migliore.
A parte jpeg, non usare l'interlacciamento in quanto aumenta effettivamente la dimensione dell'immagine scaricata. I PNG sono i peggiori con circa il 10%. Tuttavia, anche quando non è particolarmente costoso, è comunque indesiderabile.
- (in alcuni casi) le anteprime, a più livelli, sono molto più intuitive e utilizzabili dall'utente. Se vogliono vedere un'anteprima, ne ottengono una molto chiara, se vogliono la qualità completa passano alla qualità completa. Considera anche la possibilità di utilizzare le miniature semi-zoomate, a seconda delle circostanze.
- l'interlacciamento ha il problema di "come fai a sapere quando è fatto?" Per immagini molto nitide e piccole questo non è un grosso problema, ma una volta che iniziamo a parlare di immagini che non si adattano nemmeno allo schermo e la qualità è leggermente sfocata al normale zoom dello schermo è confusa se l'interlacciamento è completato o no
- l'interlacciamento è solo un effetto, in realtà non mostra nulla all'utente. È divertente come la gente lo consideri, e le stesse persone ti diranno che quello in TV dovrebbe nascondere le cose.
- l'ottimizzazione corretta (con cui si intromette l'interlacciamento) è il modo migliore per rendere le cose più lisce
- la connettività Internet oggi non è così male che hai bisogno di interlacciamento; e sinceramente non mi è mai piaciuto nemmeno un giorno: "oh, è ancora fatto? ... no? ... ora? ... non è ancora l'ultima ondata? ... oh dai carico! ...% # $% $ immagine! OH è fatto (salva) oh merda gli era rimasto ancora un po '! " Senza intreccio, un'immagine è praticamente la sua "barra di caricamento"; molto più facile da usare. Ci sono anche tecnologie di gran lunga migliori che soddisfano i tuoi poveri utenti con connessione lenta ...
Quindi, è davvero buono per niente? Sviluppatore Web saggio, no. Tuttavia, se stai dicendo di pubblicare alcune immagini su un forum, il codice sul forum non può conoscere la dimensione; dal momento che l'interlacciamento in pratica passa la dimensione molto rapidamente, l'interlacciamento è un modo per risolvere i tuoi problemi di layout (inesistenti, pignoli) - realisticamente l'unica situazione credibile è con le immagini fluttuanti.
Ho sempre avuto sentimenti contrastanti riguardo alle immagini intrecciate/progressive. Non riesco ancora a decidere dove mi trovo su quelli. Ma c'è una cosa che vorrei che facessero tutti i browser: mentre la pagina viene visualizzata ma le immagini non sono ancora state caricate, vorrei che mostrassero una rappresentazione dell'immagine anziché solo uno spazio bianco. IE6 aveva un'opzione "Mostra segnaposto immagine" difficile da trovare che faceva esattamente questo, ma non era attivata per impostazione predefinita.
Ovviamente, affinché il segnaposto immagine funzioni correttamente, la pagina Web deve includere gli attributi larghezza/altezza appropriati, come indicato da @ DA01 .
Penso che l'importanza delle immagini progressiste/intrecciate sia diminuita negli ultimi anni. Molte persone nei paesi del primo mondo hanno Internet ad alta velocità ( http://articlet.com/article791.html ). Quando l'utente ha accesso remoto, un utente potrebbe chiedersi perché le cose vengano posizionate sullo schermo così come sono. Le immagini progressive/interlacciate danno agli utenti qualcosa da guardare e sono abituate a riempirle nel tempo. Gli utenti con accesso a Internet ad alta velocità di solito scaricano l'immagine abbastanza velocemente da non vederla riempire progressivamente.
Se si mantiene il peso delle immagini scaricate abbastanza piccolo, saranno ragionevolmente veloci su tutte le connessioni. A tutta larghezza di banda, i modem dial-up possono estrarre un'immagine da 6,8 KB in 1 secondo. La stessa immagine per qualcuno con una connessione a 20 MB richiederà solo ~ 3 millisecondi. Puoi vedere come le immagini progressive/interlacciate non offrono alcun vantaggio agli utenti di Internet ad alta velocità.
Secondo l'articolo (che ha un paio d'anni), abbiamo ancora un numero significativo di utenti che hanno a che fare con il dial-up. Almeno avrei ridotto le immagini il più piccolo possibile e avrei sfruttato al massimo la memorizzazione nella cache del browser. Ad esempio, un file SVG zippato può essere molto più piccolo e offrire un'esperienza migliore se qualcuno ha un browser moderno sulla propria connessione remota. Cerco ancora di fare il più possibile senza immagini. Ciò significa che trarrò vantaggio dai caratteri Web di Google o dal loro hosting di jQuery, ecc. Una volta che il browser memorizza nella cache quella copia (è mappata dall'URL nella cache), devono scaricarlo solo una volta.