Buenas, tengo un blog de wordpress pero son muchas peticiones de imagenes en el theme y hace que la web tarde en cargar. Quiero que tarde menos y formar un solo "png", para ello he encontrado esto: http://es.debugmodeon.com/articulo/css-sprites-que-son-y-como-generarlos-con-un-sencillo-script
Pero no sé como implantarlo en mi wordpress. No he usado Pil nunca, ni sé como funciona :S ¿Qué hago con ese código?
Personalmente no me gusta.
Es más, siempre se dice lo contrario, mejor tener el diseño en varias imágenes, ya que no tienes que esperar a que cargue una sola imagen que contiene todo.
Aun asi, yo creo que tu problema no es ese (ni idea de cual es tu blog), porque hoy en día cualquier con una conexión de 1Mbps va rápido..., asi que como no uses iconos de 100kb cada uno..., es ahí donde deberias de meter mano.
Suda del script, buen hombre!
Esto es carne de alguien que tuvo tiempo y pocas preocupaciones...
Hazlo a mano!
Te abres el PS o cualquier otro editor, y te montas el Sprite, que no es mas que poner una imagen al lado de otra, y la cargas una sola vez.
Luego en el CSS, solo tienes que indicar que la imagen que se ve, esta en tal posición de TOP y LEFT.
Para que me entiendas, haces una graella de 4 imagenes por ejemplo.
y en cada DIV, pues le pones el background con el tipo:
background: url("...") LEFT TOP (era ese le orden?)
Donde LEFT y TOP, son X pixeles que tu sabrás porque lo has montado.
|········|········|
|········|········|
Cada cuadrado hace por ejemplo, 32px*32px, pues ya sabes como jugar con TOP y LEFT, mediante 0,0; 0,32; 32,0; 32,32.
Entiendes?
Saludos!
Hmmmm. Me hago una ligera idea, pero no es demasiado lioso? Ir uno a uno, y la precisión tiene que ser milimétrica, no? Bueno en este caso pixélica xD.
Otra cosa, luego tendrá que ir quitando cosas del CSS. Para no repetir "peticiones" (no sé como se dice xD), y que el CSS no sea tan pesado. ¿Cómo sé que ir quitando? Es que no sé nada de php, ni html, ni nada 
PD: El theme lo componen 37 pngs con transparencias. (Seleccionando todos me da un total de 220kb)
el css no es "pesado" la velocidad de procesamiento del lado del cliente es enorme, el cuello de botella es la transferencia de ficheros. pasa un link a tu blog anda
No es mejor para el cliente que entra en tu web ir viendo como se crea la página poco a poco (imágenes partidas) que esperar con la pantalla en blanco a que cargue el conjunto de todas ellas (una sola imagen) ?
Al menos, así se ha hecho de toda la vida xD
Un consejo, aunque quizás ya lo hayas aplicado. Si tienes que hacer una línea negra por ejemplo y la tienes hecha en una imagen con el ancho/alto que debería ocupar, no lo hagas así. Guarda en una imagen un pixel del color de la línea y juega con su altura y anchura desde el código. Crearás la línea a tu antojo y además solo tendrás que cargar una imagen de 1 px y no de NxN (que obviamente pesará más).
si os parais a trastear un poco con el asunto (css sprites) podeis llegar a dejar todo el interfaz de una web en un archivo de 5k's perfectamente. El cliente tarda "nada" en bajar 5 k's y el resto de llamadas a esa imagen, las hace a su caché.
De otro modo, puedes tener un montón de imagenes de 2-3 k's que acaban "pesando" más que el sprite, y con el consumo que se crea al hacer una llamada a cada archivo.
Para un blog, yo no lo implementaría (más que para probar... que mejor sitio) pero para una web "grande" donde va a haber un numero de visitas elevado, este método es casi obligatorio, hay que ahorrar segundos, transferencia (y por lo tanto dinero) como sea!
Ejemplo: youtube.com
http://s.ytimg.com/yt/img/master-vfl102488.png
13KB, 239 ms en cargar.
(Edit: por contra, el css aumenta de tamaño, pero bueno, les pesa 15 K
Por cierto, por ceñirme un poco al tema... yo los hago a mano, creo que se optimiza mejor el tamaño y por tanto el peso, que con cualquier método automatizado (y me encantaría que alguna utilidad me convenciese de lo contrario)