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.
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.
- 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 - 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) - 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
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?
Ver comentarios (15)
Hola. He descargado desde PageSpeed el fichero con imágenes y un fichero style.css. Los he cargado en la web, vaciado el caché de W3TC y de Cloudflare... pero PageSpeed siguen mostrando los mismos mensajes de error. Es como si no se diera cuenta de que ya están cargadas las imágenes y el css correctos. ¿Alguna idea para resolverlo? Gracias.
El problema es que Google Pagespeed no siempre coge las páginas desde el mismo nodo del que las estás viendo tú, esto combinado con un pequeño caché que parece tener hace que tengas que esperar en ocasiones varios minutos entre refrescos para ver los resultados correctos.
Gracias por tu respuesta pero han pasado semanas y sigue igual, Page Speed no detecta que he subido las imágenes optimizadas que me descargué de su misma página. Ya no sé qué probar.
Vale, revisa que no tengas algún plugin de caché de wordpress habilitado, y también revisa si tienes algún tipo de caché del lado del servidor como por ejemplo varnish o similar.
Por lo que entiendo, cuando navegas en la web aparecen las imágenes que tocan con el tamaño correcto y demás desde el navegador no?
Hola de nuevo. Plugins: la caché de W3TC, ya la vacié y la de Wordfence está desactivada. La caché del Varnish del servidor también la vacié. Las imágenes se ven bien, sólo que PageSpeed se empecina en decir que no están optimizadas y ofrece que me descargue las que ya tengo cargadas en la web. Un círculo infernal.
Veamos, cuando subes las fotos lo haces con el gestor de imágenes de wordpress? te lo digo por que si tienes algún plugin para reducir el tamaño de estas seguramente te las estará recomprimiendo.
Hola! Las imágenes las subo a WP ya optimizadas así que no utilizo ningún plugin para ello.
Si entro en mi administrador en el hosting, veo las imágenes optimizadas que subí y otras que se han generado automáticamente en esa misma fecha con otros tamaños.
Por ejemplo, yo subí optimizada CONTACTO.JPG y se han creado "solas" CONTACTO-816X450.jpg, CONTACTO-768X404.jpg, CONTACTO-340x250.jpg, CONTACTO-300x158.jpg, CONTACTO-250x160.jpg, CONTACTO-150x150.jpg, CONTACTO-1024x539.jpg.
De otras imágenes se han autogenerado menos tamaños.
Vale, los tiros van más o menos por donde yo te decía. Wordpress cuando subes imágenes con el gestor multimedia, te crea tamaños dependiendo de lo que tengas configurado. Lo que te está pasando es que te crea los diferentes tamaños de las imágenes que subes y eso se hace con las funciones de generar imagenes de gdlib, por lo que el tamaño nunca será el mismo. Para evitar esto lo mejor es que uses algún plugin como ewww que te optimiza las imágenes que subes y te las deja como google pagespeed
Vaya, había leído que era mejor subirlas ya optimizadas para ahorrarte añadir más plugins y evitar que empeorase el rendimiento de la página en WP. Muchas gracias por tus respuestas, probaré con ewww.
Este tipo de plugins solo se ejecutan cuando subes las imágenes, por contra, si no tienes uno así, las debes subir a mano por ftp a la carpeta que toca con todos los tamaños, cosa que es un poco locura. Otra cosa que puedes hacer si no quieres tenerlo siempre activo (yo no veo diferencia de rendimiento), es activarlo de vez en cuando y comprimirlas en lotes las que no estén comprimidas para luego volver a desactivarlo.
La herramienta no está disponible, los enlaces rotos
Tienes razón, trabajaré en ello para volver a ponerla online tan pronto sea posible. Gracias por el aviso.
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
Muy util, lo uso mucho.
Muchisimas gracias