Generalmente las imágenes suelen ocupar una buena parte de bits cargados y por eso optimizarlas siempre será una buena inversión. A ello nos puede ayudar TinyPNG, una herramienta online especialmente útil para el formato png con transparencia.
Su uso es sencillo. Simplemente arrastramos las imágenes a la página y tras la transformación, la utilidad nos ofrece un enlace para descargar la nueva imagen.
He hecho unas pruebas y en la captura adjunta podréis ver hasta qué punto es eficaz. Entre un 71 y un 89% de ahorro y como media, un 82%. En fin, si no es un 80 (que casi seguro que lo será, un 50% ya merecería la pena.
Sin embargo tengo que hacer una salvedad para los que estéis en Blogger y es que no siempre nos serán de utilidad herramientas como esta si no conocemos las limitaciones, así que allá van.
Particularidades de Blogger
Esto lo descubrí al ir a poner en esta entrada un par de imágenes idénticas, una original y otra optimizada para que pudierais palpar la diferencia. Para ello subí esa de Mario que visteis en la captura de 1,5MB (1500KB) que comprimida ocupaba sólo 301,8KB y para mi sorpresa, una vez subidas a Blogger (Picasa-G+) ambas pesaban más o menos lo mismo: 950KB y 858KB respectivamente. Y sí, la comprimida es la primera por lo que incluso ocupaba algo más que la sin comprimir.
Lo importante aquí es que la imagen original era de 1486x1735px y que Blogger la redujo a 1370x1600px. Esos 1600px es el tope que Blogger a priori (otro día veremos un truco sobre esto) admite para el ancho o el alto de las imágenes, así que deduzco que al cambiarlas Blogger, perdieron sus características originales de compresión y por eso casi se igualaron los pesos... al alza.
Cuando caí en lo de los 1600px, cambié el tamaño de la original para que fuera exactamente de ese alto y repetí el proceso subiendo la normal y la tratada con TinyPNG. Ahora sí que había diferencia y el peso respectivo era de 899 vs 252 KB, así que ya sabéis el tamaño máximo para aprovechar este tipo de herramientas.
Pero había otra cosilla más y es que en mi blog suelo poner las imágenes en tamaño "extra-grande" (640px) y ya sabéis que Blogger genera automáticamente imágenes de todos los tamaños posibles (Ver: Subir una imagen y disponer de cientos), una característica muy útil del almacenamiento de imágenes con Google, pero que en ocasiones tiene algún que otro inconveniente.
En este caso, la imagen optimizada de 1600px volvía a ser "descomprimida" al reformatearla con el tamaño extra-grande (s640) y volvíamos al principio, a la imagen con más peso.
Por fin reduje la imagen a 640px con un editor respetando las proporciones, la pasé por TinyPNG y ¡voilá!... este fue el resultado y como veis, no se aprecia diferencia alguna a simple vista.
 |
| Imagen sin tratar de 548x640px = 196,0 KB |
 |
| Imagen optimizada de 548x640px = 56,3 KB |
Conclusión
Cuando quieras subir una imagen a tu blog, usa primero un editor de imágenes para ajustarla al tamaño máximo con el que realmente se va a mostrar en él, olvidándote de que luego la plantilla la pudiera redimensionar. La verás más pequeña y aparentemente pensarás que es menos pesada, pero no siempre es así.
Una vez al tamaño deseado, optimízala con esta u otra herramienta similar y ahora sí que la puedes subir con garantías de que pesará menos que la original.
Si las alojas desde Blogger, usa en cualquier caso imágenes de menos de 1600px (alto o ancho) a menos que no tengas otra opción, como ocurre por ejemplo con infografías, normalmente muy altas de tamaño.
 |
| Imagen sin tratar de 325x400px = 102,0 KB |
 |
| Imagen optimizada de 325x400px = 27,7 KB |
Las imágenes de Mario y del gato Cheshire las obtuve de Google Imágenes y conocí esta herramienta por +Sergi Moreno, a quién agradezco el soplo ;)
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Muy interesante el post. Hace unos días le estaba dando vuelta a este tema porque noté algo extraño en las imágenes de mi blog. En las últimas entradas que publiqué en el mes de noviembre las imágenes se suben y se ven bien, sin embargo, cuando el diseño responsive de mi blog las redimensiona para pantallas más pequeñas, no se ven, aparece como si el link esté roto.
ResponderEliminarSe me hace raro que este problema haya aparecido sólo de repente ¿será un cambio en el tratamiento de imágenes de Picasa-Google+?
Eso que cuentas de las imágenes que se pierden cuando se redimensionan por el RWD, a mí no me ocurre y aunque no sé si usas para ello CSS u otro sistema, tampoco te debería pasar a tí. De hecho he visto tus tres sitios y en ninguno de ellos aprecié ese error. Más bien me inclino a pensar que se trata de una mala conexión del móvil con el que posiblemente lo viste, que no terminó de cargar la imagen.
EliminarGracias por responder. En efecto era el móvil que tiene un adBlocker que reconocía como publicidad algunas imágenes del blog.
EliminarYo suelo subir las imágenes reducidas a 800 y después uso el formato Tamaño original.....osea que se me ve enorme, como a mi me gusta....y la verdad es que debo de tener unas 3000 imágenes y de momento solo me pone que tengo usado un dos y pico por ciento....quieres decir que si las hago transparente con ese generador todavía me ocuparán menos?....porque hasta ahora solo hacía transparentes las imágenes de los laterales, pero no las de la propia entrada....
ResponderEliminarOye, he estado leyendo la entrada de SUBIR UNA IMAGEN Y DISPONER DE CIENTOS y chico.....es impresionante lo que se llega a es onder detrás de un código.....
Bueno Oloman, interesantísima la entrada.
Gracias por las explicaciones
No se trata de hacerlas transparentes Andaira. Un optimizador te mejora tanto las opacas como las que incluyen transparencia y si hablé aquí sobre estas últimas, fue sólo porque este servicio está especializado en las de ese tipo. En realidad una imagen con transparencia suele pesar más que una opaca, así que si no es necesario, no uses transparentes.
EliminarSobre el espacio ocupado en Picasa (o Google) por las imágenes subidas, eso no tiene nada que ver con la velocidad de carga de esas imágenes. Son cosas distintas. De todas formas te comento que todas las que no superen los 2048px no consumen espacio de almacenamiento, por eso sólo tienes ocupado un 2%. Si no estás registrado en Google el límite baja a 800px.
Por último, lo de las imágenes múltiples por así llamarlo, cuando subes una a Picasa, realmente es muy práctico en ocasiones ;)
Ok, entendido!!!!
EliminarY con respecto a las imágenes, pensé que no contabilizaba de menos de 800px, ahora veo que no es así. Y fíjate tú, yo pensaba...a menos peso, más rápidez en la carga.
Y sí, lo de tener "imágenes múltiples", a mi me gusta, me es útil...antes tenía que hacerlo a ojo e ir probando medidas, (menos con el Explorer, que me era más fácil, pero como tardaba en cargarme todos los blogs, me pasé al chrome),
Bueno Oloman, que muchas gracias por el apunte
Saludossss
Estabas en lo correcto, pero veo que no me expliqué bien. Las de menos de 800px no cuentan en ningún caso para el consumo de la capacidad que te da gratis Google y si estás registrado en Google, entonces pueden ser (sin consumir) hasta de 2048px
Eliminar:)
EliminarMe sirvió mucho me redujo un 72% una imagen y las modificaciones no son tan perceptibles.!
ResponderEliminar¿Pero realmente tú notas alguna diferencia? Yo ni la más mínima ;)
EliminarExcelente aporte, me llego en un buen momento, Mil Gracias
ResponderEliminarPara el tamaño de imagen sea la real en blogger yo utilizo /s00 , en vez de /s1600.
ResponderEliminarMuy buen aporte como siempre oloman.
Sí, Hítler, ese es el truco precisamente.
ResponderEliminarGracias muy útil lo llevaré acabo,lo de Tinypng.
ResponderEliminarPara mis fotos que ya tengo en formato Jpeg ¿sabes de algúna web similar online para convertirlas en png para luego pasarlas por el Tinypng?gracias y un sal2.
Ni se te ocurra Bar Tolo. Las .jpg suelen ocupar menos que las .png, así que sería un poco absurdo pasar a este segundo formato. Si acaso usa otros servicios.
EliminarEn una búsqueda rápida encontré estos:
http://www.smushit.com/ysmush.it/
https://kraken.io/
http://www.imageoptimizer.net/Pages/Home.aspx
http://tools.dynamicdrive.com/imageoptimizer/#.UrIc4VvuIrU
http://www.smushit.com/ysmush.it/
...y aquí abajo estoy leyendo ahora mismo otra que recomienda Ignacio Garnica ;)
Para aportar al tema, a quienes usan Mac les recomiendo ImageOptim, es realmente bestial, con eso bajo hasta un 80% de mis imágenes sin pérdidas. Además soporta múltiples formatos (jpeg, png, gif, etc).
ResponderEliminarGracias Ignacio ;)
EliminarHola, ya me he bajado ImageOptim a mi Mac, y no estoy muy segura de si he entendido el proceso. Supuestamente solo tienes que arrastar la imagen a la ventana, seleccionarla y pinchar sobre la imagen de la flechita y automáticamente la reduce??... Es decir, que la imagen que queda en el finder es la, por decirlo de alguna manera, la comprimida?? Gracias por esta entrada Olo, que yo subo muchas imágenes a mi blog y supongo que eso retrasa muchísimo la carga, aunque procuro subirlas muy pequeñas, pero despues de leerte ya no estoy tan segura que lo esté haciendo bien solo haciendo eso (que luego las pongo en extra-grande¡¡ ) Saludos¡¡
EliminarKarmela, no tengo MAC, así que esperemos que +Ignacio Garnica esté suscrito a esta entrada y vea que le pedimos ayuda cuando salga este comentario en su correo ;)
EliminarGracias, pero me temo que no, porque hace días que comenté y nada... De todas formas, te agradezco, como siempre, tu contestación¡¡. Saludos ;)
EliminarBastante interesante esta entrada Oloman. Sin saber esto ya estaba optimizando bien mis imágenes, pues siempre las edito al tamaño que se van a ver en el blog, de modo que no estaba perdiendo las propiedades de compresión ya realizadas all subirlas al blog.
ResponderEliminarHola, oloman
ResponderEliminarSoy uno de esos bloggers torpes que va aprendiendo a "cañonazos". Leido tu excelente artículo y comentarios adicionales he modificado directamente en el HTML de una de mis entradas una foto (tal y como comentas tu y tambien Hitler) modificando el s/1600 a s/00.
Mi pregunta es: independientemente de que vaya ajustando el tamaño en pixeles de las imágenes ¿con esta modificación en el HTML es ya suficiente para que tengan menos peso y la página se cargue antes?
Gracias anticipadas por tu estupendo trabajo.
Te dejo el enlace de la entrada que he modificado (en concreto la segunda foto)
http://paradaconfonda.blogspot.com.es/2014/04/el-alarde-la-gran-fiesta-de-hondarribia.html
Al contrario José Manuel. Ahora mismo lo que tienes como segunda imagen es una de 2048x1530 píxeles -es decir, enorme- y si se muestra con 640px de ancho es porque vía HTML, con un width="640", la fuerzas para que se vea en el blog de ese otro tamaño. Es decir, cargas una de 2048 para mostrarla con sólo 640px.
EliminarLo que correspondería en tu caso sería usar el s640 para cargar la imagen de exactamente 640px (mucho más liviana que la original).
Mira en los siguientes enlaces esta que estás usando (luego pincha en ella para hacer zoom) y esta otra que te sugiero. A simple vista ya te darás cuenta de la diferencia de tamaño.
Una vez lo tengas claro, si quieres, lo que yo propongo en este post es que la de 640px se descargue al ordenador, se pase por una herramienta de compresión y entonces ya se suba al post. Eso supone un doble ahorro.
Es indiferente. Definir el ancho y el alto sólo hace una redimensión aparente para su visión en web, pero la imagen es exactamente la misma en un caso y en otro, así que su peso también es el mismo.
ResponderEliminarComo siempre fantástico.
ResponderEliminarHe pasado por Tinypng una serie de imágenes de un slider que tengo en la barra lateral y el resultado es asombroso. Alrededor de un 70-80% de bajada de peso por imagen.
No hay un solo post de este blog que no sea útil. Muchas gracias.
Una manera muy fácil de pasar de una puntuación de 51 en pagespedd a 86 . me encanta ésta herramienda de compresor panda, tambien utilicé otras herramientas de compresión de css y java scrip online que me ayudaron a bajar unos cuantos kilobites del html de mi plantilla, hace rato había visto la velocidad de oloblogger en pagge spedd y me entró la envidia, jajajaj y éste es el resultado de tanto esfuerzo, Gracias a oloblogger ;) y oloman su creador. He aquí el enlace con la evidencia: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.kangutingo.com%2F Tambien pueden entrar para los curiosos a mi web: www.kangutingo.com si se puede tener una web rápida con un diseño original y rebuscado con las guías que dá oloman, por ejemplo van a ver aplicada la galería de imagenes sencilla y los botones ligeritos de peso, la barra de navegación horizontal con buscador, las migajas de pan, el botón de whatapp,las entradas al azar con mensaje debajo de las entradas, Entradas relacionadas con miniaturas, y tambien la adaptación de rosa y djmir (se me olvidó como es que era ese), en fin un blog hecho con herramientas que proporciona oloblogger, mi eterno agradecimiento Hombre, y un Saludo. vuelvo a dejar el enlace para que vean cómo se ve la página: www.kangutingo.com
ResponderEliminarPues precisamente mi página no es un ejemplo de virtudes en ese terreno de la velocidad. Hace tiempo que necesita un re-styling XD
Eliminarbueno, entonces aquí os dejo lo que he usado yo: http://www.cssdrive.com/index.php/main/csscompressor/ esa es para comprimir el css sin perder los valores y estilo y ésta otra es para comprimir .js http://jscompress.com/ en fin que me ha funcionado de maravilla, si puedes mirar mi web con page speed lo verás. ;) Un saludo. Pdt: por ahí te dejé una inquietud sobre la opacidad de las imagenes en otra entrada.
EliminarUfff Hombre y trabajo que me costó lograr solucionar lo que te había comentado, tesulta que mi blog tenía el estilo de las imagenes de la portada como data:post.thumbnailUrl y al quitar el min.js que le daba el estilo se ponía borroso, entonces lo que hice fué cambiar a data:post.firstImageUrl en el código y boiala! jajaja ahora si, puedo presumir de un puntaje de 96 -98 en mi web: www.kangutingo.com ya más no se puede, hay que tener .hacces en fin... Gracias y un saludo.
Eliminar