Ottimizzazione di un sito web [parte I]

A tutti gli utenti novizi ed inesperti invito a non spaventarsi se risulta difficile capire il tema o le fonti in inglese.
Questo forum è pieno di gente preparata e paziente pronta sicuramente a darvi una mano! ;)

Chi lo sa se questo potrà diventare un appuntamento ricorrente oppure tutto rimarrà fermo a questa prima puntata.
Intanto oggi voglio affrontare con voi la tecnica di inclusione di immagini in un documento HTML o in un documento CSS attraverso l'uso del "data URI".

Trovando molto semplice ed interessante l'articolo "Data URIs" di CSS-Tricks, ho fatto alcune ricerche ed approfondimenti.
Come al solito alle specifiche standard ed ai comportamenti teorici si contrappone la difficile realtà di come i singoli browser implementino le funzionalità.

A tal proposito ho trovato un'altro interessante articolo "CSS Images and Data URIs" di ravelrumba dove viene dimostrato che invece i tempi di download e rendering dei browser possano penalizzare questa pratica in teoria conveniente.

Voi l'avete mai utilizzata? Avete riscontrato effetti positivi o negativi?

Ho trovato alcuni strumenti on-line per estrarre il data URI dalle immagini:

• Image to data URI convertor
• The data: URI kitchen

Conoscete qualche software in grado di svolgere lo stesso compito?

Via alle danze! Emh... Alla discussione libera... :lol:

Ho diverse considerazioni nel merito:

1) IE7 non supporta le url data:, e fare cose completamente incompatibili con IE7 non sarà una gallata™ ancora per un paio di anni temo

2) javascript permette di fare la stessa cosa con una url di questo genere:

Citazione:

---

javascript:'<CODICE HTML>'

---

3) Le pagine php vengono servite con un header che dice al browser di NON fare caching di quella pagina. Se la pagina in questione contiene url di tipo data: il contenuto di quelle url non viene messo in cache e quindi riscaricato ogni volta. Alla faccia dell'ottimizzazione.

http://dreadnaut.altervista.org/_alt...-sign-tiny.png
edit:

Riassumendo - non serve a una mazza, a parte:

-) loschissimi trucchi javascript (ad esempio generare gif on the fly e far scaricare dei file generati da javascript - prova con la url "data:application/octet-stream,omg-wtf-ffs-bbq" ad esempio)

-) salvare una pagina html completa di tutti i file che le competono in un unico file di nome pagina.html senza doversi inventare astrusi schemi di salvataggio tipo il .chm od .war o le cartelle pagina_files

Internet Explorer non supporta quasi nulla, ragion per cui si devono sempre adottare modifiche per poter godere di qualcosa di decente anche su questo orribile browser.
Circa la soluzione per Internet Eplorer propongo la seguente lettura: Base64 Encoded Images for Internet Explorer.

Citazione:

---

Originalmente inviato da zingus

Riassumendo - non serve a una mazza

---

Mi bastano queste sei parole

A volte può tornare utile ad esempio se crei un'immagine con le gd e vuoi visualizzarla, senza salvarla, con il tag <img>

Per il resto anche secondo me è inutile

Allora se posso dire la mia io ho scoperto questo metodo che funziona benissimo.
E' molto più veloce, non occupa spazio ma appesantisce di poco le pagine.
Io lo uso sempre quando sono in locale e faccio dei siti, il mio convertitore è questo.
Per farvi un esempio, quando ho installato AppServ mi sono posto il problema di creare una directory listing semplice con delle immagini. Ho scoperto questo metodo, in un unico file ho css, codice php, html e immagini... Naturalmente questo metodo può servire anche a chi non ha hosting per le immagini e può linkarle (ForumFree, ecc...)

Perché quest'abitudine a scartare tutto quello che non si sa usare?
Pensate ad una connessione mobile da un dispositivo poco potente quale un telefono cellulare.
Ogni richiesta in meno al server, velocizza e alleggerisce la navigazione.
Alcuni KB in più per qualche secondo in meno, possono migliorare la percezione di fluidità e velocità di un sito.

Infatti io sono a favore per usare questo metodo! °>°
Edit: nel mio sito, in basso a sinistra, l'immagine è in base64 =D

Stavo pensando da qualche giorno: se si inserissero gli elementi grafici in formato base64 nei fogli di stile?
Sul piano teorico se un utente non vuole vedere la formattazione non sarà interessato nemmeno al resto della grafica, no?
Quindi scegliendo di non caricare i fogli di stile si ritrova un sito solo testo (che ovviamente dovrebbe essere di per sé leggibile e comprensibile).

Secondo voi possono sorgere problemi (di accessibilità) e inconvenienti?

Forse problemi di compatibilità più che di accessibilità :)

Come già detto non è proprio una gallata™ (© zingus, ogni riferimento è puramente forumale...)

Io lo trovo perfetto per integrare immagini in script per greasemonkey, così da evitare collegamenti esterni ;)