Herramienta para convertir imágenes en código CSS fácilmente

Julio2201 · 13 May 2011

Hola Betas. :hello:

Pues encontre una herramienta muy interesante y quisiera compartirla.
No se si ya esta en el foro pero se las dejo.

Con la herramienta podes convertir imagenes en CSS(tamaño maximo 200x200 pixeles)

Img to Css

La verdad me parecio muy interesande(aunque ya se que es inutil)

Saludos

Julcar · 13 May 2011

No es precisamente css, es html con tablas

lo que es no tener tiempo, wow convertí mi avatar en html xDD de verdad funciona

cuisi · 13 May 2011

Se ve interesante... gracias

raveny · 13 May 2011

Buen aporte, gracias!

djjulian · 13 May 2011

verdaderamente funca, de algo servira seguro que si!

Julcar · 13 May 2011

la unica utilidad que le veo, es la de convertir imagenes a html y asi ahorrar espacio en disco y/o transferencia, pero habra que ver

lucianoche · 13 May 2011

No ahorrás nada, una imagen debería ocupar mucho menos espacio que éste método por dos razones: primero porque la mayoría de los formatos tienen compresión (con o sin pérdida), segundo porque al ser un formato de imagen, 1 pixel jamás ocupará más que una celda coloreada en html (el sitio forma una celda de la siguiente manera: <td bgcolor="#ffffff" />).

Por eso no les recomiendo que reemplacen las imágenes de ningún sitio por este método, lo único que ahorrarán será una petición al servidor, pero aumentarán considerablemente la transferencia, de todas formas algún uso se le puede encontrar, muchas gracias por el link!

Saludos

Julcar · 13 May 2011

lucianoche dijo:
No ahorrás nada, una imagen debería ocupar mucho menos espacio que éste método por dos razones: primero porque la mayoría de los formatos tienen compresión (con o sin pérdida), segundo porque al ser un formato de imagen, 1 pixel jamás ocupará más que una celda coloreada en html (el sitio forma una celda de la siguiente manera: <td bgcolor="#ffffff" />).

Por eso no les recomiendo que reemplacen las imágenes de ningún sitio por este método, lo único que ahorrarán será una petición al servidor, pero aumentarán considerablemente la transferencia, de todas formas algún uso se le puede encontrar, muchas gracias por el link!

Saludos

Es cierto, fui presa de mi desconcentracion, no estas ahorrando transferencia, sino peticiones al servidor, aunque para quien tiene transferencia sin medir, puede serle mejor que varias imagenes siendo pedidas al servidor, lo cual le ahorrara ciclos del web server.

Malenko · 13 May 2011

Julcar dijo:
Es cierto, fui presa de mi desconcentracion, no estas ahorrando transferencia, sino peticiones al servidor, aunque para quien tiene transferencia sin medir, puede serle mejor que varias imagenes siendo pedidas al servidor, lo cual le ahorrara ciclos del web server.

Creo que estás muy equivocado y por varios motivos:
- Tener una imagen como fichero de imagen (y no como html) hace que el navegador no tenga que bajarsela siempre (para eso se usa la caché del navegador), además de que los navegadores se bajan las imagenes, los CSS, los ficheros JS en threads con peticiones paralelas, por lo que va más rápido. De hecho, entre otras cosas es una de las formas de mejorar la velocidad de carga de una web, usando CDN's.
- Que tengas transferencia "ilimitada" en el hosting no quiere decir que puedas aumentar "porque si" el tamaño del HTML. Bueno, poder puede y tu transferencia "ilimitada" no lo notará, pero si quien accede a tu web que verá como tarda más en cargar. Además, que dudo mucho que puedas generar una imagen en HTML/CSS que sea compatible con todos los navegadores y que el código para generar dicha imagen ocupe menos que un JPG, PNG o GIF.
- Tampoco tiene sentido decir que es para ahorrar peticiones al servidor web. El servidor web está para eso y ese es su trabajo. Es mejor hacerle más peticiones y que te cargue más rápido. La webs las has de hacer pensando en el usuario final. Si un hosting no es capaz de soportar la carga de una web que tenga 4 imagenes con <img> es mejor cambiarse, no? ;-)

Julcar · 13 May 2011

pero a gran escala (hablando de 10.000 diarios) unas 20.000 peticiones menos (suponiendo que una pagina tiene 2 imagenes hechas html) es un ahorro significativo.
Imaginate en un foro tipo forobeta, con cientos de miles de visitantes unicos diarios, si todos los avatares de los usuarios fueran pasados por este metodo, se ahorraria muchas peticiones al abrir temas, y no creo mucho lo de la cache, ya que esta muy de moda usar los modos privados de los navegadores.

Malenko · 13 May 2011

Julcar dijo:
pero a gran escala (hablando de 10.000 diarios) unas 20.000 peticiones menos (suponiendo que una pagina tiene 2 imagenes hechas html) es un ahorro significativo.
Imaginate en un foro tipo forobeta, con cientos de miles de visitantes unicos diarios, si todos los avatares de los usuarios fueran pasados por este metodo, se ahorraria muchas peticiones al abrir temas, y no creo mucho lo de la cache, ya que esta muy de moda usar los modos privados de los navegadores.

Por unas pocas personas que puedan acceder de forma privada vas a hacer que la web le vaya lenta al resto aumentando el tamaño de la página? Además, repito, las imagenes se pueden almacenar en CDN's. Es más, vBulletin (el sistema de foro que usa forobeta) está pensado para usar CDN's para los avatares, para las imagenes subidas y los JS, de forma que aumentas la velocidad de carga.

Además, si uno de los factores que tiene en cuenta google es la velocidad de carga (obteniendo el html), no es mejor no darle más paja y dejarle en HTML cuanto más contenido posible?

Por cierto, has probado a ver cuanto pesa una imagen en CSS/HTML y en fichero de imagen correctamente optimizado? Cual pesa menos? ;-)

Para que no te lo preguntes tú u otra persona, yo he hecho la prueba con el logo de AlertPay de tu firma:

La imagen sin optimizar pesa 7.9KB
La imagen optimizada pesa 2.1 KB
La imagen en HTML/CSS pesa 122KB

Con estos datos y teniendo en cuenta que esta misma página, antes de enviar este mensaje pesa el HTML 25,51KB ... creo que ha quedado claro, no? ;-)

sergio carrasco · 17 May 2011

Mas que funcional, me parece curioso xD se podrían hacer muchas cosas con esa lógica :rofl: