Ho sentito molto sull'importanza di utilizzare gli sprite per ottenere il conto alla rovescia della richiesta. Ma il mio pensiero è che invece di usare gli sprite, puoi usare gli URI per realizzare la stessa cosa, e molto più facile (non è necessaria la creazione di sprite).Sprite CSS vs URI di dati
È meglio utilizzare sprite o uris?
I dati con codifica Base64 sono circa 1/3 più grandi dei byte grezzi, quindi nelle pagine in cui il download di tutti i dati dell'immagine richiede più di tre volte il tempo necessario per effettuare una richiesta, gli sprite CSS sono superiori rispetto alle prestazioni.
Inoltre, gli URI di dati in linea rendono il file stesso carico tanto a lungo quanto i dati effettivi più le immagini con codifica Base64. Se gli URI dei dati si trovano sulla tua pagina HTML effettiva, significa che il rendering si arresta e attende il caricamento dell'immagine. Se gli URI dei dati sono nel tuo foglio di stile, ciò significa che tutte le regole dopo l'URI dei dati devono attendere prima che possano essere elaborate. D'altra parte, con un file sprite, le immagini possono essere caricate contemporaneamente alle altre risorse. Questo può valere il costo di una richiesta extra, specialmente quando si calcola la penalità di base64.
+1 Anche la compatibilità tra browser è un problema. –
Questi sono ottimi punti. Non considero la richiesta 1 che uno sprite richieda l'inconveniente. Lo svantaggio principale è doverli fare e rifarli se si apportano modifiche. – Mark
hey chuck, hai eseguito test di prestazioni reali sulla differenza tra l'utilizzo di uris dati vs sprites/img nei file css? O conosci qualche risorsa su quell'argomento? – andrej
Suppongo che il supporto per IE5, 6 e 7 sia un buon motivo per utilizzare gli sprite sugli URI, se tali obiettivi sono importanti per l'utente.
Pertanto, se il tuo obiettivo è ridurre il numero di richieste alle tue pagine, dovresti utilizzare gli URI di dati nel tuo file CSS principale e quindi fornire fogli alternativi per <= IE7 che usa gli sprite. –
Puoi sempre usare MHTML come alternativa per quei browser. – Ryan
Per quelli come me che non sapevano quale URI di dati era prima di questo post, http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/ –
@meder, * ooooooh * +1! =) –