En mi charla sobre la optimización de WordPress hablé sobre la optimización de imágenes y quería dedicarle una entrada exclusiva al tema de optimizar las imágenes en nuestro WordPress y explicar un poco más a fondo el plugin EWWW Image Optimizer, uno de los plugins por excelencia para estos menesteres.
Líneas generales
No quiero entrar directamente a explicar el EWWW Image Optimizer sin antes dar unas líneas generales sobre la optimización de imágenes para WordPress ya que muchas veces quedan en un segundo plano.
Dimensiones
Un poco de sentido común, no subamos imágenes de 2000×2000 pixeles y luego las redimensionemos a 100×100 estirando desde la esquina de las mismas en el editor de WordPress. Esto hará que se cargue la imagen de 2000×2000 que pesará mucho más. Hay que hacer uso de las imágenes y dimensiones que genera WordPress.
Peso
Hay que subir las imágenes ya con una cierta optimización, nos creemos que cuando usamos el PhotoShop o similar y «guardamos para web» éstas imágenes están optimizadas, pero nada más lejos de la realidad. Aconsejo usar programas como RIOT para reducir el tamaño de las imágenes antes de subirlas a nuestro WordPress. Esta optimización también se podrá hacer con el EWWW Image Optimizer.
Formato
No subas una imagen para un efecto Parallax en PNG, si ya de por sí son grandes, un PNG ocupa mucho más. Los formatos más usados y estandarizados son el JPG, PNG y GIF.
Usa los PNG para imágenes con transparencias o assets de la web, por ejemplo logos, o bordes con transparencias. Para todo aquello que no se ajuste el formato PNG usa el JPG y por último para imágenes animadas el GIF.
Plugin EWWW Image Optimizer, optimizar al vuelo
Primero de todo el plugin EWWW Image Optimizer lo podéis descargas desde este enlace y tenéis que instalarlo en vuestro WordPress.
Una vez lo tenéis instalado y activado y accedéis a la página de configuración del plugin bajo el menú Ajustes –> EWWW Image Optimizer os encontraréis con un cuadro indicando si la configuración de vuestro servidor es la adecuada o no.
El principal problema que nos podemos encontrar es que no tengamos exec() habilitado lo que no es difícil de activar si disponemos de un VPS ya que bastaría con quitarlo de la directiva disable_functions del php.ini. Si no tenemos acceso nosotros mismos podemos pedírselo al servicio técnico de nuestro hosting, en mi caso no he tenido ningún problema con ProfesionalHosting.
Primero nos indica si los programas de compresión/optimización están instalados en el servidor, vienen con el plugin. Posteriormente nos indica si las librerías gráficas para la conversión están instaladas, con tener una de las indicadas basta y por último si existe alguna de las tres funciones indicadas para obtener información del fichero a transformar.
Pestaña ajustes en la nube
Si por algún motivo no podemos activar exec() en nuestro servidor el plugin EWWW Image Optimizer nos deja usar los suyos para hacer la optimización, pero claro está, pasando por caja. Podemos obtener uma ID de API y configurarla en esta sección. Aquí tenéis el plan de precios.
Pestaña ajustes básicos
En esta pestaña del plugin podemos establecer la configuración básica, nos interesa sobre todo:
- Depuración: Si la activamos el plugin entrará en modo Debug ON para localizar problemas si se diesen.
- Eliminar metadatos: Con esta opción eliminaremos la información que guardan las fotos, esta información se conoce cono EXIF, contiene por ejemplo el modelo de cámara, la localización, la fecha, etc.
- Retraso masivo: Pausa entre procesamiento de las imágenes.
Pestaña ajustes avanzados
En esta pestaña se configuran algunos aspectos más avanzados del plugin EWWW Image Optimizer. Ir opción por opción es innecesario.
Básicamente en esta pestaña configuramos el nivel de compresión de las imágenes así como la configuración de optimizaciones programadas.
También podemos indicar que el plugin de optimización de imágenes ignore aquellas que son muy pequeñas o son demasiado grandes así como ignorar algunas carpetas o no optimizar algunos tamaños autogenerados por WordPress.
Pestaña ajustes de conversión
Por último en esta pestaña podemos configurar los elementos a tener en cuenta para transformar imágenes entre formatos. Normalmente esta parte la dejo sin tocar pues hay que conocer muy bien las imágenes que tenemos desde cero para saber cual puede ser el resultado. Hasta ahora este plugin lo he instalado en webs que ya llevaban tiempo funcionando y he preferido solamente optimizar las imágenes sin hacer conversiones entre ellas.
Optimización en masa
Una vez está todo configurado todas las imágenes que subamos a partir de ese momento pasarán por el optimizador y además podemos hacer una optimización de todo lo existente en la biblioteca multimedia y de las imágenes del theme que estemos usando.
Podemos acceder a esta opción desde el menú de Multimedia.
Concluyendo
Sin duda el plugin EWWW Image Optimizer nos puede servir de gran ayuda para mejorar la WPO de nuestra página web ya que si subimos imágenes optimizadas y luego además el plugin nos las optimiza más aun el tamaño de las imágenes se verá reducido lo que beneficiará la velocidad de carga de la web. Es uno de mis plugins esenciales.
¿Lo has probado? ¿Qué opinas?
10 comentarios en «EWWW Image Optimizer, imágenes optimizadas»
Muchas gracias por el post, me has ayudado mucho, es el más completo y fácil de entender que he encontrado (y te aseguro que he mirado bastante). tengo un blog de decoración y me lleva de cabeza el tiempo de carga, ni te imaginas la cantidad de imágenes que he ido acumulando. de momento las he optimizado con tus consejos (creo que lo he hecho bien) pero todavía me falta resolver algunos problemillas para que la velocidad mejore aún más ahora estoy en 3,99 s.
Lo dicho… muchas gracias!
Muchas gracias Cristina,
un placer poder ayudaros.
Mira, te recomiendo que instales algún plugin de cacheo como W3 Total Cache o WP Rocket, sobre este último tengo un tutorial. Muchas veces con optimizar solamente las imágenes no basta y hay que optimizar el tamaño del código y las llamadas a los ficheros CSS y Javascript.
De todas maneras, para Google menos de 4 segundos empieza a estar bien aunque si puedes intenta reducirlo a la mitad 🙂
Si te puedo ayudar en algo no dudes en preguntarme por aquí o a través del formulario de contacto.
De nada!!! Un placer!!!
Hola Juan, gracias por el aporte. ¿Sabrías decirme si aun diciendo que la compresión es «sin perdida» has notado alguna diferencia? ¿Hay alguna manera para deshacer los cambios una vez estén las imágenes convertidas y borrar todo? Estoy haciendo la optimización y no quiero que al hacerla se vean afectadas las imágenes ya que es una web de fotografía. Por tanto, no se si el plugin las genera y guarda en otro directorio o con un nombre diferente donde pueda borrarlas. Gracias de nuevo.
Hola Antonio!
Cuando indicas la compresión sin pérdida siempre existe un poco.
La verdad es que en el uso que le he dado al plugin normalmente nunca me ha importado que sobreescriba las que ya había por lo que no te se responder exactamente. De hecho en la información oficial del plugin indica que sobreescribe las fotos siempre que logre optimizarlas.
Lo que sí hago siempre es antes de comprimir lo que ya existe me descargo las imágenes al PC por si acaso sucede algo mal, luego ya como la optimización es al vuelo no me preocupo tanto pues dispongo de la foto original.
Si has chafado alguna imagen te recomiendo que hables con la gente del hosting a ver si te pueden reestablecer alguna copia de seguridad.
Un saludo!
Hola!
a mí tb me ha venido de perlas este artículo para el blog que estoy montando, muchas gracias!!! 🙂
Solo me ha quedado una pregunta, posiblemente de novata, he visto en la web del plugin que hay traducción disponible en espanyol. Al activarlo e instalar el plugin lo tengo todo en inglés, podrías decirme cómo activo la traducción espanyola`?
Gracias y saludos,
Inmaculada
Hola Inmaculada, perdona por tardar en contestar.
Cuando la versión de WordPress está en castellano debería salir por defecto en ese español! Mira que los idiomas se hayan subido bien en el plugin y que el idioma del sitio sea Español en Ajustes -> General.
Ya me dices!
Saludos, te escribo desde Venezuela, he encontrado un pequeño problema en el desarrollo de una web de un cliente, y es que por mas que la optimizo no logro evitar el alto consumo de ram que esta generando al servidor, entre todo los recursos de optimización ademas de «WP Super Cache» instalé Ewww Image Optimizer, este se queda pegado durante el proceso de optimización generandome un error (DESESPERADO) sabrás si ese plug in optimiza en tiempo real? Afectara al ram del server?? GRACIAS DE ANTEMANO POR SU COMENTARIO
Hola Anderson,
efectivamente la optimización es en tiempo real pero si no se suben muchas fotos al mismo tiempo no debería afectar demasiado.
Te aconsejo el plugin WPRocket, es de pago pero funciona mucho mejor que los plugins gratuitos.
El EWWW ten en cuenta que también tiene que tener instaladas unas aplicaciones en el servidor.
Un saludo.
¿Que niveles de optimización pones?