3 métodos muy simples y gratuitos para optimizar imágenes en WordPress…

La mayoría de blogs y páginas web necesitan combinar textos poderosos con imágenes impactantes. El texto aporta semántica, ayuda a que Google interprete mejor el contenido; las imágenes enganchan al usuario.

Pero esas mismas imágenes que impulsan tu sitio web también pueden perjudicarlo haciendo que la carga llegue a ser demasiado lenta.

Y es que las imágenes son el principal problema que tienen la mayoría de webmasters.

Primero porque suelen cargarse de mayor tamaño al necesario, segundo porque se usan más de las necesarias y tercero porque la mayoría se suben a WordPress sin optimizar.

Hoy te explicaré el último punto: ¿cómo optimizar las imágenes en WordPress? Pero antes?

Calidad de imagen vs velocidad

En lo que a compresión de imágenes se refiere no hay secretos:

  • Menos calidad = más velocidad.
  • Más calidad = menos velocidad.

Parece obvio, pero a veces se nos olvida.

https://i0.wp.com/wp.servisaberlo.com/wp-content/uploads/2020/09/wordpress-1882120_1280-1024x576.png?resize=580%2C326&ssl=1

Lo que debemos lograr como administradores de sitios web es equilibrar la balanza para ofrecer la mejor experiencia al usuario y convencer a Google.

No sería óptimo ofrecer 7 imágenes totalmente pixeladas para mejorar la velocidad de carga unas milésimas de segundo, como tampoco sería recomendable mostrar esas fotos en máxima calidad. ¿Cómo lograr el equilibrio?

Ver: ¿Cómo mejorar la velocidad de carga web?

¿Cómo optimizar imágenes para WordPress sin plugin?

La mayoría de usuarios de WordPress instalan plugins para todo. Hay que hacerlo con cuidado. Instalar demasiados puede provocar conflictos en el CMS y, sobre todo, ralentizar la carga de la web.

Yo prefiero optimizar las imágenes sin plugins, aunque te adelanto que a nivel de rendimiento no es lo más óptimo.

¿Por qué optimizar las imágenes de WordPress sin plugin?

Por dos razones:

  • Mejoras el SEO.
  • Evitas recargar el WordPress.

La mejora del SEO se produce porque a Google le encantan las imágenes únicas. Con un programa tipo Photoshop y un poco de creatividad puedes crear fotografías únicas a ojos de Google mejorando el SEO de tu web.

Pero este tema daría para otro post y tú estás aquí para optimizar imágenes.

¿Cómo optimizarlas de forma eficiente?

Hay varios programas que pueden servirte para crear ?imágenes SEO? optimizadas en pocos clics. El más popular es Photoshop.

https://i0.wp.com/wp.servisaberlo.com/wp-content/uploads/2020/09/HHH.jpg?resize=580%2C333&ssl=1

Paso 1: abre la imagen que desees optimizar.

Paso 2: comprueba el tamaño que necesitas publicar. Si el ancho de tu web es de 680 píxeles, debes redimensionar la imagen exactamente a ese tamaño, ni más (cargaría lento), ni menos (se deformaría o quedaría pequeña).

Paso 3: ve a ?Imagen? > ?Tamaño de imagen?. En anchura marca el tamaño que comprobaste en el punto anterior y pulsa OK.

Paso 4: pulsa en ?Archivo? > ?Guardar para web?, se abrirá una pestaña para la optimización. En la parte superior derecha selecciona JPEG (o PNG si vas a usar imágenes con transparencias). En Metadatos selecciona ?Ninguno?.

Paso 5: debajo del formato tienes una pestaña con las distintas calidades de imagen: baja, mediana, alta, muy alta y máxima. Selecciona ?alta? y marca la casilla ?optimizado?. Pulsa ?Guardar?.

¿En qué calidad se deben guardar las imágenes para web de Photoshop?

En el tutorial he comentado que selecciones una calidad alta, correspondiente a un nivel de calidad 60.

No es lo más óptimo, pero es un estándar que funciona para todo tipo de imágenes, sin riesgos de fotos pixeladas y con buena experiencia de usuario.

Evidentemente, puedes conseguir una mayor ahorro marcando ?calidad media?, pero ciertas imágenes (sobre todo las de colores planos) aparecerán pixeladas.

Si quieres ir un paso más allá y optimizar al máximo con Photoshop, marca una calidad 50, con esta pequeña reducción conseguirás bajar el peso de las imágenes un 20% extra.

En la mayoría de pruebas que he realizado es un nivel que funciona. Pero como digo, yo prefiero dar un poco de margen (calidad 60) para evitar el pixelado de algunas fotos.

El mejor plugin para optimizar imágenes en WordPress

El líder indiscutible en los que a plugins para optimizar imágenes se refiere es Smush.

https://i0.wp.com/wp.servisaberlo.com/wp-content/uploads/2020/09/fc1377f7e043b0929061e208ed463802-1024x521.jpg?resize=580%2C295&ssl=1

Esta plugin comprime de forma automática, elimina los metadatos, permite optimizar las miniaturas y ofrece la posibilidad de realizar una carga diferida.

Tiene una versión Pro con ventajas añadidas como optimizar todas las imágenes de WordPress en bloque y comprimirlas aún más.

Dicho esto, la versión gratuita es más que suficiente para la mayoría de usuarios.

¿Cómo configurar Smush?

Con solo instalar y activar Smush optimizarás todas las nuevas imágenes que subas a tu WordPress y las miniaturas que se generen. No tienes que hacer nada más.

Si quieres ir un paso más allá en la optimización de imágenes, entra en ?Smush? > ?Escritorio? > ?Carga diferida? y pulsa ?ACTIVAR?.

Las imágenes aparecerán en pantalla cuando el usuario haga scroll hasta ellas, esto hará que la web cargue más rápido corrigiendo la sugerencia ?pospón las imágenes fuera de pantalla? de Google PageSpeed.

https://i1.wp.com/wp.servisaberlo.com/wp-content/uploads/2020/09/Screenshot_1-4.png?resize=580%2C788&ssl=1
Si quieres automatizar la optimización de imágenes para WordPress, usa el plugin Smush

¿Cómo optimizar todas las imágenes de WordPress con Smush?

Si tienes un WordPress antiguo, con muchas imágenes, y quieres optimizarlas todas tienes dos opciones:

  • Optimizar una a una: entra en ?Medios?, pincha en cada imagen y pulsar ?Smush? para comprimirla.
  • Optimiza en bloque: habilita la prueba de la versión Smush Pro para optimizarlas en bloque, entra en ?Reducir por lotes? y clica sobre ?BULK SMUSH AHORA?.

Optimizar imágenes WordPress sin plugin y sin programas

Para optimizar imágenes al máximo no necesitas programas ni plugins, puedes hacerlo accediendo a tinypng.com y arrastrando las imágenes que desees. La web realizará una compresión automática sin que tengas que realizar ningún tipo de ajuste adicional.

https://i2.wp.com/wp.servisaberlo.com/wp-content/uploads/2020/09/Screenshot_2-4-1024x478.png?resize=580%2C271&ssl=1

En las pruebas que he realizado, es el método que mejores resultados me ha dado (superando a Smush y a Photoshop). Tiny lleva la optimización de las imágenes al siguiente nivel, aunque es posible que en algunas notes un leve pixelado.

Si prefieres automatizar la optimización con Tiny, instala su plugin de WordPress. Me gusta un poco menos que Smush, pero comprime más.

Recomendación final

Usa la web tinypng cuando necesites optimizar al máximo (el logotipo, la portada, las secciones más relevantes?). Utiliza Photoshop, o el plugin de Smush, para comprimir el resto de imágenes.