Compresión de imágenes

[Fran García Franco [agenciacreativa.net]]

Al hilo nuestra conversación de ayer, en nuestra empresa estuvimos hablado de comprimir js y css, y aquí utilizamos Yuicompressor para .js y .css, no se que ventajas o desventajas tiene respecto a less o saas, no estoy muy puesto...

Hicimos pruebas con el PageSpeed de google, una app de chrome y daba datos como que las imágenes pueden optimizarse 36%, 43%, hasta 50%, ... porcentajes muy altos, teniendo en cuenta que lo decía sobre imágenes que pesan 1Kb 1,5Kb y que son iconos... eso me dio que pensar.

Mi pregunta es, ¿Cómo optimizais las imágenes? yo diseño en illustrator y optimizo o bien desde photoshop, guardando para web y dispositivos o bien desde el mismo illustrator de la misma manera.

Suelo comprimir en png24 o png8 depende del fondo donde vaya a ir la imagen. Si utilizo png8 intento ajustar a web todo lo que pueda sin que lo altere demasiado. esto creo que lo solucionaría trabajando con una paleta de colores web en exclusiva sin rangos RGB

Si es una foto o mapa de bits complejo, guardo a jpg alta calidad, 70

Espero vuestras respuestas.

Saludos, 

Fran

 

[Juan G. Hurtado]

Algo interesante, aparte de todo este tema de exportar desde las distintas suites de creación, es el uso de compresores externos, como Smusher [1]

Yo lo vengo usando desde hace tiempo, y la verdad es que comprime bastante, y sin pérdida de calidad.

[1] https://github.com/grosser/smusher

Fran

 

--
Has recibido este mensaje porque estás suscrito al grupo "Frontend Spain" de Grupos de Google.
Para publicar una entrada en este grupo, envía un correo electrónico a fronten...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a frontend-spai...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/frontend-spain?hl=es.

--
Juan G. Hurtado
juan.g....@gmail.com

[Taty Grassini]

Smusher está muy bien. Y si además de comprimir, quieres acelerar los tiempos de carga del sitio, también puedes implementar el uso de CSS Sprites.

Si usas SASS (mi caso), ya viene con una función que hace todo el trabajo por ti, pone todas las imágenes en un gran PNG y calcula/escribe el CSS.

[José Manuel Lucas]

Si trabajáis en OSX Lion, os recomiendo que le echéis un ojo a Codekit: Parseador de SASS, Less y Stylus, compresión de js y parseador de Coffescript, optimización de imágenes... Todo ello en local

Taty Grassini

16 de marzo de 2012 11:23

Smusher está muy bien. Y si además de comprimir, quieres acelerar los tiempos de carga del sitio, también puedes implementar el uso de CSS Sprites.

Si usas SASS (mi caso), ya viene con una función que hace todo el trabajo por ti, pone todas las imágenes en un gran PNG y calcula/escribe el CSS.

--
Has recibido este mensaje porque estás suscrito al grupo "Frontend Spain" de Grupos de Google.
Para publicar una entrada en este grupo, envía un correo electrónico a fronten...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a frontend-spai...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/frontend-spain?hl=es.

Juan G. Hurtado

16 de marzo de 2012 11:09

Algo interesante, aparte de todo este tema de exportar desde las distintas suites de creación, es el uso de compresores externos, como Smusher [1]

Yo lo vengo usando desde hace tiempo, y la verdad es que comprime bastante, y sin pérdida de calidad.

[1] https://github.com/grosser/smusher

--
Juan G. Hurtado
juan.g....@gmail.com

--
Has recibido este mensaje porque estás suscrito al grupo "Frontend Spain" de Grupos de Google.
Para publicar una entrada en este grupo, envía un correo electrónico a fronten...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a frontend-spai...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/frontend-spain?hl=es.

Fran García Franco [agenciacreativa.net]

16 de marzo de 2012 10:42

[Gonzalo Ruiz de Villa]

Para optimizar PNG, nosotros tenemos dentro del proceso de integración contínua OptiPNG, y lo pasamos automáticamente sobre todas las imágenes. Realiza compresión sin pérdida.

Por otra parte, como compresor js, me gusta bastante Google Closure, en las comparaciones que he hecho con YUI Compressor me ha dado mejores resultados.

Además, si te gusta tirar js en plan "hard core" el Google Closure en modo avanzado puede limpiar muchísimo código no usado.

Como el CSS lo generamos casi siempre con el duo Compass/SASS, a producción enviamos siempre la salida comprimida.

2012/3/16 José Manuel Lucas <ninjawe...@gmail.com>

[Harold Dennison]

Si, no tendrás problemas entre navegadores.

En el caso de SASS, acaba transformado en un .css normal y corriente, que es lo que subes a producción.

En el caso de LESS, puedes escoger hacer lo mismo, o enviar el LESS, y que un script js lo transforme de LESS a CSS en el navegador del cliente.

2012/8/7 Christian (Web designer & developer) <luigg...@gmail.com>

Buenas acabo de unirme al grupo, sobre esto de las imágenes, tengo un proyecto con una empresa de Seguridad y servicios de control remoto. El caso es que el diseñador que lo hizo es más gráfico que web, y empezo a meter mil imágenes que tardan en cargar.

Yo lo solucioné un poco con ImageOptim para OSx, aun así creo que va un poco lento.

He visto el CodeKit, y tiene muy buena pinta, lo que os voy  hacer una pregunta tonta. Less/SASS, se ve en todos los navegadores, no?

Gracias,
--
Christian
http://www.grafik-oh.com
Twitter: @ElTruxi

El viernes, 16 de marzo de 2012 15:46:44 UTC+1, Gonzalo Ruiz de Villa escribió:

Para optimizar PNG, nosotros tenemos dentro del proceso de integración contínua OptiPNG, y lo pasamos automáticamente sobre todas las imágenes. Realiza compresión sin pérdida.

Por otra parte, como compresor js, me gusta bastante Google Closure, en las comparaciones que he hecho con YUI Compressor me ha dado mejores resultados.

Además, si te gusta tirar js en plan "hard core" el Google Closure en modo avanzado puede limpiar muchísimo código no usado.

Como el CSS lo generamos casi siempre con el duo Compass/SASS, a producción enviamos siempre la salida comprimida.

2012/3/16 José Manuel Lucas <ninjawe...@gmail.com>

Si trabajáis en OSX Lion, os recomiendo que le echéis un ojo a Codekit: Parseador de SASS, Less y Stylus, compresión de js y parseador de Coffescript, optimización de imágenes... Todo ello en local

Taty Grassini

16 de marzo de 2012 11:23

Smusher está muy bien. Y si además de comprimir, quieres acelerar los tiempos de carga del sitio, también puedes implementar el uso de CSS Sprites.

Si usas SASS (mi caso), ya viene con una función que hace todo el trabajo por ti, pone todas las imágenes en un gran PNG y calcula/escribe el CSS.

--
Has recibido este mensaje porque estás suscrito al grupo "Frontend Spain" de Grupos de Google.

Para publicar una entrada en este grupo, envía un correo electrónico a frontend-spain@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a frontend-spain+unsubscribe@googlegroups.com

Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/frontend-spain?hl=es.

Juan G. Hurtado

16 de marzo de 2012 11:09

Algo interesante, aparte de todo este tema de exportar desde las distintas suites de creación, es el uso de compresores externos, como Smusher [1]

Yo lo vengo usando desde hace tiempo, y la verdad es que comprime bastante, y sin pérdida de calidad.

[1] https://github.com/grosser/smusher

--
Juan G. Hurtado
juan.g....@gmail.com

--
Has recibido este mensaje porque estás suscrito al grupo "Frontend Spain" de Grupos de Google.

Para publicar una entrada en este grupo, envía un correo electrónico a frontend-spain@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a frontend-spain+unsubscribe@googlegroups.com

Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/frontend-spain?hl=es.

Fran García Franco [agenciacreativa.net]

16 de marzo de 2012 10:42

Al hilo nuestra conversación de ayer, en nuestra empresa estuvimos hablado de comprimir js y css, y aquí utilizamos Yuicompressor para .js y .css, no se que ventajas o desventajas tiene respecto a less o saas, no estoy muy puesto...

Hicimos pruebas con el PageSpeed de google, una app de chrome y daba datos como que las imágenes pueden optimizarse 36%, 43%, hasta 50%, ... porcentajes muy altos, teniendo en cuenta que lo decía sobre imágenes que pesan 1Kb 1,5Kb y que son iconos... eso me dio que pensar.

Mi pregunta es, ¿Cómo optimizais las imágenes? yo diseño en illustrator y optimizo o bien desde photoshop, guardando para web y dispositivos o bien desde el mismo illustrator de la misma manera.

Suelo comprimir en png24 o png8 depende del fondo donde vaya a ir la imagen. Si utilizo png8 intento ajustar a web todo lo que pueda sin que lo altere demasiado. esto creo que lo solucionaría trabajando con una paleta de colores web en exclusiva sin rangos RGB

Si es una foto o mapa de bits complejo, guardo a jpg alta calidad, 70

Espero vuestras respuestas.

Saludos, 

Fran

 

--
Has recibido este mensaje porque estás suscrito al grupo "Frontend Spain" de Grupos de Google.

Para publicar una entrada en este grupo, envía un correo electrónico a frontend-spain@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a frontend-spain+unsubscribe@googlegroups.com

Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/frontend-spain?hl=es.

--
Has recibido este mensaje porque estás suscrito al grupo "Frontend Spain" de Grupos de Google.

Para publicar una entrada en este grupo, envía un correo electrónico a frontend-spain@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a frontend-spain+unsubscribe@googlegroups.com

Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/frontend-spain?hl=es.

--
Has recibido este mensaje porque estás suscrito al grupo "Frontend Spain" de Grupos de Google.

Para ver este debate en la Web, visita https://groups.google.com/d/msg/frontend-spain/-/RpDdITjw2xcJ.

[Christian (Web designer & developer)]

Ok me baje el CodeKit, pero no se como funciona voy a ver un par de tutoriales de como funciona la cosa, tiene muy buena pinta, y me entran proyectos muy grandes donmde me interesaria mucho, poder usar un sistema así.

Alguna recomendación de por donde empezar?

Gracias. Christian!