Immagini reattive: ridimensiona o ritaglia in modo dinamico?

Question

Questa domanda non riguarda in realtà la codifica, ma la scelta del metodo giusto per un'attività. Non so se sia contro le regole di SO ma qui vai ..

Una volta ho costruito un piccolo CMS per un giornale locale che ha dato loro la funzionalità di aggiungere i loro post insieme a una foto. Per quanto riguarda la foto, erano soliti caricare una singola foto e ho salvato varie versioni di quella foto in base a diversi modelli che potevano scegliere (modelli e non dimensioni dello schermo!)

Ora, mi viene chiesto di rinnovare questo vecchio sistema e mi trovo di fronte al dilemma di reattività/adeguatezza.

Per quanto riguarda le mie ricerche online, la prossima cosa importante è l'elemento <picture>. Ho trovato molte risorse e proprio quando ho deciso di farlo, sono arrivato attraverso il sito web this. Se guardi la fonte di ogni immagine, ti renderai conto che ha una querystring come width=940&height=320&mode=crop&scale=both&meta=panoramic Quando ridimensiono la finestra diventa qualcosa come width=300&height=200&mode=crop&scale=both&meta=square&anchor=topcenter Credo che questo sito stia usando Image Resizer e che a seconda delle dimensioni dello schermo, una singola foto viene elaborato al volo dal server per l'output della nuova immagine.

Quello che non capisco è che di questi metodi è in realtà migliore in quanto l'elemento picture ha ancora bisogno di più immagini caricati sul server, mentre ImageResizer necessita di un solo e coltivazioni-ridimensiona quello adatto per la dimensione dello schermo. D'altro canto, con l'elemento picture il server non viene bombardato da richieste di ridimensionamento delle immagini ma serve a salvare le foto esistenti dall'elaborazione e dal tempo?

Answer 1

La libreria Image Resizer suona come la soluzione migliore: risparmia il fastidio di caricare e gestire molte dimensioni di immagini diverse!

Se sei preoccupato per il sovraccarico del ridimensionamento delle immagini (che è comunque piccolo), puoi sempre provare il loro plug-in DiskCache che ridimensiona un'immagine una volta quindi la salva su disco - le successive richieste per la stessa immagine della stessa dimensione restituiscilo.

Answer 2

Sul sito a cui si fa il collegamento, l'immagine src viene modificata con JavaScript quando la finestra del browser (e la struttura del sito) cambia.

E significa che il browser ha bisogno di aspettare per questo JavaScript da eseguire per sapere quale immagine ha bisogno di caricare.

Con un set di immagini predefinite memorizzate sul server e il markup moderno con <img srcset="…"> o <picture>, il browser ottiene tutto ciò di cui ha bisogno direttamente durante il download dell'HTML, il che significa che può iniziare a scaricare l'immagine migliore anche prima di qualsiasi CSS o JavaScript è scaricato e/o eseguito. Questo è davvero molto meglio per le prestazioni, e quindi per l'utente.

Inoltre, poiché questi standard sono ora supportati dalla maggior parte dei browser, funziona anche se JavaScript è bloccato o si interrompe per qualsiasi motivo.