Best practice: gestione delle immagini sul sito web

Sono lead developer per un'azienda di viaggio con sede nel Regno Unito. Uno dei progetti che ho implementato era una versione web della nostra libreria di immagini che può essere richiesta automaticamente per fornire fotografie per il nostro sito. Contiene circa 150k immagini, di cui circa 60-70k sono disponibili per il sito Web (il più votato).

Abbiamo iniziato definendo circa 5 dimensioni, creando al volo queste versioni di dimensioni e archiviandole in Amazon S3. Il prezzo era minimo ma Amazon è stato costruito per fallire con grazia, quindi spesso vedevamo le immagini mancanti. Più sviluppavamo il nostro sito, più odiavamo solo con cinque dimensioni dell'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 immediatamente visibile in quella dimensione. Memorizziamo in cache l'immagine ridimensionata (utilizzando un hash MD5 dell'URI della richiesta come nome file).

Per ottenere l'immagine # 12345 (le nostre immagini vengono recuperate tramite un db, ma puoi 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 perfettamente: non vi è alcun ritardo percepibile per il visitatore del sito web, nemmeno sulle pagine con 20-30 immagini.

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

Spero che questo aiuti, Adam

Supponendo che la miniatura sia semplicemente una versione ridimensionata dell'immagine principale, allora penso che dovrebbe essere fatta al momento del caricamento, ma forse programmata come lavoro in background in modo da non influire su altri processi. Se ridimensioni al volo, assicurati di memorizzare l'immagine nella cache.

Il problema è che la migliore miniatura per alcune immagini è non un semplice ridimensionamento del master; potrebbe essere necessario zoomare e ritagliare in un modo che è guidato dall'uomo. Potresti voler eseguire l'operazione di ridimensionamento automatico, ma disponi di un meccanismo che consente l'override in questi casi particolari.

ImageProcessor

Imageprocessor è una libreria leggera ed estensibile, scritta in C # che 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 memorizzazione nella cache come standard. Qualsiasi immagine elaborata viene memorizzata in modo asincrono sia nel browser che sul server per una durata a tua scelta. La cache del server memorizza in modo intelligente milioni di immagini e si aggiorna automaticamente se la modifica dell'immagine originale o la scadenza della cache.

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 di immagine dovrebbe essere:

ImageId_Width_Height_Quality

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

ImageId_Original

(3) Al caricamento di file ad esempio: 1245_Original - > tutti i file con 1245_ * devono essere cancellati

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

1245_250_400_80.jpg

e servirlo anche la prima volta.

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