2016-05-11 43 views
13

Voglio costruire un sito Web con molte immagini e quindi manipolazioni di immagini come Amazon, Ebay, Flipkart, ecc. Mi è stato suggerito di utilizzare servizi come Cloudinary, Imgix, ecc. Per ridimensionare le mie immagini in quanto sarebbe meglio memorizzare una versione di ciascuna immagine anche se avrei bisogno di diverse versioni con dimensioni diverse. Mi piacerebbe sapere quanto siano efficienti questi servizi. Ci sono problemi? Mi piacerebbe che il mio sito web fosse molto veloce e reattivo. Ho sentito le preoccupazioni come "Prendere in considerazione che si sta almeno raddoppiare la latenza di trasferimento in questione, che spesso dominano il tempo necessario per completare un'operazione immagineEfficienza di servizi come Cloudinary, Imgix

normale:. End_user-> your_user-> end_user

Attraverso questi servizi: end_user-> your_user-> te-> your_user-> end_user"

+0

Noi (pricejugaad.ae) utilizziamo i servizi imgix degli ultimi mesi. Inizialmente funzionava bene. ma nel tempo, il nostro team sta ottenendo troppi problemi come l'immagine non trovata ecc. il servizio clienti imgix non è affatto buono, ho inviato loro più di 10 mail, il tempo di rotazione è qualcosa come più di 10 giorni e il problema rimane non è stato ancora risolto. Ragazzi, per favore fatemi sapere se trovate altri servizi alternativi. Cloudinary è buono? – Swamy

+0

Siamo passati a Cloudinary. finora, sta funzionando bene e anche il suo SEO friendly. – Swamy

risposta

26

(Disclaimer: mi occupo di relazioni con gli sviluppatori a imgix, e risponderanno questo post in quanto si applica al nostro stack)

Hai assolutamente ragione che per un compl immagine etely uncached, ci sono più "hop" coinvolti per servire un'immagine. Per il primo utente a visualizzare un'immagine, ciò può comportare una latenza leggermente maggiore. Successivamente, tuttavia, l'immagine viene memorizzata nella cache sia dal nostro cluster di rendering che dalla CDN globale, il che rende le richieste successive per qualsiasi immagine basata sull'originale molto più velocemente. In entrambi i casi, il risparmio di byte derivante dal servire immagini di dimensioni corrette al browser sarà quasi sempre superiore a qualsiasi ulteriore latenza dalle richieste iniziali di un'immagine.

Ecco un semplice diagramma che mostra il flusso quando un'immagine non è ancora stata memorizzata nella cache:

     ┌─────────────────┐ 4. Origin responds 
         │ Your Origin │ with full-size 
         │ (S3/web folder) │ `dogs.png` image. 
         └─────────────────┘ 
         ▲    │ 
         │    │ 
         │    │ 
         │    ▼ 
     3. Image is not ┌─────────────────┐ 5. imgix caches the 
cached at imgix, send │  imgix  │ full-size image, then 
request to origin for │     │ resizes it to 300px 
      `dogs.png` └─────────────────┘ wide and caches that 
         ▲    │ derivative. 
         │    │ 
         │    ▼ 
     2. Image is not ┌─────────────────┐ 6. The imgix CDN 
     cached at CDN, │ imgix CDN (edge │ caches the 300px wide 
    forward to imgix │nodes worldwide) │ variant and serves it 
    rendering cluster. └─────────────────┘ to the browser. 
         ▲    │ 
         │    │ 
         │    │ 
         │    ▼ 
    1. Browser requests ┌─────────────────┐ 7. The browser 
    `dogs.png?w=300` │ User's Browser │ receives and renders 
         │     │ 300px wide `dogs.png`. 
         └─────────────────┘ 

Una volta che l'immagine è stata memorizzata nella cache (dopo un singolo utente lo richiede), il ciclo diventa molto stretto:

2. The imgix CDN has ┌─────────────────┐ 
this variant cached, │ imgix CDN (edge │ 
and serves it to the │nodes worldwide) │ 
      browser. └─────────────────┘ 
         ▲    │ 
         │    │ 
         │    │ 
         │    ▼ 
    1. Browser requests ┌─────────────────┐ 3. The browser 
    `dogs.png?w=300` │ User's Browser │ receives and renders 
         │     │ 300px wide `dogs.png`. 
         └─────────────────┘ 

Dopo l'immagine originale viene memorizzato nella cache al nostro gruppo di rendering, generando derivati ​​è anche molto più veloce (in questo ca SE, una versione larga 600px), dal momento che non richiedono un viaggio supplementare per il server di origine:

3. Full-size image is ┌─────────────────┐ 4. imgix resizes the 
    already cached at │  imgix  │ cached full-size image 
    imgix, no origin │     │ to 600px wide and 
     request needed. └─────────────────┘ caches that 
         ▲    │ derivative. 
         │    │ 
         │    ▼ 
     2. Image is not ┌─────────────────┐ 5. The imgix CDN 
     cached at CDN, │ imgix CDN (edge │ caches the 600px wide 
    forward to imgix │nodes worldwide) │ variant and serves it 
    rendering cluster. └─────────────────┘ to the browser. 
         ▲    │ 
         │    │ 
         │    │ 
         │    ▼ 
    1. Browser requests ┌─────────────────┐ 6. The browser 
    `dogs.png?w=600` │ User's Browser │ receives and renders 
         │     │ 600px wide `dogs.png`. 
         └─────────────────┘ 
+2

grazie per la bellissima spiegazione – deadcode

+0

Nessun problema, felice è stato utile! Fammi sapere se hai altre domande sui servizi di elaborazione delle immagini o sulle immagini reattive in generale, e ti darò una mano se possibile. –

+0

Buona spiegazione. Noi (pricejugaad.ae) stiamo usando i servizi imgix e avendo problemi nel caching, abbiamo portato questi problemi alla tua squadra e loro non sono in grado di risolvere fino ad ora. Non sono sicuro se ci sono dei limiti alla fine di imgix. – Swamy

6

Sto usando imgix oltre 1 anno. Penso che ospitare le immagini da un server di immagini professionale sia molto meglio che ospitarle dai tuoi server.

alte prestazioni

1- Come detto Paul Straw: Imgix ha una strategia di caching corretto. Non aggiunge la latenza per caricare l'immagine. Determina anche la latenza poiché non recupera l'immagine principale ogni volta che la pagina viene caricata. Prende l'immagine dalla cache.

2- Sia Cloudinary che imgix utilizzano CDN ampio e veloce. Quindi l'utente che ha bisogno di scaricare un'immagine, può ottenere il file dal bordo CDN che è più vicino alla sua posizione. Pertanto la latenza verrà eliminata e verrà scaricata più rapidamente.

3- L'utilizzo delle dimensioni corrette dell'immagine per un determinato dispositivo (o il più vicino possibile) è il modo migliore per assicurarsi che le immagini non influiscano negativamente sui tempi di caricamento della pagina. Anche piccole differenze tra le dimensioni reali e desiderate di un'immagine possono aumentare drasticamente le dimensioni del file. La caratteristica più basilare dei servizi di hosting di immagini è la possibilità di ridimensionare le immagini al volo per adattarsi a qualsiasi dispositivo, se necessario.

Oltre ad alte prestazioni di questi servizi, ho visto alcuni altri benefici troppo che ho citato alcuni di loro qui:

immagini Responsive

Al giorno d'oggi molti proprietari di siti web, Vendite e responsabili marketing e ... si preoccupa di molti aspetti del marketing. Scelgono le immagini con attenzione per convertire un utente in acquirente o per raggiungere un determinato obiettivo nel loro sito web. Il ridimensionamento di un'immagine per schermo diverso è forse sufficiente per la progettazione reattiva, ma non è sufficiente per aumentare il tasso di conversione del tuo sito web. A volte è necessario ritagliare l'immagine per ridimensionarla. Con i servizi di hosting di immagini è possibile scegliere esattamente dove ritagliare, quale parte dell'immagine è essenziale ai fini del marketing per rimanere e quale parte può essere ritagliata. puoi avere tutti questi controlli al volo con questi servizi senza usare Photoshop e preparare diverse immagini offline.

Retina supporto

La maggior parte delle immagini può essere visto bene in schermi normali, ma quando li vedi in schermi ad alta densità come Apple Retina o alcuni dispositivi Android non sono bravi a tutti. Il rapporto pixel del dispositivo viene utilizzato per convertire facilmente tra pixel indipendenti dal dispositivo e pixel del dispositivo. Ciò rende possibile visualizzare le immagini alla densità di pixel corretta su una varietà di dispositivi come display Apple Retina e dispositivi Android. In imgix puoi scegliere di caricare immagini con DPR più alto se lo schermo può supportare immagini ad alta densità. puoi farlo con i tag srcset. Read more here

La manipolazione di immagini al volo

Tutto quello che vuoi fare su una foto può essere fatto al volo. Non è necessario utilizzare Photoshop per piccole manipolazioni di immagini. Ciò riduce significativamente la velocità di progettazione.

miglior posizionamento

dimensione dell'immagine SEO è un grande contributore di velocità di caricamento della pagina, che a sua volta è una metrica chiave nella determinazione di ricerca ranking dei risultati per le pagine. Ridurre le dimensioni dell'immagine può aiutare a migliorare il posizionamento, soprattutto se è possibile ottenere il carico della pagina al di sotto della soglia in cui molti utenti iniziano a perdere l'impazienza.

+3

Puoi spiegare in che modo la dimensione dell'immagine è rilevante per Time to First Byte? Le immagini sono richieste dopo che il primo byte (HTML) è stato scaricato e analizzato. –

2

sul posto di lavoro si usa una combinazione di

  • l'ottimizzazione delle immagini gasdotto generica ad esempio grugnito plugin
  • ottenere i clienti team di progettazione di utilizzare le applicazioni per l'ottimizzazione delle immagini
  • usiamo anche Cloudinary su un sacco di nostro siti.

La soluzione di solito varia in base sui costi dei clienti e budget, ma stiamo scoprendo che Cloudinary è in realtà lavorando più conveniente soprattutto per i clienti che non noi o loro team interni non vogliono trascorrere del tempo sull'immagine ottimizzazioni e solo voglia di concentrarsi sulle funzionalità.

Effettuando lo scaricamento di immagini e video nel cloud, il tempo necessario per concentrarsi sul miglioramento del sito, i test AB e altre attività generatrici di entrate. La latenza dei trasferimenti che non sembra essere un grosso problema a causa del cacheing e dei CDN sarebbe un piccolo prezzo da pagare per letteralmente ore/giorni di tempo liberati per concentrarsi sulla costruzione di prodotti e lo sviluppo del business.
Dovresti capire cosa vale il tuo tempo- e quanti più soldi puoi fare se lo hai liberato per fare altre cose. Quali altre cose vorresti provare?

0

Per rendere le immagini caricare velocemente, si vuole la loro dimensione di essere il più piccolo possibile, e volete un buon caching e l'architettura di consegna

Quando si utilizza un servizio per fornire le immagini, sono serviti con un CDN , quindi la parte di memorizzazione nella cache e di consegna è stata risolta.

Esistono diversi servizi CDN potenti come Cloudinary o Imagix. Ogni servizio ha i suoi vantaggi e svantaggi, sollevando diverse domande:

  • Quale servizio CDN ha la migliore copertura per le aree geografiche di destinazione?
  • Esistono specifiche funzionalità CDN necessarie per il tuo sito o la tua app, ma non sono indirizzate da tutti i servizi?
  • Cosa succede quando il servizio di CDN in uso presenta interruzioni o rallentamenti?
  • I picchi di traffico interessano tutti i CDN allo stesso modo?
  • È possibile ottimizzare ulteriormente la consegna utilizzando diversi servizi CDN per aree geografiche, orari o altre variabili di prestazione diverse?

Le risposte a queste domande sono impegnative e in continua evoluzione. Nel tentativo di ottimizzare la consegna in tempi diversi e in diverse regioni, Cloudinary abilita più CDN.

Dopo aver completato un processo di impostazione iniziale, i clienti Cloudinary possono usufruire di una delle due multi-CDN optimization solutions:

  • dinamica multi-CDN commutazione: utilizza dati in tempo reale per selezionare automaticamente le migliori prestazioni o più appropriato i servizi CDN supportati per ogni richiesta utente e ogni posizione.

  • intelligente CDN selezione: ingegneri dedicati di supporto consentono di determinare quali dei servizi CDN supportate è la soluzione migliore per le vostre caratteristiche richieste e target di riferimento

quanto riguarda la questione di ottimizzazione delle immagini, Cloudinary supporta il ridimensionamento immagini per dimensioni del display, regolazione della qualità dell'immagine, selezione automatica del formato del file in base al rilevamento del client, conversione del formato immagine e altro.

Disclaimer: Lavoro come ingegnere informatico presso Cloudinary.

0

C'è sicuramente un vantaggio nel caricare solo le immagini delle dimensioni che ti servono. Il più grande bonus saranno i tempi di caricamento. Sappiamo tutti che agli utenti non piace aspettare che le pagine vengano caricate. Pertanto, se hai più copie o comprimi tutte le immagini in base alle dimensioni dello schermo, offrirai un'esperienza utente migliore. Google basa anche la visualizzazione della ricerca sui tempi di caricamento, in cui viene riprodotta la dimensione dell'immagine. Suggerisco anche di utilizzare un servizio che offre CDN per le immagini in modo da poter sfruttare il caching.

2

[Disclosure, io sono il CTO della società che offre Image Engine]

Menzione della nostra ImageEngine è in ordine qui.ImageEngine si trova nello stesso identico spazio delle altre soluzioni menzionate dall'OP con alcuni vantaggi in più: il suo CDN è stato costruito da zero con l'ottimizzazione mobile in mente. Oltre ai browser desktop, gli Edge Server di ImageEngine possono rilevare con precisione funzionalità quali dimensioni dello schermo, risoluzione e codec di immagini supportati e ottimizzare le immagini di conseguenza. Questo accade grazie a WURFL, la stessa soluzione Device Detection adottata da Facebook e Google, e rappresenta un'ottimizzazione aggiuntiva (fino all'80% di risparmio di larghezza di banda) e riduce le bollette CDN. Chiamiamo questo concetto "Smart Bytes".

Un'altra grande differenza è la facilità di integrazione. ImageEngine non richiede alle organizzazioni di caricare immagini ovunque. Questo è ottimo per le aziende con le immagini legacy da gestire. Mentre ImageEngine consente le direttive (attraverso i parametri URL) per specificare come ottimizzare una determinata immagine, supporta anche la "modalità automatica", ad es. ImageEngine recupererà le immagini dal sito Web di origine (non è necessario ospitare immagini sul server di qualcun altro) e ottimizzerà automaticamente l'immagine nel formato migliore determinato dal componente Rilevamento dispositivo e dai suggerimenti client. Ad esempio, i dispositivi e i browser che supportano lo .webp riceveranno .webp. I clienti attivano semplicemente ImageEngine di fronte al loro sito esistente e la magia avviene senza la necessità di ulteriori ritocchi. I clienti attuali (in particolare l'e-Commerce) adorano questa funzionalità.