Si bien aprendimos a controlar los formatos de imagen con los que trabajar (.jpg y .png), así como ajustarlas para que el navegador no tuviera que reescalarlas, ahora nos toca pasar al siguiente nivel de optimización, conseguir el nivel de compresión ideal.
Muchos al pasar Pagespeed habréis recibido el mensaje de advertencia:
"
Optimizar imágenes
Comprimir imágenes y aplicarles un formato adecuado puede ahorrar una gran cantidad de bytes de datos.
- Si se comprime "https://[NOMBRE IMAGEN]" sin pérdida, se pueden ahorrar 2,8 KB (lo que supone una reducción del64%).
"Al realizar la primera entrega de optimización de imágenes conseguimos evitarnos el mensaje de advertencia sobre el reescalado, pero ahora, para este tipo de advertencias vamos a aprender no ya sólo a escalar la imagen al tamaño adecuado sino además a comprimirla sin pérdida para obtener los mejores resultados posible.
El siguiente nivel de optimización, la compresión:
Cuando preparamos una imagen para subir al Blog consideramos siempre estos pasos:1) Buscar la imagen en el formato adecuado, o .jpg o .png para mayor detalle.
2) Hacer que tenga el tamaño exacto con el que va a ser "dibujada" por el naveagdor. Es decir, por medio de Image Resizer o las herramientas de edición de Google+ la ponemos en un tamaño nativo que no obligue al navegador a reescalarla.
3) Por último le damos el máximo nivel de optimización, comprimirla todo lo posible sin pérdida de información para que reduzca su porcentaje de tamaño, liberando el ya de por sí limitado el ancho de banda de nuestros usuarios.
La importancia de la página principal de nuestro Blog
Todos los puntos que en la gestión de imágenes te voy a indicar deben utilizarse especialmente en aquellas que aparecerán en los resúmenes de las entradas de la página principal de tu blog.
Nos centramos sobre todo en la parte principal del Blog por tratarse de la "fachada" exterior que da entrada a todos nuestros contenidos. Cuanto más depurada esté, más rápido se cargará nuestro Blog en sus máquinas.
No obstante, lo mismo que lo aplicas a la página principal con el resumen de las entradas, deberías procurar igualmente emplear estos conceptos en el interior de las entradas.
Cómo detectar si tenemos mal gestionada la optimización de imágenes en nuestro Blog:
Hemos visto en numerosas ocasiones cómo utilizar el servicio PageSpeed de Google para detectar los problemas que podamos tener en nuestro Blog que estén impidiendo una navegación veloz, fluída y de calidad para nuestros usuarios.Hay dos advertencias fundamentales de esta herramienta al respecto de las imágenes:
- 1) La advertencia de "Ofrecer imágenes a escala" , sin duda el paso mínimo es que la imagen no deba ser reescalada por el navegador.
- 2) La advertencia "Optimizar imágenes" es la que trataremos en este tutorial avanzado. Consiste en darle la compresión adecuada a la imagen para que sin pérdida de calidad, adquiera exactamente el tamaño que deba ocupar. De esta manera, conseguiremos reducir tamaños de imágenes hasta en más de un 90%, lo que quiere decir que la descarga será mucho más rápida y dejará más ancho de banda de nuestros clientes libre para continuar con el dibujado de la página.
¿Qué vamos a hacer?
Al subir la imagen a Blogger o nuestros álbumes Google+, una vez escalada adecuadamente le queda el ajuste de compresión exacto.
Google recomienda que se utilicen estos dos programas gratuitos para mejorar la compresión de la imagen:
Google recomienda que se utilicen estos dos programas gratuitos para mejorar la compresión de la imagen:
- Optipng: Programa de código libre alojado en sourceforge.net que se encarga de la optimización total de la compresión para imágenes .png.
- jpegtran: Programa de código linre alojado en jpegclub.org que se encarga de la optimización total de la compresión de imágenes .jpg.
Paso a Paso Optipng:
1) Conéctate a la web de Optipng para descargarte su programa aquí
2) Descomprime en tu disco duro el .zip descargado que contiene el programa Optipng.
3) Coloca el .optipng.exe en una carpeta de tu disco duro. Para que sea más sencillo, ponlo en c:\OptimizarPNG y mete en dicha carpeta las imágenes que desees optimizar.
4) Abre un comando MS-DOS. Desde Windows, dale al botón de Inicio, después la opción "Ejecutar" y por último escribe CMD.
5) Dirígete a la carpeta donde pusiste las imágenes .ong a optimizar escribiendo en la linea de comandos "cd OptimizarPNG" o el nombre de la carpeta donde metieras las imágenes.
6) Una vez dentro escribe "optipng.exe -o7 *.png" y pulsa enter.
Un ejemplo de utilización sería: optipng -o7 imagen_a_optimizar.png
Un ejemplo de utilización sería: optipng -o7 imagen_a_optimizar.png
7) Se comenzará a ejecutar el programa de optimización, al finalizar dejará las imágenes arregladas con el mismo nombre que tenían.
8) Sube las imágenes a Blogger de nuevo y vuelvelas a colocar en la entrada donde se encontraran (imágenes o iconos, lo que fuera).
9) Ejecuta Pagespeed y comprueba que ya no hay más optimización que realizar para las imágenes que has arreglado.
Eso es todo con los .PNG. Hazlo con los de la página principal, con los que se dibujan cuando el usuario accede al Blog y comprueba la mejora. Luego, una vez que lo hagas por rutina verás que mejora claramente la velocidad de dibujado en los navegadores.
Paso a Paso JPEGTRAN:
1) Conéctate a la web de jpegclub para descargarte JPEGTRAN aquí
2) Coloca el jpegtran.exe en una carpeta de tu disco duro. Para que sea más sencillo, ponlo en c:\Optimizarjpg y mete en dicha carpeta la imagen que desees optimizar.
3) Abre un comando MS-DOS. Desde Windows, dale al botón de Inicio, después la opción "Ejecutar" y por último escribe CMD.
4) Ve a la carpeta donde metiste el jpegtran.exe escribiendo " cd Optimizarjpg" o el nombre de la carpeta donde lo introdujeras.
5) Ejecuta el comando "jpegtran -optimize NOMBRE_IMAGEN_ORIGINAL.jpg NOMBRE_IMAGEN_OPTIMIZADA.jpg
6) Sube a Blogger la imagen JPEG optimizada.
Eso es todo con los .JPG. Hazlo con las de la página principal, con las que se dibujan cuando el usuario accede al Blog y comprueba la mejora. Luego, una vez que lo hagas por rutina verás que mejora claramente la velocidad de dibujado en los navegadores.
Miguel no me aclaro, donde ejecuto el comando de jpegtran-optmize no lo encuentro!
ResponderEliminarEn comandos del sistema. Debes salir a la ventana de comandos del sistema operativo.
ResponderEliminarMenú Inicio --> Ejecutar --> escribe cmd --> luego ve a la carpeta donde tengas el jpegtran con la imagen al lado y escribes jpegtran -optmize imagen.jpeg copia.jpeg
Mándamelo a gmail y te lo hago yo en el momento que pueda. No te preocupes.
EliminarGracias ya llegue, ahora tengo el problema de que no reconoce el programa...o no carga
ResponderEliminarGracias ya llegue, ahora tengo el problema de que no reconoce el programa...o no carga
ResponderEliminarMiguel es posible que aunque se optimice una imagen siga dando problemas el page speed? es decir, he optimizado la nueva botonera de redes sociales que esta en png y el page speed aunque no me penaliza por ella, si que me dice que tengo que optimizarla cuando ya lo he hecho por lo que no comprendo que le pasa...
ResponderEliminarSaludos y gracias de antemano por tu ayuda.
Si hay veces que sucede, a mí me ocurre con iconos especialmente pequeños. Con los iconos ya sabes la metodología adecuada:
Eliminar1- Aplicar tamaño exacto para que no haya escalado por navegador.
2- Quitarles "peso" con optipng o jpegtran.
3- Ponerlos en un sprite debidamente optimizado con optinpng o jpegtran.
Si después de eso te sigue dando, la extensión para Chrome de Pagespeed te hace automáticamente la optimización a optipng o jpegtran, pero a pesar de esto, si es muy pequeño hay veces que puede seguir avisando.
Un saludo y mil gracias a ti.
Como fiel discípula tuya que soy ya tengo hecho todo eso y aún así me sigue dando errores. Si tienes curiosidad es la botonera arriba a la izquierda azul q la hice ayer. La extensión del page speed la he probado pero aún no se bien como me puede ayudar. Por cierto he conseguido limpiar todo el css y tengo 0 errores. Un abrazo y gracias por ayudarme tanto
EliminarGracias a ti Verónica, tú si que me ayudas ;)
Eliminarno te preocupes, hay veces que con los iconos es así, no tiene importancia porque no romperán tu media. Comprueba también que tengan el tamaño adecuado para que en móviles sean perfectamente "táctiles".
Un abrazo!!!
Excelente artículo gracias
ResponderEliminarA tu servicio, encantado de que te gsute. Vi que muchos Bloggers no optimizábamos bien las imágenes y aprendí con Pagespeed cómo mejorarlas con optipng y jpegtran... al final se gana bastante en rendimiento. Un saludo y muchas gracias por tu feedback.
EliminarSaludos, Miguel lei paso por paso tu articulo,pero igual que Veronica no me quedo claro donde ejecutar el comando.
ResponderEliminarSegui paso a paso tu explicacion ::::
...................................
En comandos del sistema. Debes salir a la ventana de comandos del sistema operativo.
Menú Inicio --> Ejecutar --> escribe cmd --> luego ve a la carpeta donde tengas el jpegtran con la imagen al lado y escribes jpegtran -optmize imagen.jpeg copia.jpeg
..................................
Cuando escribo CMD le doy enter? "sale una ventana Negra
o le doy click en examinar y busco la carpeta donde guarde el archivo descargado de JPEGTRAN
logicamente ahi "en la misma carpeta"tengo guardada la imagen que quiero optimizar.
El post esta muy bueno, pero deberias colocar unas capturas de pantallas a algo parecido.
Ya que habemos personas menos expertas.
Igual por aqui voy a pasar y leerte muy seguido porque tambien tengo que optimizar limpiar el Css
Te agradezco de antemano tu colaboracion.
Tienes toda la razón Milena, en cuanto pueda y tenga tiempo lo acompaño con imágenes para que sea más sencillo.
EliminarLa ventana de Comandos de Windows es una pantalla negra como la que has visto en la que se escriben comandos para utilizar partes del sistema operativo directamente, sin interfaz gráfica.
Al escribir CMD tienes que pulsar Enter para que te salga la ventana en negro y para ir moviéndote por las distintas carpetas, tienes que utilizar el comando "cd" (change directory). Por ejemplo, si tienes un directorio en tu disco duro que se llama imágenes y está en tu escritorio deberás poner "cd user\nombreusuario\imagenes" y pulsar enter escribiendo la ruta al directorio donde tengas las imágenes (ese era de ejemplo, tienes que ver la ruta donde tú las tengas).
Una vez has llegado a la carpeta donde tienes el jpegtran o el optipng y tus imágenes a base de escribir el comando "cd ruta a la carpeta de imagenes/imagen" ya utilizas los comandos tal cual te vienen en la guía.
Hay sitios que hacen la optimización de imágenes "online" en página web sin necesidad de utilizar la ventana de comandos de windows, el problema es que yo prefiero utilizar esos programas porque son los que Google menciona explícitamente en sus ejemplos.
De todas formas, en breve haré un artículo para obtener las imágenes ya optimizadas directamente por medio de la extensión de Google Pagespeed para Chrome. En cuanto finalice el verano permanece atenta que saldrán varios artículos a este respecto.
Con Blogger para optimizar el rendimiento te recomiendo esta guía: http://www.diariosdelanube.com/2013/09/la-guia-de-rendimiento-para-bloggers_17.html
Para dejar limpia tu css, esta otra guía te vendrá genial: http://www.diariosdelanube.com/2013/09/w3c-web-y-blogger-adapta-tus-hojas-de.html
Cualquier duda me tienes siempre atento a los comentarios del Blog.
Un saludo!!!
Amigo tengo una duda para mejor la velocidad de carga del blog, ¿Que es lo mejor?
ResponderEliminarA) poner las imágenes manteniendo su tamaño original ( sin definir el ancho y alto )
B) poner las imágenes con ancho y alto definido (ya sea igual al tamaño original o de proporciones distintas). Es decir, estableciendo un "widh" y "height" manualmente.
Un cordial saludo
Hola Félix,
Eliminarla normativa actual de Pagespeed se centra en que no superes en un 50% el total del tamaño original de la imagen que pongas. Así pues es más importante cumplir con la A) frente a la B). Sobre todo, lo perfecto en términos de rendimiento es que tu navegador no tenga que "escalar" la imagen (a un tamaño mayor o menor), sino que se pudiera exponer tal cual.
Igualmente, además de no sobrepasar el 50% del tamaño original tanto para mayor como para menor, es muy importante la optimización después con optipng o jpegtran dependiendo de la extensión de la imagen (si es jpg o png).
Yo tengo que editar siempre todas para que "quepan" en el diseño de mi web con el tamaño "nativo".
Cualquier duda me dices.
Un saludo!!!
Está genial explicado. Muchas gracias!!
ResponderEliminarMuchas gracias a ti Pablo por participar. Cualquier cosa aquí me tienes,
EliminarUn saludo.