Optimización de imagenes con WordPress

Tweet about this on Twitter126Share on Facebook0Share on Google+2Share on LinkedIn6Pin on Pinterest0

La optimización de imágenes es uno de los procesos más importantes a la hora de mejorar la velocidad de nuestra web. Afortunadamente, wordpress nos ofrece diversos plugins que nos ayudarán en este empeño. Los problemas más importantes que intentaremos solucionar son los siguientes:

– Imágenes de gran resolución y tamaño, que provocan un elevado tiempo de carga de nuestra web.

– Uso de imágenes, donde mediante html y css se indican unas dimensiones determinadas, pero en realidad se está cargando la imagen a tamaño completo.

URL

http://wordpress.org/plugins/ewww-image-optimizer/

http://wordpress.org/plugins/regenerate-thumbnails/

DIRECTRICES

– Existen múltiples plugins en wordpress para optimizar las imágenes. Como siempre, nosotros recomendamos los que utilizamos en nuestras webs. En concreto:

  1. EWWW Image Optimizer
  2. Regenerate thumbnails

– Dependiendo de la configuración particular de vuestra web y servidor, la configuración sugerida, quizás no sea la más apropiada. En caso de duda deberéis consultar con vuestro webmaster.

– Si estamos utilizando un programa de cache, después de optimizar las imágenes, deberemos asegurarnos de vaciar todos los caches, de este modo nos aseguramos de estar sirviendo las nuevas imágenes optimizadas y no las antiguas.

INSTRUCCIONES

El primer paso, antes de instalar los plugins será utilizar una herramienta como Page speed de Google, para ver cual es nuestra situación actual y los problemas detectados.

page speed insights

Vemos por ejemplo en nuestro caso, que partimos de una puntuación de 60 y que hay varias imágenes que presentan problemas.

Instalemos para continuar el plugin EWWW Image Optimizer. Para ello, simplemente iremos al menú Plugins, añadir nuevo plugin, opción buscar “EWWW Image Optimizer” y click en instalar plugin. En la pantalla posterior, haremos click en “Instalar plugin”:

EWWW Image Optimizer

– Si nos dirigimos al menú ajustes, veremos que aparece una nueva opción con el nombre del plugin. Haremos click, y entraremos en la configuración del mismo. Lo primero que debemos tener en cuenta es que el propio plugin nos indica si tenemos en nuestro servidor las librerías y scripts que son utilizados en el proceso de optimización. Si vemos que nos faltan la mayoría de ellos, debemos consultar con nuestro proveedor de hosting.


EWWW Image Optimizer scripts

La configuración que viene por defecto es totalmente válida, y a menos que tengamos unas necesidades específicas la dejaremos tal cual. No obstante, lo anterior, deberemos tener en cuenta que las imágenes que ya hayamos subido al servidor, no están optimizadas. Por lo que deberemos utilizar la opción “Bulk optimizer” que el propio plugin nos ofrece.

EWWW Image Optimizer bulk

Una vez hayamos importado las imágenes, simplemente debemos hacer click en el enlace correspondiente, y el plugin empezará a optimizar todas las imágenes (si tenemos un gran número de imágenes el proceso puede durar varias horas).

No necesitaremos hacer nada más en la configuración de este plugin, las imágenes que subamos en el futuro se optimizarán automáticamente.

El siguiente paso será instalar el plugin Regenerate thumbnails. Para ello realizaremos los pasos que veíamos anteriormente para instalar un plugin.

Tras activar el plugin, veremos que se nos genera el siguiente menú:

regerate thumbnails

Simplemente deberemos clicar en el botón “regenerate thumbnails” y el proceso se iniciará (puede durar varias horas, si tenemos muchas imágenes).

regenerate all thumbnails

Si tenemos dudas sobre si una imagen concreta ha sido optimizada, podemos ir al menú medios, librería multimedia y optimizarla de nuevo individualmente.

regenarate thumbnail

re-optimize

Una vez realizados todos los pasos anteriores, es conveniente volver a medir nuestra puntuación en la herramienta Page speed de Google, de esta forma veremos si realmente hemos mejorado nuestra situación. En nuestro caso vemos, por ejemplo, que nuestra puntuación ha mejorado considerablemente de 60 a 87, ello refuerza la conveniencia d optimizar las imágenes de nuestra web.

improved page speed

RECURSOS ADICIONALES

Si tenemos preguntas o dudas sobre estos dos plugins podemos utilizar los siguientes recursos:

https://wordpress.org/support/plugin/regenerate-thumbnails

https://wordpress.org/plugins/ewww-image-optimizer/faq/

https://wordpress.org/support/plugin/ewww-image-optimizer

Tweet about this on Twitter126Share on Facebook0Share on Google+2Share on LinkedIn6Pin on Pinterest0
<< Post Anterior
Post Siguiente >>

Leave A Response

* Denotes Required Field