Traduzco la continuación del artículo de Nicholas Zakas en el que presenta dos herramientas para facilitar la adopción de esta tecnología:

La semana pasada posteé sobre URIs de datos y por qué son una característica interesante de los navegadores web. En conclusión, mencioné que el mejor uso de URIs de datos es incrustarlos en archivos CSS para que tuviesen la mejor oportunidad de ser cacheados por el navegador. Recibí un montón de respuestas en este blog y por otros medios que demostraban que la gente estaba muy entusiasmado con las URIs de datos y estaban listos para dar el salto y usarlos en CSS. This left me with me believing that an interesting time is upon us. Esto me hizo pensar que estamos viviendo en un momento interesante.

El problema

Aunque Internet Explorer anterior a la versión 8 no es compatible con los URIs de datos, la mayoría de la gente parece dispuesta a servir contenido alternativo para los navegadores menos capaces y servir el contenido más óptimo para aquellos que pueden manejarlo. El problema es que millones de sitios web están utilizando actualmente archivos CSS que referencian archivos de imagen a la manera tradicional, y todos ellos que tendrían que ser convertidos para usar URIs de datos. Nadie quiere mantener varias versiones de los archivos CSS, por lo que sería mejor si este proceso de conversión pudiera ser automático.

Presentación de CSSEmbed

Pasé los últimos dos días programando y estoy orgulloso de introducir CSSEmbed, una herramienta para integrar automáticamente imágenes dentro de archivos CSS como URIs de datos. Esta es una sencilla herramienta muy pequeña que lee un fichero CSS, identifica las imágenes referenciadas en su interior, las convierte a URIs de datos, y genera una hoja de estilos resultante. La hoja de estilos recién creada es una copia exacta del original, con comentarios y sangrías intactos, la única diferencia es que todas las referencias a archivos de imagen han sido sustituidos por URIs de datos. Because it preserves the original formatting of the style sheet, it can be used both on nicely-formatted source code and crunched source code without worry. Debido a que preserva el formato original de la hoja de estilo, puede ser utilizado tanto con código fuente bien formateado como con código compactado sin problemas.

CSSEmbed requiere Java 1.5+ para funcionar. Para empezar, descarga el archivo JAR. Todas las dependencias están incluidos en el archivo JAR, así que no hay necesidad de ocuparse de la creación de classpaths o de descargar otras dependencias. El uso básico es el siguiente:

java -jar cssembed-xyzjar -o <output filename> <input filename>

Por ejemplo:

java -jar cssembed-xyzjar -o styles_new.css styles.css

When the -o flag is omitted, the output ends up on stdout , thus you can direct the output to a file directly: Cuando se omite el parámetro -o el código se genera sobre la salida estándar, por lo que se puede dirigir a un archivo directamente:

java -jar cssembed-xyzjar styles.css > styles_new.css

Las instrucciones de uso completas están disponibles mediante el parámetro -h

Usage: java -jar cssembed-x.y.z.jar [options] [input file]

Global Options
   -h, --help           Muestra esta información
   --charset            Codificación de carácteres del archivo de entrada
   -v, --verbose        Muestra mensajes de informacion y avisos
   -root                Antepone a todas las URLs relativas
   -o                   Genera la salida en . Por defecto a stdout.

CSSEmbed es inteligente en la forma en que identifica las imágenes. Si la ubicación de la imagen comienza con "http://", entonces la herramienta descarga automáticamente el archivo y lo convierte a una URI. Si la ubicación de la imagen es una ruta relativa (por ejemplo, contiene "../"), CSSEmbed busca el archivo local en relación a la ubicación del archivo de hoja de estilos. Si los archivos indican una ruta absoluta, sin especificar "http://", como "/images/image.png", tendrás que proporcionar una raíz a través de la opción --root. Cuando se especifica, la raíz se antepone a todas las ubicaciones de imágenes que no comiencen por "http://".

Para obtener más información acerca de CSSEmbed, echa un vistazo a la documentación. También puede descargar el código fuente (Licencia MIT) del proyecto GitHub. CSSEmbed se encuentra en etapas muy tempranas, por lo que se agradecerán opiniones. Si encuentras errores, por favor usa el seguimiento de incidencias para informar sobre ellos.

...y presentamos DataURI

When I was researching data URIs, I didn't come across any simple data URIs generators. Cuando estaba investigando URIs de datos, no encontré ningún generador simple de URIs de datos. Está la cocina de URIs de datos de Hixie, pero sólo está disponible online. Lo que realmente buscaba era algo para ser ejecutado en la línea de comandos para poder crear CSSEmbed. Por eso he creado DataURI, que es una sencilla herramienta que lee un archivo y muestra su representación como una URI de datos. DataURI es el motor subyacente utilizado por CSSEmbed para crear sus URIs de datos.

DataURI is also written in Java and requires Java 1.5+ to run. DataURI también está escrito en Java y requiere Java 1.5 o superior para funcionar. Al igual que con CSSEmbed, hay un archivo JAR que contiene todas las dependencias. Las mismas opciones generales de línea de comandos están disponibles, por lo que el uso básico es muy similar a CSSEmbed:

java -jar datauri-xyzjar -o <output filename> <input filename>

Por ejemplo:

java -jar datauri-xyzjar -o output.txt image.png

Los archivos a codificar no tienen por qué ser locales, se pueden incluir URLs en la línea de comandos y se descargan y codifican:

ava -jar datauri-xyzjar -o output.txt http://www.your.domain.com/image.png

Cuando se omite la opción -o, la salida termina en stdout con lo que se puede redirigir a un archivo directamente:

java -jar datauri-xyzjar styles.css > styles_new.css

Las instrucciones de uso completas están disponibles mediante -h:

Usage: java -jar datauri-x.y.z.jar [options] [input file]

Global Options
   -h, --help            Displays this information.
   --charset    Character set of the input file.
   -v, --verbose         Display informational messages and warnings.
   -m, --mime      Mime type to encode into the data URI.
   -o              Place the output into . Defaults to stdout. 

DataURI es capaz de crear URIs de datos de URIs de las imágenes y de algunos archivos de texto (para la lista completa, consulta la documentación). El código fuente está disponible (Licencia MIT) del proyecto GitHub y puedes informar de errores igualmente.

Agradecimientos

I was inspired to create these tools after reading, Me inspiré para crear estas herramientas después de leer Not Just a Pretty Face: Performance and the New Yahoo! de Ryan Grove, Stoyan Stefanov, y Venkateswaran Udayasankar del equipo de búsquedas de Yahoo!. La sección sobre las URIs de datos me llevó a investigar más y, finalmente, a la creación de CSSEmbed y de DataURI.

Estoy lejos de ser tan bueno en Java como lo soy con JavaScript, así que tener un gran ejemplo funcionando ha hecho este desarrollo más fácil. Debo agradecer a Julien Lecomte porque he utilizado el código fuente del YUI Compressor como una guía sobre cómo organizar mi código. El código de Julien es tan limpio que era fácil configurar mis proyectos de la misma manera. También utilicé su archivo Ant como base para el mío.

Seguimiento

Las URIs de datos son definitivamente excitantes como medio para mejorar el rendimiento de sitios web. Cada gran impulso hacia adelante en las técnica de desarrollo necesita de un buen conjunto de herramientas para aumentar su adopción. Espero sinceramente que CSSEmbed y DataURI puede ayudar a la gente a empezar con la creación y el uso de URIs de datos.