Best practice: gestione delle immagini sul sito Web

Sto effettuando il porting di un vecchio sito di eCommerce su MVC 3 e vorrei sfruttare i miglioramenti del design. Al momento il sito ha immagini dei prodotti archiviate in 3 dimensioni: miniatura, media (per la visualizzazione in un elenco) ed espansa per un aspetto ingrandito. In questo momento stiamo caricando 3 immagini separate di dimensioni esatte, fornendo 3 nomi diversi che corrispondono a ciò che il sito si aspetta, ecc., È una seccatura.

Vorrei caricare solo 1 file, quello grande, quindi consentire al sito di ridurlo alle dimensioni necessarie e mi piacerebbe avere la flessibilità di modificare le dimensioni dell'anteprima e dell'elenco in base alle preferenze dell'utente, al fattore di forma (ad es. Mobile, iPad , desktop), ecc. quindi potrebbero essere necessarie molte copie della stessa immagine. La mia domanda è: l'immagine deve essere ridotta e salvata più volte al momento del caricamento? In caso affermativo, qual è una buona convenzione di archiviazione / denominazione?

L'altra idea è quella di memorizzare solo la singola immagine ma ridimensionarla a livello di codice prima di servirla al client. Qualcuno ha fatto questo e quali sono i compromessi oltre ad alcuni altri cicli macchina? Come si trasmette un'immagine temporanea in memoria al client (non esiste un URL)?

Sono lo sviluppatore principale di una società di viaggi con sede nel Regno Unito. Uno dei progetti che ho realizzato era una versione web della nostra libreria di immagini che può essere interrogata automaticamente per fornire fotografie per il nostro sito. Contiene circa 150.000 immagini, di cui circa 60-70.000 sono disponibili sul sito Web (il più votato).

Abbiamo iniziato definendo circa 5 taglie, creando al volo queste versioni e memorizzandole in Amazon S3. Il prezzo era minimo ma Amazon è stato progettato per fallire con grazia, quindi spesso vedremmo immagini mancanti. Più abbiamo sviluppato il nostro sito, più odiavamo avere solo cinque dimensioni di immagine disponibili.

Siamo passati a un modello di ridimensionamento dinamico, in quanto possiamo aggiungere i parametri di larghezza e / o altezza all'URI di qualsiasi immagine per renderlo al volo in quella dimensione. Inseriamo nella cache l'immagine ridimensionata (usando un hash MD5 dell'URI di richiesta come nome file).

Per ottenere l'immagine # 12345 (le nostre immagini vengono recuperate tramite un db, ma è possibile sostituirlo con un percorso file) con larghezza 200 e qualità jpg 80%, il formato URI sarebbe:

http://images.domain.com/?imageid=12345&w=200&q=80

Questa soluzione è stata facile da implementare e funziona senza problemi - non vi è alcun ritardo evidente per il visitatore del sito Web, anche su pagine con 20-30 immagini.

Lo stiamo facendo tutto con .net, anche se ho anche scritto uno script di ridimensionamento delle immagini PHP che fa la stessa cosa.

Spero che ti aiuti, Adam

ImageProcessor

Imageprocessor è una libreria leggera ed estensibile scritta in C # che ti consente di manipolare le immagini al volo usando .NET

Ridimensionamento al volo:

<!--Automatic height based on width-->
http://your-image?width=600
<!--Automatic width based on height-->
http://your-image?height=250
<!--Both dimensions specified-->
http://your-image?width=600&height=250
<!--Both dimensions specified with the image anchored to the top-->
http://your-image?width=600&height=250&anchor=top
<!--Height ratio passed for automatic scaling-->
http://your-image?width=600&heightratio=0.416
<!--Width ratio passed for automatic scaling-->
http://your-image?widthratio=2.4&height=250
<!--Background color added to padded image-->
http://your-image?width=600&height=250&bgcolor=fff  

ImageProcessor.Web viene fornito con la memorizzazione nella cache di serie. Qualsiasi immagine elaborata viene memorizzata nella cache in modo asincrono sia nel browser che sul server per una lunghezza a scelta. La cache del server memorizza in modo intelligente milioni di immagini e si aggiorna automaticamente se l'immagine originale cambia o la cache scade.

Supponendo che la miniatura sia semplicemente una versione ridimensionata dell'immagine principale, quindi penso che dovrebbe essere fatto al momento del caricamento, ma forse pianificato come processo in background per non influire su altri processi. Se ridimensioni al volo, assicurati di memorizzare l'immagine nella cache.

Il problema in tutto ciò è che la migliore miniatura per alcune immagini non è un semplice ridimensionamento del master; potrebbe essere necessario ingrandire e ritagliare in modo guidato dall'uomo. Potresti voler ridimensionare automaticamente la cosa, ma avere un meccanismo che consente una sostituzione in questi casi particolari.

Una leggera variazione su ciò che Adam ha menzionato:

(1) crea una pagina di errore personalizzata (regola per le immagini)

(2) La struttura dei nomi dei file delle immagini dovrebbe essere:

ImageId_Width_Height_Quality

L'unica eccezione è l'immagine originale e dovrebbe essere denominata:

ImageId_Original

(3) Al caricamento del file, ad es. 1245_Original -> tutti i file con 1245_ * devono essere eliminati

(4) La pagina di errore personalizzata (supponendo che 1245_Original Exists) dovrebbe creare dinamicamente il file di immagine richiesto, ad esempio:

1245_250_400_80.jpg

e servirlo anche per la prima volta.

In effetti, il caricamento di una nuova immagine elimina la cache.