Commenti degli intervistati su varie tecniche di ottimizzazione delle immagini
Questo post elenca i feedback in formato libero che Google Web DevRel ha ricevuto nel suo sondaggio sulle tecniche di ottimizzazione delle immagini dell'estate 2019. Le risposte sono state richieste tramite Web Fundamentals e @ChromiumDev. Il sondaggio è stato motivato dal sondaggio, il motivo per cui la maggior parte dei siti non segue le best practice per l'ottimizzazione delle immagini, pur sembrando un modo relativamente semplice per migliorare il rendimento. I dati delle risposte non sono elencati qui perché la metodologia del sondaggio è stata difettosa.
Pubblico
- Se sei uno sviluppatore web, questo post potrebbe essere utile per scoprire nuove tecniche di ottimizzazione delle immagini o per dettagli su come altri sviluppatori web hanno risolto un problema che stai affrontando, nonché sui costi, i vantaggi e i limiti di ogni tecnica.
- Se sei un fornitore di servizi di immagini o CDN di immagini, questo post potrebbe aiutarti a trovare nuove opportunità di mercato.
- Se sei uno sviluppatore di framework, strumenti di creazione o CMS, questo post potrebbe fornirti idee su nuove funzionalità da implementare.
Commenti
WebP
- "Mi piace WebP, ma non è ancora pronto. Inoltre, WordPress non supporta WebP. Photoshop, una delle app di fotoritocco più popolari, non supporta WebP preconfigurate. Pertanto non possiamo fare affidamento su app o servizi di terze parti per la compressione delle immagini."
- "Rendi WebP utilizzabile su Safari."
- "Vorrei usare WebP se potessi esportarli da Photoshop/Figma/Sketch e tutti i browser lo supportassero." [Nota: Sketch non supporta WebP]
- "La soluzione di formattazione di nuova generazione sarebbe fantastica."
- "Interrompi il push di WebP così tanto quando il supporto del browser è scarso e considera la necessità di utilizzare il formato PNG anziché JPEG per gli screenshot."
- "Documenti Google non supporta WebP."
- "Utilizzeremmo esclusivamente WebP, ma siamo preoccupati della compatibilità del browser."
- "Prima correggi la compatibilità del browser e aggiorna i browser precedenti o aggiungi correzioni precedenti, poi le persone saranno più inclini ad adottare nuovi tipi di immagini come WebP..."
- "Incoraggia gli sviluppatori di plug-in/temi a prendere in considerazione il supporto per WebP e altri tipi di immagini di nuova generazione, in modo che i non sviluppatori non debbano preoccuparsene."
SVG e immagini vettoriali
- "Se possibile, sto usando il formato SVG (animato). gatsby-image ha risolto molti di questi problemi. Tuttavia, quando si analizza nei dettagli i risultati ottenuti, è del tutto irrealistico che un normale sito web debba sviluppare qualcosa di simile affinché le immagini funzionino correttamente. Il browser dovrebbe assumersi una maggiore responsabilità."
- "Sarebbe possibile documentare come creare animazioni SVG con lottie.js?"
- "Cerchiamo di utilizzare il più delle volte immagini JPEG ad alta risoluzione con dimensioni ridotte sul nostro sito web per evitare tempi di caricamento. Inoltre, ci assicuriamo di utilizzare i file SVG quando necessario per offrire un'esperienza di qualità ottimale."
- "Cerchiamo di utilizzare grafiche vettoriali ottimizzate per tutte le immagini, se possibile."
Altri formati di immagine
- "Dobbiamo [dover] educare meglio le persone a smettere di usare le GIF."
Caricamento lento
- "Non dimenticate l'utente quando pensate a funzionalità come il caricamento lento, perché per molti è fastidioso."
- "Fai funzionare l'attributo di caricamento lento con l'immagine di sfondo."
- "I frameworks dovrebbero migliorare l'elaborazione degli asset fin dal primo avvio."
- "Ci siamo convertiti dal caricamento lento molto tempo fa. Gli utenti segnalano "NOT LOADING" milioni di immagini e siti. Questo è quanto abbiamo riassunto dal nostro team. Per un utente che non ha competenze tecniche è difficile descrivere i problemi".
- "Vorrei capire meglio come funziona l'API Intersection Observer per il caricamento lento anziché le tecniche tradizionali."
- "Per me va bene: pwafire.org/developer/codelabs/progressive-loading".
Immagini di sfondo
- "Di solito carico immagini come sfondi in CSS."
- "Il tag
<img>
è problematico ed è difficile controllare i dettagli granulari del caso, soprattutto per i contenuti inviati dagli utenti. Utilizziamo<div>
e lo stile dell'immagine di sfondo molto più spesso, in quanto ci consentono di usare dimensioni dello sfondo e posizione dello sfondo e impedire il salvataggio dell'immagine tramite clic con il tasto destro del mouse."
Trasparenza
- "È il 2019. In che modo i file JPG sono ancora senza trasparenza alfa?"
- "Uso i file PNG per le foto solo quando ho bisogno di uno sfondo trasparente."
Segnaposto di immagini di bassa qualità (LQIP)
- "Utilizziamo LQIPS ed è un'ottima tecnica per mantenere coinvolti i visitatori senza caricare molto presto immagini di alta qualità".
Rendimento
- "Di recente abbiamo riscontrato un problema di rendimento con le immagini. Man mano che un utente scorre il sito verso il basso, vengono visualizzate le successive 60 schede che includono una miniatura. A causa del limite di sei connessioni sullo stesso dominio, le miniature venivano bloccate, nonché la successiva richiesta AJAX di ottenere le successive 60 schede se l'utente continua a scorrere verso il basso."
- "Ci piacerebbe usare HTTP/2, ma la maggior parte dei nostri clienti utilizza IE11! Stiamo quindi esplorando lo sharding del dominio e il caricamento di richieste di dati JSON JSON da un dominio diverso."
Dimensionamento
- "Mi dispiace per le dimensioni intrinseche; sfruttare altezza/larghezza mi sembra meglio."
- "Cercando un modo per generare meno dimensioni, al momento ci sono circa 12".
- "Il ridimensionamento dinamico delle immagini è davvero difficile e impossibile senza JS."
- "Uno strumento come responsivebreakpoints.com è adatto per web.dev :)".
Immagini di alta qualità e ad alta risoluzione
- "Come scaricare immagini compresse senza ridurne la qualità DPI?"
- "Siamo una società di gestione di documenti. Le nostre app gestiscono MILLIONS di immagini scansionate ad alta risoluzione, in genere in formato TIFF o PDF."
- "È una seccatura. I file img ad alta risoluzione sono necessari per il formato di stampa e devono essere ottimizzati per il web. Ridimensionare le immagini per il Web è un fastidio, ma è una soluzione definitiva se gli autori forniscono solo file leggeri per le immagini destinate alla pubblicazione su carta stampata. Alla fine forniamo messaggi misti sui requisiti per l'invio di manoscritti con artwork. Ci troviamo quindi su flussi di lavoro complessi per l'elaborazione di questi materiali."
Funzionalità del browser
- "La funzionalità src reattiva automaticamente dal browser come [integrata] sarebbe molto utile perché ritagliare tutte le immagini in 4 dimensioni e scrivere tutto il markup richiede molto tempo. Se riuscissimo a caricare una foto di grandi dimensioni e a scrivere un semplice tag per l'immagine, i browser creeranno automaticamente gli attributi src che sarebbero una caratteristica vincente."
- "Personalmente ho difficoltà a evitare l'adattamento dinamico del contenuto della pagina quando l'immagine con è impostata da CSS per le immagini adattabili (max-width: 100%; altezza automatica o altezza: larghezza: 100%; altezza automatica), soprattutto in combinazione con la direzione artistica del tag immagine/immagine adattiva. Il modo migliore per evitare sembra utilizzare la "compromissioni di spaziatura interna negativa" per proporzioni fisse e poi posizionare l'immagine all'interno di questa casella delle proporzioni. Un migliore supporto del browser/una gestione reattiva delle immagini sarebbe di grande aiuto."
- "Disattiva la riproduzione automatica della GIF recuperando solo il primo frame."
CDN e servizi di immagini
- "Google dovrebbe fornire una rete CDN senza costi come Cloudflare."
- "Forse sarebbe utile avere più strumenti per configurare la scalabilità dinamica e CDN con provider diversi."
- "Una singola immagine sovracompressa sovradimensionata è una soluzione eccellente senza costi di produzione aggiuntivi. Occorrono circa 1000 pixel di immagini di larghezza per i dispositivi mobili (larghezza di rendering: 500 px) ed è anche la dimensione necessaria per i display non-retina di grandi dimensioni/computer. Penso che le immagini che ridimensionano le reti CDN siano una soluzione pessima, anche se l'ho usata in passato. Il CMS dovrebbe gestire il ridimensionamento e, dato che è troppo complesso da configurare, un'unica soluzione è un buon compromesso (per il momento)."
- "CloudFlare scala automaticamente le nostre immagini per adattarle al meglio al display dell'utente. Possiamo quindi risparmiare sui tempi di caricamento perché le immagini vengono caricate in relazione al display dell'utente. Ad esempio, se un utente usa uno smartphone, l'elemento non verrà caricato su uno sfondo in formato desktop.
- "Cloudflare esegue questa operazione in background senza che noi debba fare altro che selezionare una casella nel pannello delle impostazioni."
- "Giusto per ribadire, l'unico motivo per cui posso usare correttamente srcset, ecc. è la facilità di utilizzo di Cloudinary. ma Cloudinary diventa costoso, molto rapidamente e sembra una grossa lacuna nell'esperienza di sviluppo."
- "Ci serve un modo per ritagliare automaticamente le immagini in modo intelligente in modo che possano lavorare con proporzioni diverse in contesti diversi."
- "Utilizzo anche immagini di altri fornitori come Unsplash dove c'è molto meno controllo su risoluzione, qualità e compressione."
CMS, piattaforma e framework
- "Quando creo un sito con un CMS non riesco ancora a capire qual è il modo migliore per usare le immagini. Gli autori tendono a configurare immagini con dimensioni diverse e si aspettano che le immagini non si restringano o non si ridimensionano. Non so se è possibile impostare max-width o max-height sulle immagini"
- "Ho usato gatsby-image negli ultimi progetti e non me ne sono mai pentito."
- "Le immagini sono spesso la parte difficile in quanto vengono inserite in CMS dall'utente finale, possono utilizzare qualsiasi dimensione e formato, a volte un'immagine originale in un formato immagine ideale e le dimensioni non sono disponibili".
- "Le immagini sono difficili da gestire poiché il nostro sistema prevede l'aggiunta di controlli in modalità self-service, a meno che ciò non avvenga automaticamente senza influire sulla risoluzione. Inoltre per noi le immagini non sembrano corrette su dispositivi mobili o computer desktop"
- "Aiuto le persone a ottimizzare i propri siti (WordPress). I problemi più grandi che ho riscontrato per le immagini sono: la necessità di dipendere da una CDN o da plug-in per creare WebP. srcset/picture deve essere codificata correttamente dagli sviluppatori del tema. La maggior parte dei plug-in per il caricamento lento si carica lentamente fornendo un'esperienza utente scadente. Il caricamento lento delle immagini di sfondo è difficile."
Costi/vantaggi
- "Le nuove pratiche sono efficaci, ma aumentano i tempi di sviluppo dei siti".
- "La mancanza di aderenza ai nuovi standard come srcset e WebP è stata lenta ad essere adottata da molte società Fortune 500. Visto questo, molte aziende hanno resistito al cambiamento come costo di sviluppo inutile per i siti web attuali. I miglioramenti del rendimento non sono ampiamente discussi o segnalati dall'utente finale (UX). Se ce n'è uno, risulta un po' più difficile salvare immagini dal web."
- "È costoso creare e gestire più dimensioni e versioni."
- "Occupano molto spazio sul nostro server".
SEO
- "È difficile trovare il giusto equilibrio tra qualità delle immagini accettabile e dimensioni del file. Da un lato, preferisco un caricamento rapido ai fini della SEO, ma d'altra parte, immagini di scarsa qualità possono compromettere l'UI/UX."
Il ruolo delle immagini sul web
- "Ce ne sono troppi sul web. Smetti di utilizzare immagini inutili che non migliorano i contenuti scritti."
- "Ricordi ancora un tempo in cui sul web non c'erano immagini e quando condividiamo selfie in formato ASCII-art?"
Strumenti, linee guida, standard e best practice: frustrazioni e richieste
- [Un partecipante ha scritto un post del blog in risposta a questo sondaggio]
- "I requisiti sembrano cambiare costantemente. Per gli sviluppatori web è estremamente frustrante, perché salvare le immagini richiede molto tempo. Ottimizziamo il meglio che possiamo, controlliamo il sito e mesi dopo Google ha deciso che le immagini potrebbero essere ancora più compresse o devono essere in un formato diverso. Questo ci impedisce di fornire al nostro cliente la migliore soluzione possibile che duri nel tempo e comporti invece uno sforzo costoso per loro e per noi. Alcuni dei nostri piccoli clienti non dispongono del budget necessario per continuare a correggere le immagini e a salvarle di nuovo in modo da ottemperare ai requisiti. Non abbiamo il budget per fare questo lavoro all'interno dei loro pacchetti di gestione. Anche scrivere il codice per chiamare immagini di dimensioni diverse a seconda del dispositivo può richiedere molto tempo. Sarebbe bello trovare un sistema per salvare le immagini che fosse coerente per un periodo di tempo più lungo".
- "Sì, penso che tu abbia sbagliato numero di richieste e dimensioni di file ridotte" in Lighthouse. Se un sito pubblica tramite HTTP1.x, ma se un sito pubblica tramite HTTP2 il numero di richieste è meno importante o non rappresenta un problema se provengono dallo stesso nome host. Ho un sito Web Lite, ma carico 30 piccoli file WebP di circa 35 richieste in totale, su HTTP2 sullo stesso nome host. Lighthouse segnala questo problema come "Mantieni bassi i conteggi delle richieste e le dimensioni dei file", mentre è superveloce e, a causa dell'HTTP2 sullo stesso nome host, il numero di richieste non rappresenta un problema. E sì, i file sono già di dimensioni ridotte (la maggior parte dei casi ha dimensioni comprese tra 1 e 2 kB o meno). Potrei caricare uno sprite, ma poi è necessario fare più calcolo con il CSS. Aggiorna il report "Riduci il numero di richieste e riduci le dimensioni dei file" in Lighthouse per considerare HTTP2 dello stesso nome host.
- "Per le persone è stato difficile ricordarsi di comprimere le proprie immagini".
- "Il comportamento cross-browser rimane imprevedibile, quindi le soluzioni più semplici sono spesso le più sicure."