Dimensione dell'immagine comunicante, best practice

11

Se stai sviluppando un documento HTML usando rigorosamente le migliori pratiche attuali per mantenere lo stile fuori dal markup, come comunichi meglio il dimensionamento delle immagini?

Le migliori pratiche passate richiedono l'altezza e la larghezza dell'immagine con l'immagine in quanto renderà più veloce del browser in attesa che l'immagine venga scaricata per ottenere le sue dimensioni. Ma farlo sembra contravvenire a isolare lo stile dal documento.

Aggiungi un attributo id a ciascuna immagine e inserisci l'altezza / larghezza nel CSS? Ciò nega il bonus di rendering dell'altezza e della larghezza dell'immagine in linea?

css html images

— Tommaso
fonte

12

Avere la larghezza e l'altezza nell'elemento IMG non è deprecato ed è sicuramente il modo migliore per dire al browser la larghezza e l'altezza di un'immagine. Fare di tutto per farlo in un altro modo è ridondante e non necessario (e possibilmente sciocco). Non fare alcun lavoro inutile per te o il browser. Attenersi alle basi che funzionano.

— John Conde
fonte

1

... e non dimenticare anche un ALTtag, anche se i suoi controlli vuoti o di conformità si lamenteranno.

— Talvi Watia,

@Tchalvak Scusa ma ti sbagli. Puoi ignorare la larghezza e l'altezza dinamicamente attraverso la programmazione lato server e / o JavaScript. E con la tua logica non puoi nemmeno ignorare gli stili in linea.

— John Conde

Spiacenti, sembra che mi sia sbagliato sulla mancanza di una sovrascrittura in CSS comunque, !importantnel CSS ti permette di sovrascrivere gli attributi di larghezza e altezza, quindi inizialmente usare larghezza / altezza funziona bene. Ora sono bloccato nella posizione ribassista però. Se avessi voglia di modificare la risposta, la cambierei. scrolla le spalle Non che importi troppo.

— Kzqai,

8

La risposta di John Conde è precisa. Le immagini hanno una larghezza e un'altezza - fa parte del loro contenuto , non del loro stile . Quindi non è necessario fare una "separazione" qui.

Tuttavia, un'eccezione: CSS per le dimensioni dell'immagine è utile se si hanno molte immagini tutte della stessa dimensione (ad es. Miniature). Qui è molto meglio usare una classe CSS per ridurre l'HTML e accelerare lo sviluppo.

Per la progettazione di un sito Web che include pulsanti e icone, la soluzione migliore sono gli sprite CSS.

— DisgruntledGoat
fonte

+1, gli sprite CSS fanno una differenza ridicola nella velocità di un sito.

— Kzqai,