Il ridimensionamento CSS delle immagini è ancora una cattiva idea?

Si è sempre visto che l'uso di attributi larghezza / altezza sulle immagini che non sono ciò che l'immagine originale è reale è una cattiva idea. Potrebbe significare immagini pixellate o dimensioni di download maggiori rispetto a nessary.

Ma è ancora un problema? Non suggerirei il ridimensionamento delle foto, ma il ridimensionamento non dovrebbe essere un problema a condizione che non sia troppo diverso dall'originale e che mantenga le dimensioni.

Ad esempio, ho una foto di 600x400 e ho una larghezza di 400px su di essa. La maggior parte dei browser moderni ridimensiona l'immagine e sembra che il rendering sia ancora decente.

Quindi, cosa vedono tutti su questo?

Non preoccuparti del ridimensionamento (la maggior parte dei browser farà apparire bene le immagini ridimensionate, nella mia esperienza), preoccupati della dimensione del payload che hai inviato all'utente finale.

Certo, potresti sostenere che stai sprecando solo una piccola quantità di larghezza di banda su entrambe le estremità per quei pixel extra che stai inviando senza intenzione di utilizzare, ma c'è anche un costo in termini di tempo.

Per ogni immagine che invii ad una dimensione superiore a quella necessaria, aggiungi un po 'di ritardo al caricamento della pagina per il tuo utente. Per i siti Web con solo un paio di immagini questo non sarà un problema, ma per un sito con un gran numero di risorse di supporto inizierai ad aggiungere un notevole ritardo e il ritardo ti costerà denaro .

Inoltre, per quanto riguarda il piccolo costo della larghezza di banda, poiché il traffico del tuo sito aumenta, così sarà il costo della piccola larghezza di banda.

Quindi, risparmia i soldi della tua azienda e impiega i 30 secondi necessari per ridimensionare l'immagine da solo! :)

Come sempre, fai il tuo benchmarking, ma a meno che l'app non sia davvero popolare / mission-critical, non sarei troppo preoccupato di ridimensionare da 600 a 400 se ti trovi in ​​una situazione in cui devi cambiare frequentemente la larghezza. Se si tratta di una corsa una tantum, certo, convert -geometry 400x photo1.jpg photo2.jpgma se è un'app che stai ripetendo velocemente, probabilmente ci sono cose più importanti di cui preoccuparti, anche nel regno delle prestazioni. ad es. latenza; caricamento preventivo delle immagini, ad esempio.

Le dimensioni dell'immagine possono essere importanti sui dispositivi mobili, dove le immagini di grandi dimensioni hanno l'effetto triplo di caricarsi lentamente (banda larga mobile), impiegando più tempo per il rendering (hardware di livello inferiore) e - una volta eseguito il rendering - non sono completamente visibili ad alta risoluzione Comunque.

Potresti anche voler esaminare immagini reattive. C'è molto lavoro da fare, ad esempio il ridimensionamento automatico, e quindi la memorizzazione nella cache, delle immagini sul server è un buon approccio se ciò si presenta molto.

Il problema è il payload, il browser renderà praticamente a posto in qualsiasi dimensione (specialmente dimensioni più piccole di cui stai parlando)

Per un sito ad alto volume, anche i singoli byte sono importanti. Non vuoi inviare dati indesiderati.

Parlando di cattiva idea, non è davvero una cattiva idea regolare la larghezza / altezza di alcuni pixel o può essere di 10 o 20 pixel. Ma è una pessima idea se stai riducendo una grande immagine a una miniatura :)