Il modo più efficace per salvare le immagini e inviarle al browser client

Question

Il modo più efficace per salvare le immagini e inviarle al browser client

#1 da (3 voti)

1

Sto costruendo un'app in cui gli utenti elencano gli articoli in vendita e possono includere fino a cinque foto per ciascun articolo. Sto usando l'archiviazione Azure Blob per archiviare le immagini.

Nella mia app, visualizzerò queste immagini in diversi modi e dimensioni. Li mostrerò come miniature, di circa 250 px in larghezza e a schermo intero, a seconda della pagina in cui vengono visualizzati.

Mi piacerebbe conoscere le migliori pratiche per archiviare queste immagini e inviarle al cliente. Ho un paio di scelte. Potrei memorizzare solo la singola immagine e quindi recuperarla e ridimensionarla, a seconda di come verrà visualizzata, sul server prima di inviarla al client. Oppure, potrei memorizzare diverse copie di ogni immagine, ognuna con le dimensioni appropriate che saranno richieste nelle pagine del client.

Mi sto appoggiando alla prima opzione in cui salvo la singola copia originale, la ridimensiono sul server e poi la invio al client. Non ho esperienza con questo genere di cose quindi non sono certo l'approccio migliore, o se ce ne sono altri.

azure image-manipulation image-processing blob

posta Randy Minder 10.04.2015 - 01:47

fonte

1 risposta

Leggi altre domande sui tag azure image-manipulation image-processing blob

API REST, percorsi nidificati senza fornire identificatori a ogni livello annidato Va bene usare nomi come "CLASS_CONSTANT" per le variabili costanti di classe secondo PEP? [pitone]

score 3 · Answer 1

Ci sono alcune ottimizzazioni che possono essere fatte:

Dopo aver recuperato le immagini dai BLOB, salvali nella memoria, a seconda della frequenza dei colpi. Se la quantità di immagini è molto importante, prendere in considerazione l'utilizzo di redis come provider di cache L2 (ora disponibile su Azure). Se il server web deve supportare una quantità massiccia di accessi e le immagini possono essere pubblicamente disponibili, ti consiglio di delegare i trasferimenti di immagini all'azzerato CDN, per ottenere una (molto) bassa latenza.
Imposta l'intestazione http Cache-Control su un valore appropriato. Ciò limiterà notevolmente la quantità di andata e ritorno per cliente
Se le immagini devono essere visualizzate in più formati, prendi in considerazione l'invio di solo due versioni: Miniature e HD. Quindi puoi facilmente integrare l'immagine a qualsiasi dimensione usando la dimensione di sfondo CSS3: contenere; proprietà, che dà grandi risultati.

Per limitare i round-trips di client / server, ti consiglio di inviare le tue immagini raggruppate. Usando i CSS3, puoi inserire più immagini in un singolo file css. Ecco un metodo che ho scritto per unire le immagini da una directory, come una singola stringa CSS:

private static string images2css(string directory = "~/Images")
{
    StringBuilder css = new StringBuilder();
    foreach (string f in Directory.GetFiles(System.Web.Hosting.HostingEnvironment.MapPath(directory)).Where(x => x.EndsWith(".png") || x.EndsWith(".jpg") || x.EndsWith(".jpeg")))
    {
        var img = Image.FromFile(f);
        byte[] raw = File.ReadAllBytes(f);
        string name = Path.GetFileNameWithoutExtension(f);
        string ext = Path.GetExtension(f).Substring(1);

        css.AppendFormat(".img-{0}{{", name.Replace('_', '-'));
        css.AppendLine("background-color: transparent; background-repeat: no-repeat; background-position: left top;");
        css.AppendLine(string.Format("background-image: url(data:image/{1};base64,{0});", Convert.ToBase64String(raw), ext));
        css.AppendLine(string.Format("padding-left: {0}px !important; min-height: {1}px;", img.Width + 5, img.Height));
        //   css.AppendLine("background-size: contain;");
        css.AppendLine("}");
        img.Dispose();
    }

    return css.ToString();
}

Non dovrebbe essere troppo difficile adattarlo per recuperare le immagini da un BLOB di Azure. Puoi anche salvare la stringa css su un altro blob con compressione Gzip e renderla disponibile al cdn.

Nel complesso, ci sono 3 parametri principali da considerare per scegliere la strategia migliore:

Ci sono molte immagini? (no: cache L1, sì: cache L2)
Il server frontale deve gestire una quantità enorme di accessi? (sì: il front server non deve inviare immagini. La migliore opzione è CDN)
Una pagina visualizza lo stesso insieme di immagini (= > raggruppa le immagini in un file) o la combinazione è sempre diversa? (= > cache L2 o CDN)