Feedback dal sondaggio sull'ottimizzazione delle immagini dell'estate 2019

Commenti dei partecipanti al sondaggio su varie tecniche di ottimizzazione delle immagini

Sam Dutton

Questo post elenca i feedback in formato libero che il team DevRel di Google Web ha ricevuto nel sondaggio sulle tecniche di ottimizzazione delle immagini nell'estate 2019. Le risposte sono state richieste tramite Web Fundamentals e @ChromiumDev. Lo scopo del sondaggio era scoprire perché la maggior parte dei siti non segue le best practice per l'ottimizzazione delle immagini, anche se sembrano un modo relativamente semplice per migliorare il rendimento. I dati sulle risposte non sono elencati qui perché sono stati rilevati difetti nella metodologia del sondaggio.

Pubblico

  • Se sei uno sviluppatore web, questo post potrebbe esserti utile per scoprire nuove tecniche di ottimizzazione delle immagini o per conoscere i dettagli su come altri sviluppatori web hanno risolto un problema che stai riscontrando, nonché i costi, i vantaggi e le limitazioni di ciascuna 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 compilazione o CMS, questo post potrebbe darti idee su nuove funzionalità da implementare.

Commenti

WebP

  • "Mi piace WebP, ma non è ancora completamente pronto. Inoltre, WordPress non supporta WebP. Anche Photoshop, una delle app di fotoritocco più popolari, non supporta WebP senza alcuna configurazione. Pertanto, non possiamo fare affidamento su app o servizi di terze parti per la compressione delle immagini."
  • "Rendi WebP utilizzabile su Safari."
  • "Mi piacerebbe utilizzare WebP se potessi esportarlo da Photoshop/Figma/Sketch e se tutti i browser lo supportassero." [Nota: Sketch supporta WebP]
  • "Una soluzione di formattazione di nuova generazione sarebbe fantastica."
  • "Smetti di spingere così tanto WebP quando il supporto del browser è scarso e valuta la necessità di PNG anziché JPEG per gli screenshot."
  • "Documenti Google non supporta WebP."
  • "Vorremmo utilizzare esclusivamente WebP, ma abbiamo dei dubbi sulla compatibilità del browser."
  • "Innanzitutto correggi la compatibilità del browser e aggiorna i browser precedenti o aggiungi correzioni precedenti, in modo che le persone siano più inclini ad adottare nuovi tipi di immagini come WebP…"
  • "Incoraggia gli sviluppatori di plug-in/temi a prendere in considerazione la possibilità di fornire supporto a WebP e ad altri tipi di immagini di nuova generazione, in modo che chi non è uno sviluppatore non debba preoccuparsi di questo aspetto."

Immagini SVG e vettoriali

  • "Se possibile, utilizzo SVG (animati). gatsby-image ha risolto molti problemi. Tuttavia, se analizzi ciò che hanno fatto, è del tutto irrealistico che un normale sito web debba creare qualcosa di simile per far funzionare correttamente le immagini. Il browser dovrebbe assumersi più responsabilità."
  • "Sarebbe possibile documentare come creare animazioni SVG con lottie.js?"
  • "Cerchiamo di utilizzare immagini JPEG ad alta risoluzione con dimensioni ridotte nel nostro sito web la maggior parte del tempo per evitare tempi di caricamento. Ci assicuriamo inoltre di utilizzare gli SVG quando necessario per garantire la qualità del design responsive."
  • "Se possibile, cerchiamo di utilizzare immagini vettoriali ottimizzate per tutti gli elementi, tranne le foto."

Altri formati di immagine

  • "Dobbiamo educare meglio le persone a smettere di usare le GIF."

Caricamento lento

  • "Tieni presente l'utente quando valuti funzionalità come il caricamento lento, perché per molti è fastidioso."
  • "Fai in modo che l'attributo di caricamento lento funzioni con l'immagine di sfondo."
  • "I framework dovrebbero migliorare l'elaborazione degli asset out-of-the-box."
  • "Abbiamo eseguito la conversione dal caricamento lento molto tempo fa. Segnalazioni degli utenti relative a milioni di immagini e siti "NON IN RICARICA". Questo è il riepilogo del nostro team. È difficile per un utente non tecnico descrivere i problemi."
  • "Vorrei capire meglio come utilizzare l'API Intersection Observer per il caricamento differito anziché le tecniche tradizionali."
  • "Questo funziona bene per me: pwafire.org/developer/codelabs/progressive-loading."

Immagini di sfondo

  • "Di solito carico le immagini come sfondi in CSS."
  • "Il tag <img> è problematico e difficile da controllare in dettaglio, in particolare con i contenuti inviati dagli utenti. Utilizziamo <div> e lo stile background-image molto più spesso perché ci consente di utilizzare background-size, background-position e di impedire il salvataggio dell'immagine con il tasto destro del mouse."

Trasparenza

  • "È il 2019. Come mai i file JPG non hanno ancora la trasparenza alfa?"
  • "Utilizzo i file PNG per le fotografie solo quando ho bisogno di uno sfondo trasparente."

Segnaposti immagine di bassa qualità (LQIP)

  • "Utilizziamo le LQIPS ed è un'ottima tecnica per mantenere i visitatori coinvolti senza caricare subito immagini di alta qualità."

Prestazioni

  • "Di recente abbiamo riscontrato un problema di prestazioni con le immagini. Quando un utente scorre verso il basso sul nostro sito, mostriamo le 60 schede successive che includono una miniatura. A causa del limite di 6 connessioni nello stesso dominio, le miniature venivano bloccate, così come la successiva richiesta AJAX per ottenere le 60 schede successive se un utente continua a scorrere verso il basso."
  • "Ci piacerebbe utilizzare HTTP/2, ma la maggior parte dei nostri clienti utilizza IE11. Stiamo quindi valutando la possibilità di eseguire lo sharding del dominio / caricare le richieste di dati JSON AJAX da un altro dominio."

Taglie

  • "Scusa per le dimensioni intrinseche; l'utilizzo di altezza/larghezza mi sembra migliore."
  • "Sto cercando un modo per generare meno dimensioni, al momento sono circa 12."
  • "Il ridimensionamento dinamico delle immagini è molto difficile e impossibile senza JS."
  • "Uno strumento come responsivebreakpoints.com è utile per web.dev :)."

Immagini di alta qualità e ad alta risoluzione

  • "Come scaricare immagini compresse senza perdere la qualità DPI?"
  • "Siamo un'azienda di gestione dei documenti. Le nostre app gestiscono MILIONI di immagini scansionate ad alta risoluzione, in genere in formato TIFF o PDF."
  • "È una seccatura. I file di immagini ad alta risoluzione sono necessari per il formato di stampa; devono essere ottimizzati per il web. Ridurre le dimensioni delle immagini per il web è un'operazione complicata, ma è un problema se gli autori forniscono solo file leggeri per le immagini destinate alla pubblicazione a stampa. Finiamo per dare messaggi contrastanti sui requisiti per l'invio di manoscritti con artwork. Il risultato sono flussi di lavoro complessi per l'elaborazione di questi materiali".

Funzionalità del browser

  • "Il ritaglio automatico dell'attributo src dal browser come funzionalità [incorporata] sarebbe molto utile perché richiede molto tempo ritagliare tutte le immagini in 4 dimensioni e scrivere tutto il markup. Se potessimo caricare una foto di grandi dimensioni e scrivere un semplice tag immagine, i browser creerebbero automaticamente più attributi src, che sarebbe una funzionalità vincente."
  • "Personalmente, ho difficoltà a evitare il rifacimento della pagina quando l'attributo width dell'immagine è impostato tramite CSS per le immagini responsive (max-width: 100%; height auto o height: width: 100%; height auto), in particolare in combinazione con l'art direction delle immagini/del tag picture adattabili. Il modo migliore per evitarlo sembra essere utilizzare il "hack di spaziatura negativa" per un rapporto immagine fisso e poi posizionare l'immagine all'interno di questa casella del rapporto. Un supporto migliore per i browser/la gestione delle immagini responsive sarebbe di grande aiuto."
  • "Disattiva la "riproduzione automatica" delle GIF recuperando solo il primo frame."

CDN e servizi di immagini

  • "Google dovrebbe fornire una CDN senza costi come Cloudflare."
  • "Forse sarebbe utile avere più strumenti per configurare il ridimensionamento dinamico e le CDN con fornitori diversi."
  • "Una singola immagine sovracompressa di grandi dimensioni è una soluzione molto valida senza costi di produzione aggiuntivi. Per i dispositivi mobili sono necessarie immagini di circa 1000 pixel di larghezza (larghezza di rendering di 500 pixel). Queste sono anche le dimensioni necessarie per i display non Retina di grandi dimensioni/desktop. Penso che le CDN di ridimensionamento delle immagini siano una soluzione molto negativa, anche se le ho utilizzate in passato. Il CMS dovrebbe gestire il ridimensionamento e se la configurazione è troppo complessa, una singola soluzione è un buon compromesso (per il momento)."
  • "CloudFlare ridimensiona automaticamente le nostre immagini in base al display dell'utente. In questo modo possiamo risparmiare sui tempi di caricamento perché le immagini vengono caricate in base al display dell'utente. Ad esempio, se un utente utilizza uno smartphone, l'immagine di sfondo non verrà caricata in formato desktop."
  • "Cloudflare esegue questa operazione in background senza che noi debbano fare altro che selezionare una casella nel riquadro delle impostazioni."
  • "Per chiarire, l'unico motivo per cui riesco a utilizzare correttamente srcset e così via è la semplicità di Cloudinary. Ma Cloudinary diventa costoso, molto rapidamente. Sembra un'enorme lacuna nell'esperienza di sviluppo."
  • "Abbiamo bisogno di un modo per ritagliare automaticamente le immagini in modo semplice e intelligente, in modo che possano essere utilizzate con proporzioni diverse in contesti diversi."
  • "Utilizzo anche immagini di altri fornitori come Unsplash, dove il controllo di risoluzione, qualità e compressione è molto ridotto."

CMS, piattaforma e framework

  • "Non riesco ancora a capire qual è il modo migliore per utilizzare le immagini quando creo un sito utilizzando un CMS. Gli autori tendono a configurare le immagini con dimensioni diverse e si aspettano che non vengano rimpicciolite o ridimensionate. Non so se sia consentito impostare max-width o max-height sulle immagini"
  • "Utilizzo gatsby-image per gli ultimi progetti e non ho mai guardato indietro."
  • "Spesso le immagini sono la parte più difficile perché vengono inserite nel CMS dall'utente finale. Possono essere di qualsiasi dimensione e formato, a volte l'immagine originale nel formato ideale e le dimensioni non sono disponibili."
  • "Le immagini sono difficili da gestire perché il nostro sistema è self-service e l'aggiunta di controlli è complicata, a meno che non avvengano automaticamente senza influire sulla risoluzione. Anche per noi le immagini non sembrano corrette sui dispositivi mobili rispetto ai computer"
  • "Aiuto le persone a ottimizzare i loro siti (WordPress). I problemi più grandi che ho riscontrato per le immagini sono: è necessario fare affidamento su una CDN o su plug-in per creare WebP. srcset/picture deve essere codificato correttamente dagli sviluppatori di temi. La maggior parte dei plug-in di caricamento lento si carica lentamente e offre un'esperienza utente negativa. Le immagini di sfondo sono difficili da caricare in modo lazy."

Costo/beneficio

  • "Le nuove pratiche sono efficaci, ma aumentano i tempi di sviluppo dei siti."
  • "La mancanza di aderenza ai nuovi standard come srcset e WebP ha comportato un'adozione lenta da parte di molte aziende Fortune 500. Di conseguenza, molte aziende hanno resistito al cambiamento considerandolo un costo di sviluppo non necessario per i siti web attuali. I miglioramenti delle prestazioni non sono ampiamente discussi o segnalati dall'utente finale (UX). Se non altro, rende un po' più difficile salvare le 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à dell'immagine accettabile e dimensioni del file. Da un lato, voglio un caricamento rapido per i vantaggi della SEO, ma dall'altro, le immagini di scarsa qualità peggiorano l'esperienza utente/interfaccia utente".

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 quando il web non aveva immagini e condividevamo selfie come ASCII art?"

Strumenti, indicazioni, standard e best practice: problemi e richieste

  • [Un partecipante ha scritto un post del blog in risposta a questo sondaggio]
  • "I requisiti sembrano cambiare continuamente. Per un sviluppatore web è estremamente frustrante perché il salvataggio delle immagini richiede molto tempo. Ottimizziamo il meglio che possiamo, controlliamo il sito e mesi dopo Google decide che le immagini potrebbero essere ancora più compresse o devono essere in un formato diverso. Ciò ci impedisce di fornire al cliente la migliore soluzione possibile, che sia duratura e, al contrario, crea un'impresa dispendiosa per noi e per lui. Alcuni dei nostri clienti di piccole imprese semplicemente non hanno il budget necessario per continuare a correggere le immagini e a salvarle di nuovo in modo da soddisfare i requisiti. Non abbiamo il budget per svolgere questo lavoro nei loro pacchetti di gestione. Anche la scrittura del codice per chiamare dimensioni di immagini diverse per dispositivi diversi richiede tempo. Sarebbe fantastico trovare un sistema per salvare le immagini in modo coerente per un periodo di tempo più lungo."
  • "Sì, penso che tu abbia sbagliato completamente la valutazione "Mantieni un numero ridotto di richieste e dimensioni di trasferimento limitate" in Lighthouse. Se un sito viene pubblicato tramite HTTP 1.x, certo, ma se un sito viene pubblicato tramite HTTP 2, il numero di richieste è meno importante o non è nemmeno un problema se proviene dallo stesso nome host. Ho un sito web lite, ma carico 30 piccoli file WebP per un totale di circa 35 richieste tramite HTTP2 sullo stesso nome host. Lighthouse lo segnala come un problema di "Mantieni un numero ridotto di richieste e dimensioni di trasferimento limitate", ma è superveloce e, grazie a HTTP2 sullo stesso nome host, il numero di richieste non è un problema. Sì, i file sono già piccoli (la maggior parte ha dimensioni comprese tra 1 KB e 2 KB o meno). Potrei caricare uno sprite, ma poi è necessario eseguire altri calcoli CSS. Aggiorna quindi il report "Mantieni un numero ridotto di richieste e dimensioni di trasferimento limitate" in Lighthouse in modo da tenere conto di HTTP2 sullo stesso nome host."
  • "È stato difficile per le persone ricordare di comprimere le immagini."
  • "Il comportamento tra browser rimane imprevedibile, quindi le soluzioni più semplici sono spesso le più sicure."