Herramienta para optimizar las imágenes para Google PageSpeed Insights

Herramienta para optimizar las imágenes para Google PageSpeed Insights

Si te preocupa lo que opine google de tu página seguramente habrás utilizado alguna herramienta de análisis que te dirá lo optimizada que está tu página, y si has profundizado habrás utilizado Google PageSpeed Insights que vendría a ser la biblia de la optimización de páginas para que google se lo tome bien.

Antiguamente había plugins para firefox y puede que otros navegadores que te permitían analizar estos aspectos y descargar las imágenes optimizadas con un simple click para así poder ponerlas en tu sitio, pero eso pasó a la historia hace algo de tiempo. Ahora para optimizar las imágenes según los estándares de google hay que buscarse un poco la vida, y para facilitar eso he actualizado la sección de herramientas.

He creado esta herramienta online para optimizar imágenes y que google nos de la mejor puntuación en PageSpeed Insights que se puede sacar por las imágenes, es decir, que no volveremos a ver la alerta en rojo ni amarillo de que nuestras imágenes no están optimizadas.

herramientas-web-online-optimizar-imagenes-google-pagespeed

Sé que puede ser muy frustrante el encontrarte en la plataforma de google pagespeed, y sin embargo no encontrar ninguna información de cómo reducir estas imágenes para que dejen de saltar las alertas. Pues bueno, ya me he complicado yo la vida para que puedas con un par de clicks optimizar cualquier imágen (siempre que no te pases de tamaño claro), ya sea para web o si simplemente quieres comprimir alguna foto (o todas) las que hace tu cámara sin ninguna pérdida de calidad y consiguiendo el menor tamaño posible.

Por el momento no tengo un API que haga que se puedan lanzar las compresiones de forma remota o algo similar, aunque lo tengo en mente y estoy estudiando la forma de realizarlo. Tan pronto esté listo publicaré una nueva noticia así como dejaré una nueva sección en la sección Herramientas para Webmasters.

Como comprimir las imágenes sin pérdida de calidad para que las acepte Google PageSpeed

Con la herramienta que he creado es realmente fácil y con un par de clicks lo tienes listo.

  1. Seleccionar la imágen
    Solo tienes que entrar en el Compresor para PageSpeed y seleccionar tu imágen del botón examinar en el centro de la pantalla
  2. Darle a comprimir
    Una vez le hayas dado empieza la carga de la imágen (un poco rudimentaria de momento ya que no tengo barra de progreso)
  3. Guardar la imágen
    Una vez te presente la imágen en pantalla te sale debajo de ella la información de lo que ocupaba antes y lo que te ocupa ahora, o mejor dicho, de lo que quiere google que ocupe.
    Simplemente haces botón derecho en la imágen y le das a guardar como.

Espero que a muchos os resulte interesante esta herramienta que ha sido una especie de secretismo por parte de google, y que ahora ya puedes usar tanto como quieras.

Si te ha sido útil y te ha gustado la herramienta se agradece que la compartas con quien pueda necesitarla.

También si tienes alguna sugerencia o idea para mejorarla no dejes de comentarlo e intentaré llevarlo a cabo siempre y cuando sea algo que la mejore.

Descarga los recursos de imagen, JavaScript y CSS optimizadospor Google PageSpeed

descargar-recursos-imagen-css-javascript-google-pagespeed

Desde hace un tiempo es posible descargar todos los archivos ya optimizados desde la misma herramienta de análisis de Google PageSpeed, simplemente tenemos que realizar el análisis de la página que queramos cargar y luego en la parte inferior de los resultados nos aparece el enlace:

  • Descarga los recursos de imagen, JavaScript y CSS optimizados para esta página.

Es un zip que contendrá todos los archivos que había que optimizar en nuestra página. Simplemente tendremos que sustituirlos a través de FTP u otro medio para que ya los tenga en cuenta para el próximo análisis.

Te recomiendo que te guardes una copia de los que tienes por si en algún momento quieres hacer modificaciones, ya que al dejarlos minificados en unarchivo de texto a bloque será más complejo, puedes guardarlos como archivo.min.ext y cargar este otro desde tu diseño en lugar del original.

¿Qué puntuación tienes en Google PageSpeed Insight?


AYUDANOS a poder seguir dando respuestas. Te podemos echar una mano y tú también a nosotros, símplemente dale a me gusta.
  • Daniel

    Muy util, lo uso mucho.

    Muchisimas gracias

  • Montoro

    Muy buen aporte. Pero ahora mismo PageSpeed te permite la opción de descargar los documentos optimizados:
    Aparece en la parte inferior con esta frase:

    “Descarga los recursos de imagen, JavaScript y CSS optimizados para esta página.”

    • Gracias por el comentario, lo añado a la entrada