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

Commenti degli intervistati su varie tecniche di ottimizzazione delle immagini

Mario Bianchi

Questo post elenca il feedback in formato libero ricevuto da Google Web DevRel nel sondaggio sulle tecniche di ottimizzazione delle immagini dell'estate 2019. Le risposte sono state richieste tramite Web Fundamentals e @ChromiumDev. Lo scopo del sondaggio è 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 delle risposte non sono elencati qui perché c'erano 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 scoprire in che modo altri sviluppatori web hanno risolto un problema che hai riscontrato, nonché per scoprire i costi, i vantaggi e i limiti di ogni tecnica.
  • Se sei un fornitore di servizi immagini o CDN di immagini, questo post potrebbe aiutarti a trovare nuove opportunità di mercato.
  • Se sei un framework, uno strumento di creazione o uno sviluppatore di CMS, questo post potrebbe darti idee su nuove funzionalità da implementare.

Commenti

WebP

  • "Mi piace WebP, ma non è ancora completamente pronto. Inoltre, il nostro WordPress non supporta WebP. Inoltre, una delle app di fotoritocco più popolari, Photoshop, non supporta WebP da subito. 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 esportarli da Photoshop/Figma/Sketch e tutti i browser lo supportassero." [Nota: Sketch supporta WebP]
  • "Una soluzione di formattazione di nuova generazione sarebbe ottima."
  • "Interrompi il push di WebP quando il supporto del browser è scarso e considera la necessità di utilizzare PNG anziché JPEG per gli screenshot."
  • "Documenti Google non supporta WebP."
  • "Utilizzeremo esclusivamente WebP, ma siamo preoccupati per la compatibilità del browser."
  • "Innanzitutto correggi la compatibilità del browser e aggiorna i browser precedenti o aggiungi correzioni precedenti, in questo modo le persone saranno 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 altri tipi di immagini di nuova generazione, in modo che i non sviluppatori debbano saperlo."

Immagini SVG e vettoriali

  • "Se possibile, sto usando un file SVG (animato). gatsby-image ha risolto molti problemi. Tuttavia, quando analizzi i risultati ottenuti, è assolutamente irrealistico che un normale sito web debba creare qualcosa di simile affinché le immagini funzionino correttamente. Il browser dovrebbe assumersi una parte maggiore di questa responsabilità".
  • "Sarebbe possibile documentare come creare animazioni SVG con lottie.js?"
  • "Il più delle volte, per evitare tempi di caricamento, cerchiamo di utilizzare immagini JPEG ad alta risoluzione e dimensioni ridotte sul nostro sito web. Inoltre, ci assicuriamo di utilizzare le immagini SVG quando necessario per garantire la qualità del design reattivo."
  • "Cerchiamo di utilizzare grafica vettoriale ottimizzata per tutti tranne le foto, se possibile."

Altri formati dell'immagine

  • "Dobbiamo [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."
  • "Utilizza l'attributo di caricamento lento con background-image."
  • "Frameworks dovrebbe fornire subito una migliore elaborazione delle risorse."
  • "Molto tempo fa, siamo passati dal caricamento lento. Segnalazioni degli utenti di milioni di immagini e siti "NON CARICAMENTO". Abbiamo capito come riassumere il nostro team. Per gli utenti non tecnici, è difficile descrivere i problemi."
  • "Non vedo l'ora di capire meglio come usare l'API Intersection Observationr per il caricamento lento anziché utilizzare le tecniche tradizionali".
  • "Per me funziona: pwafire.org/developer/codelabs/progressive-loading."

Immagini di sfondo

  • "In genere carico le immagini come sfondi in CSS."
  • "Il tag <img> presenta dei problemi ed è difficile controllare dettagli granulari, in particolare nel caso dei contenuti inviati dagli utenti. Utilizziamo <div> e lo stile dell'immagine di sfondo molto più spesso, in quanto ci consente di usare le dimensioni dello sfondo e la posizione dello sfondo e di impedire il salvataggio dell'immagine con il tasto destro del mouse.

Trasparenza

  • "È il 2019. In che modo le immagini JPG continuano senza trasparenza alfa?"
  • "Uso i file PNG per le fotografie solo quando ho bisogno di uno sfondo trasparente."

Segnaposto delle immagini di bassa qualità (LQIP)

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

Esibizione

  • "Di recente abbiamo riscontrato un problema di rendimento delle immagini. Mentre un utente scorre verso il basso sul nostro sito, mostriamo le successive 60 schede, tra cui una miniatura. A causa del limite di 6 connessioni sullo stesso dominio, le miniature erano bloccate e 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 esplorando lo sharding del dominio / il caricamento delle richieste di dati JSON del dominio da un altro dominio."

Taglie

  • "Mi dispiace per le dimensioni intrinseche; l'uso di altezza/larghezza mi sembra meglio."
  • "Cerchiamo un modo per generare meno dimensioni, al momento il valore è di circa 12."
  • "Il ridimensionamento dinamico delle immagini è davvero 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 una società di gestione di documenti. Le nostre app gestiscono MILIONI di immagini scansionate ad alta risoluzione, di solito TIFF o PDF."
  • "È una seccatura. I file img ad alta risoluzione sono necessari per il formato di stampa; devono essere ottimizzati per il web. È complicato ridimensionare le immagini per il web, ma è un problema se gli autori forniscono solo file leggeri per le immagini destinate alla pubblicazione su carta. Finirà per fornire messaggi contrastanti sui requisiti per l'invio di manoscritti con artwork. Di conseguenza, ci troveremo con flussi di lavoro complessi per l'elaborazione di questi materiali."

Funzionalità del browser

  • "Taglio src in automatico dal browser poiché la funzionalità [integrata] sarebbe molto utile, in quanto richiederebbe molto tempo ritagliare tutte le immagini a 4 dimensioni e scrivere tutto il markup. Se possiamo caricare una foto di grandi dimensioni e scrivere un semplice tag immagine, i browser creeranno automaticamente i vari attributi src che risulteranno una funzionalità vincente."
  • "Personalmente, ho difficoltà a evitare l'adattamento dinamico del contenuto della pagina quando l'immagine con viene impostata dal CSS per le immagini adattabili (max-width: 100%; altezza automatica o altezza: larghezza: 100%; altezza automatica), soprattutto in combinazione con la direzione artistica di immagini adattive/tag immagine. Il modo migliore per evitarlo sembra usare l'"trucchetto con spaziatura interna negativa" per ottenere proporzioni fisse dell'immagine e quindi posizionare l'immagine all'interno di questo riquadro. 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 immagine

  • "Google dovrebbe fornire una rete CDN senza costi come Cloudflare."
  • "Forse sarebbero utili gli strumenti aggiuntivi per configurare la scalabilità dinamica e le reti CDN con provider diversi".
  • "Un'unica immagine sovradimensionata e sovracompressa è una soluzione discreta senza costi di produzione aggiuntivi. Hai bisogno di immagini larghe circa 1000 pixel per i dispositivi mobili (larghezza di rendering 500 px), ovvero le dimensioni necessarie per i display non Retina di grandi dimensioni/computer. Penso che il ridimensionamento delle immagini CDN sia una soluzione pessima, anche se l'ho utilizzata in passato. Il CMS dovrebbe gestire il ridimensionamento, che è troppo complesso da configurare, un'unica soluzione è un buon compromesso (per il momento)."
  • "CloudFlare scala automaticamente le nostre immagini in modo che si adattino al meglio al display dell'utente. In questo modo possiamo risparmiare sui tempi di caricamento perché le immagini vengono caricate in relazione al display dell'utente. Ad esempio, se un utente usa un telefono, non verrà caricato in uno sfondo delle dimensioni di un computer.
  • "Cloudflare esegue questa operazione in background senza che sia necessario selezionare una casella nel pannello delle impostazioni."
  • "Solo per ricordarti, l'unico motivo per cui riesco a utilizzare con successo srcset ecc. è per la facilità di Cloudinary. Ma Cloudinary diventa costoso, molto rapidamente. Sembra una lacuna importante nell'esperienza di sviluppo."
  • "Abbiamo bisogno di un modo per ritagliare automaticamente e facilmente le immagini in modo intelligente, in modo che possano lavorare con proporzioni diverse in contesti differenti".
  • "Uso anche immagini di altri fornitori, come Unsplash, dove il controllo di risoluzione, qualità e compressione è molto ridotto".

CMS, piattaforma e framework

  • "Ho ancora difficoltà a trovare il modo migliore per utilizzare le immagini quando costruisco un sito con un CMS. Gli autori tendono a configurare immagini con dimensioni diverse e si aspettano che le immagini non si restringano o non vengano ridimensionate. Non so se sia corretto impostare max-width o max-height per le immagini
  • "Ho utilizzato gatsby-image per gli ultimi progetti e non me ne sono mai pentita."
  • "Spesso le immagini sono la parte più difficile, in quanto vengono inserite in CMS dall'utente finale; è possibile utilizzare qualsiasi dimensione e formato; a volte, è possibile utilizzare immagini originali in un formato ideale e le dimensioni non sono disponibili."
  • "Le immagini sono difficili da gestire perché il nostro sistema è dotato di controlli che consentono di aggiungere elementi in modo autonomo, a meno che non si verifichino operazioni automatiche senza influire sulla risoluzione. Inoltre le immagini non sembrano corrette sui dispositivi mobili rispetto ai 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 rete CDN o da plug-in per creare WebP. srcset/picture deve essere codificato correttamente dagli sviluppatori di temi. La maggior parte dei plug-in per il caricamento lento viene caricata lentamente generando un'esperienza utente negativa. Le immagini di sfondo sono difficili da caricare tramite caricamento lento."

Costo/vantaggi

  • "Le nuove pratiche sono efficaci, ma aumentano i tempi di sviluppo dei siti".
  • "La mancanza di rispetto dei nuovi standard come srcset e WebP è stata lenta per essere adottata da molte aziende Fortune 500. Vedendo ciò, molte aziende hanno resistito al cambiamento come un costo di sviluppo non necessario per i siti web attuali. I miglioramenti in termini di rendimento non sono ampiamente discussi o riportati dall'utente finale (UX). Se ce n'è uno, il salvataggio di immagini dal web risulta un po' più difficile".
  • "Costoso creare e gestire più dimensioni e versioni."
  • "Occupano molto spazio sul nostro server."

SEO

  • "È difficile trovare un equilibrio tra qualità dell'immagine accettabile e dimensioni del file. Da un lato, voglio un caricamento rapido per il vantaggio della SEO, ma dall'altro, immagini di scarsa qualità distolgono l'attenzione dall'UI/UX."

Il ruolo delle immagini sul web

  • "Ce ne sono troppe sul web. Smetti di usare immagini inutili che non migliorano i contenuti scritti."
  • "Ricordi ancora quando sul web non c'erano immagini e dovevamo condividere selfie come 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 continuamente. Per uno sviluppatore web è estremamente frustrante perché salvare le immagini richiede molto tempo. Ottimizziamo al meglio delle nostre possibilità, controlliamo il sito e, mesi dopo, Google ha deciso che le immagini potrebbero essere ancora più compresse o dover essere in un formato diverso. Questo ci impedisce di fornire al nostro cliente la migliore soluzione possibile e duratura, e crea uno sforzo costoso sia per loro che per noi. Alcuni dei nostri clienti di piccole imprese semplicemente non dispongono del budget che ci consente di continuare a correggere le immagini e a salvarle per ottemperare ai requisiti. Non abbiamo il budget per eseguire questa operazione all'interno dei loro pacchetti di gestione. Anche scrivere il codice per chiamare immagini di dimensioni diverse per dispositivi diversi può richiedere molto tempo. Sarebbe bello trovare un sistema per salvare le immagini che rimangano costanti per un periodo di tempo più lungo."
  • "Sì, credo che tu abbia sbagliato il numero di richieste in Lighthouse e "Mantieni il conteggio delle richieste basso e le dimensioni dei file piccole". Se un sito pubblica tramite HTTP1.x, sicuramente, ma se un sito pubblica tramite HTTP2, il numero di richieste è meno importante o non presenta alcun problema se ha origine dallo stesso nome host. Ho un sito web Lite, ma carico 30 piccoli file WebP di circa 35 richieste totali, su HTTP2 sullo stesso nome host. Lighthouse segnala che il problema riguarda un numero ridotto di richieste e dimensioni ridotte dei file, mentre è superveloce e, a causa di HTTP2 sullo stesso nome host, il numero di richieste non è un problema. Inoltre, i file sono già di piccole dimensioni (la maggior parte tra 1 kB e 2 kB o meno). Potrei caricare uno sprite, ma poi è necessario eseguire altri calcoli CSS. Quindi, aggiorna il report "Keep Request Counts Low and File sizes Small" in Lighthouse per prendere in considerazione HTTP2 sullo stesso nome host.
  • "Per le persone è stato difficile ricordare di comprimere le proprie immagini".
  • "Il comportamento dei vari browser rimane imprevedibile, per cui le soluzioni più semplici sono spesso le più sicure".