Cómo optimizar imágenes para WordPress en 2022 – Y uso de WebP

Saber optimizar imágenes para tus artículos de WordPress es fundamental para aumentar la velocidad de carga, factor este importante de SEO. Aprende qué es WebP y cómo usarlo.

Optimizar imágenes para WordPress (y cualquier otra plataforma) es muy importante para tu sitio web o blog. ¿Sabes hacerlo? ¿Sabes que existe un nuevo formato de imágenes que se denomina «de próxima generación» o «WebP? De todo esto, y de mucho más, hablamos en este artículo.

[Post actualizado el 09/06/2022]

OPTIMIZAR-IMAGENES-WORDPRESS-WEBP-1024x576 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP

Introducción a optimizar imágenes

GTMETRIX-IMAGENES-1-1024x532 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP

GTmetrix ofrece información sobre las imágenes que requieren una codificación; es decir una reducción del peso en KBs; o bien una mejora en las dimensiones (tamaño) o si podrían convertirse a WebP (formato de próxima generación).

Cada vez es menos frecuente el tener que optimizar una imagen en peso (KBs), ya que la plataforma WordPress es capaz de optimizar las imágenes por sí misma. Por lo que, normalmente, verás solo los mensajes que se muestran en la figura anterior: «Properly size images» y «Serve images in next-gen formats». En este artículo veremos cómo se pueden optimizar los archivos en los tres casos.

Mira la siguiente imagen. La hemos descargado de Squoosh, la herramienta gratuita de Google para optimizar imágenes y convertirlas a los diferentes formatos, incluyendo los de próxima generación. Para ello, entra en Squoosh.app, haz clic en la pequeña imagen que dice «Large photo (2.8 MB)» y pulsa en el icono de descarga de la parte izquierda de la pantalla (la que corresponde a la imagen original).

PANDA-1024x685 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP

Tiene aproximadamente 3MB de tamaño original. Se puede decir que es una imagen desoptimizada al 100%.

Es una imagen de tipo JPG. Pero no sería buena idea emplearla en nuestro sitio web o blog directamente. La velocidad de carga de una página que contuviese esa imagen sería mala con ese tamaño de archivo.

No entra dentro de los propósitos de este artículo, extendernos por los detalles de los distintos tipos de archivos de imagen. Si necesitas más información acerca de ello, acude a este post de la Wikipedia.

WordPress es capaz de optimizar las imágenes por sí misma

WordPress ya es capaz de optimizar por sí mismo las imágenes, sin necesidad de instalar ningún plugin. Si examinas el tamaño de esa imagen del Panda, una vez subida a la biblioteca de medios, observarás una reducción drástica de su número de bytes.

¡Eso es fantástico, porque nos va a ahorrar casi todo el esfuerzo a la hora de optimizar las imágenes!

Optimización de imágenes en WordPress en dimensiones y peso

Debes tener en cuenta la optimización de tus imágenes, de cara al SEO, ya que son las grandes causantes del retraso en la carga de las páginas. Por ejemplo, los expertos dicen que un segundo de retraso puedes causar una reducción del 11 % en las páginas vistas.

Optimizar imágenes (mejorarlas en peso o dimensiones, incluso usar WebP) no es el problema. Eso es relativamente sencillo. El problema realmente es:

  1. Configurar WordPress para que el funcionamiento de las imágenes sea el correcto, desde el punto de vista del rendimiento. Esto, a grandes rasgos, significa hacer que WordPress trabaje con una única versión de cada imagen subida y que ésta tenga las dimensiones adecuadas o, lo que es lo mismo, que no se escale. Esto lo veremos en el apartado siguiente «Cómo gestiona WordPress las imágenes».
  2. Saber determinar qué imágenes están dando problemas para poder corregirlo. En este caso, usaremos la herramienta Lighthouse.

Cómo gestiona WordPress las imágenes

Volvamos a nuestra imagen de ejemplo (photo.jpg) de 3MB. Si la subimos a un WordPress que no tenga instalado ningún plugin de optimización de imágenes, ni otra herramienta para ese propósito *; y vamos al Administrador de Archivos de nuestro hosting (carpeta wp-content/uploads), observaremos lo siguiente.

(*) Incluso se ha quitado la optimización automática de WordPress con la instrucción:
add_filter( ‘big_image_size_threshold’, ‘__return_false’ );

PHOTO-VERSIONES-WORDPRESS-2-1024x405 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP
Lista de archivos que se crean en WordPress cuando se sube una imagen. El número de estos y sus dimensiones dependen de varios factores. Están en wp-content/uploads pero si se ha elegido la opción de dividir por fecha en Ajustes>Medios tendrás que navegar por año y mes para encontrarlos.

El archivo original es el último que pesa 3MB y no se ha optimizado al subirse porque no hay ningún plugin ni opción en el hosting a tal efecto. Como hemos visto, un poco más arriba (*), se ha quitado la optimización automática de WordPress. El resto de archivos que se muestran en la figura anterior los ha creado WordPress **, son mucho más pequeños y se utilizan dependiendo de las distintas dimensiones que se necesiten según el tema instalado y activo.

(**) Esto se configura en dos sitios. En primer lugar, en Ajustes>Medios del dashboard de WordPress, aunque las dimensiones finales es probable que se adapten según el ratio que posea la imagen originalmente.

PHOTO-VERSIONES-WORDPRESS-3-1024x515 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP
La imagen original que hemos subido a WordPress posee grandes dimensiones (3872×2592) y un peso bastante notable (3MB). Sin embargo, es preciso tener en cuenta qué hace WordPress para mostrar esta imagen dentro de los distintos sitios del tema.

Por lo tanto, aunque se ha subido una imagen de dimensiones 3872×2592 y de peso 3MB, en el tema es probable que ni tenga esas dimensiones ni ese peso, dependiendo de la página y el lugar donde se muestre.

PHOTO-VERSIONES-WORDPRESS-4-1024x556 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP

Puedes hacer clic en el botón derecho del ratón para obtener el menú de opciones, dentro de la imagen, y luego en «Inspeccionar» con objeto de alcanzar a ver las dimensiones reales que posee. En nuestro ejemplo, en ordenador la imagen, la muestra el tema con unas dimensiones de 720×482.

Aunque eso es un automatismo que le gusta a WordPress, no es del gusto de Google y se penalizará en los test de rendimiento Lighthouse. Lo que deberíamos hacer para contentar a todos es crear una imagen de 702×482 y subirla para ese propósito. Si el tema usa otras dimensiones en otro sitios, actuaríamos igual.

Y para rematar, tal vez tengamos que deshabilitar la posibilidad en WordPress de crear todos los archivos (basta con poner a cero todos los tamaños de imágenes en Austes>Medios) y hackear el theme *** para que no añada más tamaños de imágenes. Aunque eso no evitará el redimensionamiento.

(***) Ya he puesto a cero los tamaños en Ajustes>Medios pero siguen apareciendo archivos en el Administrador de Archivos, ¿cómo puedo eliminarlos todos excepto el original?
En primer lugar, instala el plugin Regenerate Thumbnails que te dará los nombres de todos los archivos. Luego, usa el snippet en functions.php que se muestra a continuación.

PHOTO-TAMANO-MINIATURAS-1024x354 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP
El plugin Regenerate Thumbnails nos da el nombre de todos los archivos que se crean en WordPress cuando se sube una imagen, bien porque estén puestos en Ajustes>Medios o en la configuración del theme.
archivo-4-1-1024x339 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP
Este es el snippets que, dentro de functions.php, eliminará la creación de todas las copias de la imagen original. Solamente hay que poner en unset los nombres de los archivos que se han obtenido en Regenerate Thumbnails.

Usando Lighthouse

Si ejecutamos el test Lighthouse veremos lo siguiente, dentro del apartado de «Oportunidades».

LIGHTHOUSE-PHOTO-1-1024x850 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP
Lighthouse ofrece, tanto para móviles como para escritorio, información detallada de qué imágenes hay que optimizar.

En la figura anterior, fíjate en relacionado con la imagen:

  • Usa un tamaño adecuado para las imágenes. Muestra imágenes con un tamaño adecuado para ahorrar datos móviles y mejorar el tiempo de carga. Más información. Idealmente, tus páginas nunca debería mostrar imágenes que sean más grandes que la versión que se muestra en la pantalla del usuario. Cualquier cosa más grande que eso solo resulta en bytes desperdiciados y ralentiza el tiempo de carga de la página. Hay muchas formas de resolver esto. La clave está en el tema que estés utilizando. Averigua las dimensiones con las que se muestra la imagen en tu tema y crea una versión ajustada de la imagen para subirla con las dimensiones adecuadas.

El test Lighthouse es, por lo tanto, un buen recurso para averiguar qué imágenes tienes que optimizar y cómo; es decir si debes convertirlas a un formato de próxima generación (WebP, por ejemplo), crearlas con las dimensiones exactas tal como se muestran en pantalla y si hay que reducir el tamaño en bytes del archivo correspondiente.

En el ejemplo que nos ocupa, crearemos una imagen de 720×482 a partir de la original (esto lo puedes hacer muy fácilmente con Canva.com) y la subiremos de nuevo a WordPress sustituyendo a la anterior. Es mejor realizarlo desde el editor (aprovechando para borrar la original) para que se eliminen y creen todas las versiones del archivo en las distintas miniaturas.

Normalmente, eso servirá también para corregir el error en móviles, eliminando el aviso correspondiente en Lighthouse.

Escalado automático de WordPress

Si quitamos la instrucción que metimos en functions.php y que eliminaba la optimización automática y volvemos a subir el archivo grande de 3872×2592, vemos que se crean los siguientes:

PHOTO-VERSIONES-WORDPRESS-5-1024x434 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP

El archivo photo-scaled.jpg es la versión optimizada automáticamente por WordPress y que tiene menor tamaño en dimensiones y mejor codificación (solo 644 KB).

El resto de versiones también las crea automáticamente WordPress y eso vimos que se puede ahorrar mediante el snippet mostrado anteriormente. Eso sería lo más idóneo: tener solo dos versiones, la original y, si acaso, la optimizada por WordPress.

Compresión de archivos

Podemos utilizar algún sistema de mejora de la codificación o, lo que es lo mismo, reducir el peso en KBs de los archivos. Dependiendo de nuestro hosting, esto probablemente se pueda hacer masivamente y con un clic. En SiteGround simplemente tenemos que entrar en la configuración del plugin SG Optimizer para llevarlo a cabo. Y el resultado es el siguiente para el ejemplo:

PHOTO-VERSIONES-WORDPRESS-6-1024x434 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP

Vemos que la imagen photo-scaled.jpg ha pasado de 644KB a 163KB.

Hay muchas herramientas y plugins para optimizar el peso de las imágenes. Ya hemos hablado también de Squoosh.app con la que podrías realizar este tipo de optimización antes de subir la imagen a WordPress. Pero, realmente, en la mayoría de los casos ya no es necesario porque, como hemos visto, la plataforma WordPress es capaz de optimizar bastante por sí misma.

Resumen optimización imágenes en dimensiones y peso

En resumen, para optimizar:

  • Dimensiones. Eliminar versiones que crea WordPress automáticamente y crear archivos con el tamaño exacto que requiere el tema. En un blog, por ejemplo, tendremos normalmente solo dos tipos de imágenes, cada una con sus dimensiones: la destacada (que se muestra en la página de inicio o página con las entradas) y otra normal para insertar dentro de la publicación. Si hay más tipos, tratar siempre de obtenerla con las dimensiones exactas con las que el tema las visualiza. Usa el inspector de las herramientas para el desarrollador, en tu navegador, con el fin de averiguar esas dimensiones exactas y luego utiliza Canva.com para crear las imágenes a partir de las originales.
  • Peso (codificación). Seguramente no tengas que hacer nada porque WordPress ya se encarga de optimizar. Averigua si tu hosting te proporciona una herramienta de compresión (para imágenes existentes y las nuevas); y, en ese caso, prueba a ver si se obtiene una mejora sustancial sin perder calidad. Y siempre puedes considerar utilidades del estilo de Squoosh.app con el fin de optimizar antes de subir.

Qué es el formato WebP y cómo usarlo para optimizar el rendimiento de tu sitio web

Utilizar imágenes WebP es muy recomendable a la hora de afinar la optimización del rendimiento de una página web.

En este apartado veremos qué son los formatos de próxima generación (WebP, AVIF), la manera de servir las páginas de un sitio web en estas extensiones, cómo comprobar si una página en concreto está proporcionando los archivos de las imágenes en WebP y cómo afecta todo ello en los análisis de rendimiento de herramientas del estilo de Lighthouse.

¿Qué es WebP?

Según la Wikipedia, WebP es un formato gráfico en forma de contenedor, que sustenta tanto compresión con pérdida como sin ella. Lo está desarrollando Google, basándose en tecnología adquirida con la compra de On2 Technologies. Como derivado del formato de vídeo VP8, es un proyecto hermano del formato WebM, y está liberado bajo la licencia BSD.

Google denomina a WebP formato de próxima generación y si ejecutas Lighthouse sobre una de tus páginas web, probablemente veas el siguiente mensaje («Serve images in next-gen formats»).

AVISO-LIGHTHOUSE-NO-WEBP-1024x547 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP

Lo cual indica que en esa página web no se están sirviendo imágenes de próxima generación (WebP). Google penaliza mucho, en ese caso, la calificación del test de Lighthouse, más aún que si el tamaño (en KBs) del archivo es muy grande.

Una manera, por lo tanto, de afinar la optimización del rendimiento de una página web es reducir el tamaño de las imágenes sin perder calidad; y eso se consigue fácilmente con WebP.

Cómo servir imágenes en formato WebP

Por lo tanto, se trataría de trabajar solo con el formato WebP. Para ello, podemos empezar de cero generando todas nuestras imágenes en esa extensión. Si las aplicaciones que utilizamos no exportan en WebP, existe la posibilidad de convertirlas, antes de subirlas a WordPress, con recursos online del estilo de squoosh.app.

WordPress permite el uso de WebP desde la versión 5.8, así que no debe existir ningún problema.

Pero, si posees un sitio web o un blog desde hace mucho tiempo, lo mejor es llevar a cabo una conversión masiva la primera vez. Hay herramientas que nos pueden ayudar a realizar esta importante labor. A continuación veremos un par de ellas y, de paso, repasaremos algunas cuestiones necesarias relacionadas con WPO (optimización del rendimiento web).

Antes de ver cómo servir imágenes en formato WebP, veamos cómo medir el nivel de optimización del rendimiento de una página web.

Cómo medir el nivel de optimización del rendimiento de una página web

Como hemos visto, Lighthouse es la opción de Google para medir el nivel de optimización del rendimiento de una página web. Esta herramienta está integrada en Google Chrome, bien a través de las herramientas para desarrolladores o bien mediante la correspondiente extensión.

Lo más rápido es utilizar las herramientas para desarrolladores con el fin de analizar el nivel de optimización del rendimiento con Lighthouse.

Lighthouse presenta avisos de los errores que más afectan al rendimiento, tanto para móviles como para escritorio, y consejos concretos de mejora. En el caso que nos ocupa, nos fijaremos principalmente en uno de los avisos que veíamos en una figura anterior:

  • Servir en formato WebP o AVIF (Serve images in next-gen formats)

Otro importante, como hemos visto en esta guía es el de «Reducir el tamaño (Properly size images)», se refiere a las dimensiones y has aprendido en la primera parte de este artículo a eliminar este mensaje y optimizar en ese sentido.

Si haces clic en los avisos, verás los elementos que están penalizados, sabiendo por ejemplo qué imágenes en particular deben ser optimizadas.

GTmetrix es una buena alternativa porque ofrece mucha información, y está basada en Lighthouse, pero solo está preparada para los dispositivos de escritorio.

Cómo comprobar que tipo de imágenes se están sirviendo en una página web

Las herramientas para desarrolladores también poseen una opción para comprobar en qué tipo de formato se está sirviendo cada imagen que tiene la página.

Sigue los pasos a continuación:

  1. Inicia Dev Tools en tu navegador (Ver > Opciones para desarrolladores > Herramientas para desarrolladores)
  2. Ve a la pestaña «Red» y activa el filtrado para «Img» (Imágenes).
  3. Actualiza la página que está mostrando el navegador.
  4. Verifica la lista de imágenes cargadas. Ten en cuenta la columna «Tipo» que mostrará el «Mime Type» del archivo. Para el caso que nos ocupa, en esa columna veremos «WebP» o «AVIF» si la página está sirviendo archivos de próxima generación.
¿Qué es Mime Type?

En realidad, lo que define exactamente la naturaleza de un archivo no es su extensión (jpg, png, etc.) sino lo que se denomina su tipo MIME. MIME (Extensiones multipropósito de Correo de Internet, por sus siglas en inglés) es un estándar regulado por la Autoridad de Números Asignados de Internet (IANA).

Los navegadores a menudo usan el tipo MIME (y no la extensión de archivo) para determinar cómo procesará un documento; por lo tanto, es importante que los servidores estén configurados correctamente para adjuntar el tipo MIME correcto al encabezado del objeto de respuesta. Así que el tipo MIME es una especie de metadato que lleva dentro el archivo y que, independientemente de su extensión y URL, define de qué tipo de archivo se trata.

Cómo servir imágenes WebP en SiteGround con su propio sistema

Si tu sitio web se aloja en SiteGround estás de suerte porque este hosting proporciona una opción para usar imágenes WebP con un clic.

Simplemente, acude a los ajustes de medios del plugin SG Optimizer y activa la opción de «Usar imágenes WebP». Por el hecho de activarlo, se convertirán todos los archivos existentes a WebP. A partir de ese momento, cualquier imagen nueva que subas a tu WordPress se convertirá también a WebP.

Hay que destacar que para que esta herramienta funcione bien, es preciso tener activada la función de Nginx dentro del apartado «Velocidad > Cache» del panel de control de SiteGround.

Las versiones con extensión .webp se crean dentro de la carpeta de «Uploads» donde se encuentran los archivos originales. Si desactivas el uso de WebP se borran todos los archivos con extensión .webp.

Posibles incidencias a la hora de convertir imágenes al formato WebP

Hay que tener en cuenta que no se cambian las URL de las imágenes, por lo que al mirar la fuente del sitio web, verás las URL de las imágenes originales siempre. El sistema crea redirecciones a archivos de salida en formato WebP, cambiando el tipo MIME de estas imágenes, pero sin cambiar la URL.

El mecanismo no modifica las imágenes originales, solo su tipo MIME. Cuando el navegador carga una imagen, se verifica si es compatible con el formato WebP. Si es así, se carga la imagen en formato WebP.

Es posible que algunas imágenes no se conviertan. Por ejemplo, si el archivo convertido es más grande que el original o por cualquier otra razón.

¿Qué es Ningx Direct Delivery?

El objetivo de SiteGround, y de otros servicios de alojamiento web del mismo estilo, es que los sitios web de su clientes carguen más rápido que nunca. Y en ese sentido, se implementó Nginx Direct Delivery.

Nginx Direct Delivery es un método para servir contenido estático de tu sitio web utilizando funciones de Nginx. Nos permite eliminar el contenido estático de la memoria del servidor, pero aún así encontrarlo y servirlo súper rápido directamente desde el NGINX, omitiendo la comunicación con el servidor web Apache.

Según la Wikipedia, Nginx fue inicialmente desarrollado con el fin explícito de superar el rendimiento ofrecido por el servidor web Apache. Sirviendo archivos estáticos, Nginx usa dramáticamente menos memoria que Apache, y puede manejar aproximadamente cuatro veces más solicitudes por segundo. Este aumento de rendimiento viene con un costo de disminuida flexibilidad, como por ejemplo la capacidad de anular las configuraciones de acceso del sistema por archivo (Apache logra esto con un archivo .htaccess, mientras que Nginx no tiene desarrollada tal funcionalidad).

Como se indicó un poco más arriba, es necesario tener activado Nginx con el fin de poder usar el formato WebP en SiteGround.

Cómo servir imágenes WebP con el plugin «WebP Converter for Media»

Si tu web no está alojada en SiteGround y el hosting no posee la herramienta para usar WebP, hay un plugin muy eficaz que es WebP Converter for Media.

Este plugin requiere modificaciones a nivel de configuración de Nginx, por lo que si estás en un servidor compartido tu única posibilidad es desactivar Nginx.

Una vez regeneradas todas las imágenes la primera vez, el funcionamiento interno es semejante al de SiteGround.

La única diferencia es que los archivos se crean en otra carpeta diferente a la de «Uploads». Si desactivas y borras el plugin, el contenido de esa carpeta desaparece. Si solo lo desactivas, el contenido se conserva pero no se sirven archivos WebP.

Resumen uso de WebP

El plugin WebP Converter for Media es una buena opción si tu hosting no es SiteGround. Pero para tomar una decisión final, habrá que evaluar el impacto en Lighthouse producido por la adopción de un sistema u otro.

  • Si tu hosting es SiteGround, activa Nginx y el uso de WebP.
  • Si tu hosting no es SiteGround, averigua si se proporciona una herramienta de uso de WebP. En caso negativo, implementa el plugin WebP Converter for Media.
  • WebP Converter for Media no funciona en Nginx, a no ser que hagas cambios en la configuración de éste sistema y eso no es posible hacerlo en servidores compartidos. Pero Nginx te puede proporcionar mayor optimización del rendimiento en general.
  • Utiliza Lighthouse para analizar el nivel de rendimiento en uno caso u otro y saber que imágenes concretas están dando problemas, bien porque no estén en WebP o porque sean demasiado grandes. En este último caso, puedes emplear Squoosh.app u otras herramientas para reducir lo máximo posible el tamaño y sustituir los archivos problemáticos.
  • Comprueba que tanto el plugin como el servicio que utilices (como por ejemplo el de SiteGround) sirve las imágenes en formato WebP después de activarlo.

Mejora del tiempo de respuesta con el plugin Cache Enabler

Es probable que Lighthouse avise acerca de una mejora en el tiempo de respuesta del servidor. Esto no tiene que ver directamente con la optimización de imágenes pero puede aparecer en caso de que se usen muchas o por otras razones.

En cualquier caso, independientemente del sistema de almacenamiento en caché que uses, prueba a activar el plugin con la configuración por defecto. En condiciones normales, verás desaparecer el mensaje de Lighthouse, habiendo optimizado el rendimiento.

Conclusiones

Para optimizar imágenes para WordPress (y, en realidad, para cualquier plataforma) no es necesario romperse la cabeza. No hagas caso de las típicas recomendaciones del estilo «20 plugins para optimizar imágenes». Eso sirve para poco.

En este artículo has aprendido a optimizar imágenes con un método eficaz y con un par de consejos muy sencillos y fáciles de poner en marcha.

Y aún hay más…

Cómo se hace un sitio web

Una revisión a vista de pájaro de todo lo necesario para crear un sitio web de WordPress.

Recursos

La lista de recursos recomendada en Blogpocket.

Mi lista de plugins

La lista de plugins de WordPress recomendada en Blogpocket

¿Estás buscando hosting?

COVER-UN-BLOG-DE-21-ANOS-1024x944 Cómo optimizar imágenes para WordPress en 2022 - Y uso de WebP

Suscríbete a la newsletter

En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.

Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.

32 comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a SiteGround que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

  1. Gracias por el post Antonio!

    Una duda, no veo las imagenes con formato webp en las miniaturas dentro de la biblioteca de medios, o algo he hecho mal…
    Después de instalar el pluging wp-webp, activarlo y descargar el pluging cache enabler y activarlo marcando la casilla de compatibilidad con webp, subo la imagen ya convertida al formato webp y mi WordPress me deja subirla pero no se ve la miniatura en la biblioteca de medios. Si uso la foto en una pagina si me sale en la ella pero no en la biblioteca de medios.

    Sabes si debo hacer algo mas?

  2. Hola muchas gracias por compartir la información, cuando subo el formato me muestra lo siguiente:
    Lo siento, este tipo de archivo no está permitido por motivos de seguridad.
    Que puede ser?
    Estoy trabajando en el servidor, por que localmente si funciona
    Gracias

  3. Si tengo en wordpress mas de 5000 imagenes, como puedo dentro del propio wordpress modificar el formato y no tener que descargar y modificar una a una las imagenes y volverlas a subir a wordpress.

    Gracias

  4. Hola Antonio,

    antes de nada gracias por el artículo.

    Tenía un par de preguntas, sabes si puedo reducir tamaños de las imágenes con plugins como Smush PRO o WP Ropcket o por el contrario es mejor que retoque el tamaño de las imágenes que vaya a utilizar en una web externa y después subirla al wordpress de turno?

    Por otro lado, conoces algún método para reducir el numero de peticiones y de peso de vídeos que incrusto en algunas de mis webs?

    Gracias y de nuevo enhorabuena por el genial artículo!

    • Hola Manuel. Lo mejor es que pruebes qué nivel de reducción (optimización) logras en cada caso. Si con Smush Pro o WP Rocket consigues más reducción que por ejemplo con Squoosh.app (web externa desarrollada por Google muy recomendable) debes usar aquellas porque además aportan automatización. Yo tengo activada la opción de optimización automática de imágenes de SiteGround y no me preocupo de más. En cuanto a los vídeos desconozco herramientas para optimizar, que no sean los parámetros de codificación normales para crear un vídeo de calidad aceptable. Lo aconsejable, en el caso del vídeo y WordPress, es utilizar un plugin como Video Pop-up con el fin de no cargar el vídeo hasta que no se haga clic para verlo. Eso reduce el tiempo de carga de la página que es lo importante. Un saludo 🙂

  5. Hola

    Después de ver tu artículo, tengo una duda.

    Qué pasa si tienes un blog con muchos artículos y muchas fotos dentro de los artículos.

    Sólo optimizar en el formato Wep/JPGXR o el que sea, las fotos de la portada? o tienes que optimizar las fotos de todos los artículos?

    Gracias

    • Interesante pregunta Pascual y muchas gracias por el comentario. Todas las imágenes deben ser optimizadas, estén en el formato que estén. Un artículo con muchas imágenes, sin duda será penalizado en rendimiento y, por lo tanto, cada una debe optimizarse al máximo. Saludos :))

  6. Gracias por el tutorial, pero me surge una duda. Al ver la informacion de imagen en firefox, depende del tamaño de la ventana, porque si está mas pequeña salen otras dimensiones. Si las redimensiono al tamaño de mi pantalla, y alguien las ve en una pantalla mas grande que pasa?
    Gracias!

    • Hola Estefania. Tú tienes que hacer la imagen con las dimensiones de una página de escritorio (ordenador) estándar que es lo que la mayoría de los usuarios tienen. Si alguien la ve en un dispositivo con tamaño de pantalla mayor quizá se pixele y se vea mal, pero si piensas en dimensiones normales no habrá problema. Un saludo 🙂

  7. Hola Antonio, ante todo gracias por el contenido. perdona por las molestias, te iba a preguntar donde puedo conseguir estos códigos para htaccess y functions? escribiendo yo me sale error 500. Muchas gracias.

  8. hola disculpa xq en tu articulo no veo las imágenes de próxima generación

    me gustaria una repuesta honesta

    se supone que ahorra bits y tiempo de carga, pero no veo que lo implementas
    Eh visto (png y pjeg, pero NO de próxima generación

    • Hola Pedro. En el artículo se trata de ofrecer la visión más amplia del tema. No uso webp por dos razones básicamente. Una, todavía existen navegadores que no dan soporte de manera nativa. Y otra, más importante, que Blogpocket.com arroja resultados excelentes en la optimización del rendimiento sin necesidad de ese ajuste fino. Muchas gracias por la pregunta. Saludos :))

      • Hola muchas gracias se entendió claramente

        en todo caso muchas gracias ahora haré así

        1) especificar dimensiones a las imágenes
        2) optimizarlas con adobe photoshop
        3) antes de subir a wordpress pues optimizarlas ahora con –> Squoosh
        4) ya dentro de mi galería de imágenes ps usar un optimizador

        creo que entendí todo, y me vi el video fue muy explicado. Muchas gracias. La verdad no conocía Squoosh –> thanks you

        saludos cordiales sip

  9. Hola, Gracias por toda la información, la he utilizado para optimizar las imágenes de mi sitio web de WordPress (e-commerce), lamentablemente he encontrado un error:

    -Al publicar imágenes .webp en las entradas y paginas no hay problema (las imágenes se ven y tengo la posibilidad de cambiar su tamaño).
    -Al utilizar una de estas imágenes como imagen de un producto en woocommerce la imagen no se muestra ni en el slider de producto ni en la descripcion, he «inspeccionado» el código HTML para saber que sucede y he encontrado que las imágenes .webp se postean allí con un tamaño de 1px por 1px.

    Quisiera saber si hay alguna solución para que las imágenes se publiquen en los productos de woocommerce con el tamaño original. Muchas gracias.

    • Hola Wilson. Hay que tener en cuenta que el formato webp todavía no es compatible con todos los navegadores y productos. Tendrías que comprobar primero si has permitido a WordPress tratar webp y, luego, qué navegador estás utilizando. De todas formas voy a investigar por si hubiese alguna incompatibilidad con woocommerce. Un saludo 🙂

      • Muchas gracias por la respuesta, la verdad las imagenes .webp están funcionando correctamente en las entradas y paginas de wordpress, el problema esta solo en la utilización de estas dento de woocommerce. También seguiré buscando, si tengo alguna solución igual la comunico ya que podría servirle a alguien que pase por lo mismo. Gracias

  10. Muchas gracias por tu ayuda. Soy nueva en esto de la creación de páginas web. Empecé solo por el deseo de comunicar un poco de lo que he aprendido sobre vinos en la formación en Enología y he pasado por tanto aprendizaje de este nuevo mundo. Mi proyecto es: eneseorden punto com

    Cuando pensaba que ya tenía la página en condiciones para mostrarla al mundo, noto que carga muy lento y ahí a empezar de nuevo a buscar respuestas, a leer e intentar mejorarla.

    Tu post ha sido de gran ayuda, gracias.

  11. Hola Antonio genial artículo, muchas pequeñas (y no tan pequeñas) lecciones para llevar a la práctica de inmediato (entre otras, todo un descubrimiento lo de squoosh).

    Sin embargo me queda todavía alguna pequeña duda. Está claro que lo mejor es subir a wordpress las imágenes ya formateadas (tanto en tamaño, como en peso, como en formato). Pero ¿cuál es el tamaño adecuado?

    No se si el truco que comentas de firefox es aplicable a todo el mundo, no solo porque para cada dispositivo te puede salir un tamaño diferente, sino porque te obliga a trabajar dos veces (subir la imagen sin optimizar, ver las dimensiones en firefox, corregirla y volver a subirla).

    ¿Puede tener que ver el tamaño que configures en el apartado Ajustes -> Medios? Realmente ¿no se puede saber a priori los tamaños que utiliza por defecto tu theme?

    Muchas gracias y enhorabuena por el artículo.

    • Hola Álvaro y gracias por el feedback. En cuanto a tu pregunta, la documentación del theme en cuestión debería indicar cuáles son los tamaños para cada caso. Pero si me pides otro «truco», es el de subir siempre las imágenes más grandes en dimensiones que lo que presenta el theme en escritorio y dispositivos móviles. Seguramente, eso implica que GTMetrix te avise de que hay una redimensión que puedes posteriormente ajustar creando las imágenes justo con esas dimensiones. Es un poco laborioso pero, ya verás, que al final no es para tanto. Un saludo 🙂

  12. Muy buen post. Queda todo super bien resumido. La verdad que con estos tips se aligera mucho la carga de la web. Normalmente como diseñador web, subo las imágenes adaptadas con Photoshop, pero las imágenes de próxima generación hacen que la web pese mucho menos la web y así cargue antes.

    Una vez más enhorabuena.

Ir al contenido