TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo solucionar el problema de las imágenes de servicio en formatos de próxima generación en WordPress?

236

Google es el motor de búsqueda dominante entre los usuarios de habla inglesa. Debido a este hecho, los propietarios de sitios de WordPress siguen seriamente las pautas y oportunidades que se muestran en la herramienta Google PageSpeed ​​Insights. Uno de los mensajes de advertencia más populares en la herramienta PageSpeed ​​es corregir las imágenes servidas en formato tradicional en imágenes del servidor en formatos de próxima generación. En este artículo, explicaremos cómo corregir esta advertencia en los sitios de WordPress para optimizar sus imágenes.

Relacionado: ¿Cómo corregir el cambio de diseño acumulativo en WordPress?

Advertencia en Google PageSpeed ​​Insights

Vaya a la página de la herramienta Google PageSpeed ​​Insights y pruebe la URL de su página web. Debería ver una oportunidad que muestra "Imágenes de servidor en formatos de próxima generación" como a continuación. Puede ver el ahorro de tamaño potencial para cada imagen y el ahorro estimado en el tiempo de carga de la página.

¿Cómo solucionar el problema de las imágenes de servicio en formatos de próxima generación en WordPress?

PageSpeed ​​Warning Sirve imágenes en formatos de próxima generación

Nota: Google dice que esta es una oportunidad y no afectará la puntuación de rendimiento de PageSpeed. Sin embargo, eliminar esta advertencia aumenta considerablemente la puntuación en la realidad.

Formatos de imagen Next-Gent

Antes de continuar, debe comprender los formatos de imagen. Hay tres formatos de imagen tradicionales y populares:

  • Grupo conjunto de expertos en fotografía (JPEG o JPG): admite compresión con pérdida
  • Gráficos de red portátiles (PNG): admite compresión transparente y sin pérdidas y reemplazo de GIF
  • Formato de intercambio de gráficos (GIF): un formato de mapa de bits admite el bucle de varios fotogramas.

Ahora, hay nuevos formatos de próxima generación recomendados para sitios web:

  • WebP: desarrollado por Google para una mejor compresión
  • JPEG 2000: mejora de los estándares JPEG en la compresión de imágenes
  • JPEG XR: formato de rango extendido JPEG desarrollado por Microsoft

Puede consultar la galería de Google para comparar visualmente varias imágenes. Los formatos de próxima generación ayudan a reducir considerablemente el tamaño de las imágenes aumentando así la velocidad de carga de la página. Según Wikipedia, el 92% de los navegadores admiten el formato WebP, lo que lo convierte en un sustituto prometedor del formato tradicional. Por lo tanto, debe comenzar a usar el formato WebP para deshacerse de las imágenes de servicio en los formatos de próxima generación que advierten en la herramienta PageSpeed ​​Insights.

Conversión de formatos de imagen

Aunque Google impulsa el formato de imagen ligero, no son muy populares entre los desarrolladores de aplicaciones. Muchas aplicaciones no admiten la creación de imágenes en estos formatos. Por ejemplo, SnagIt, la popular herramienta de captura de pantalla para bloggers, no ofrece ninguna opción para crear imágenes en formato de próxima generación. Puede crear en formato tradicional como PNG o JPEG.

Ahora que es difícil encontrar una aplicación para crear formatos de imagen de próxima generación. En su lugar, puede cargar imágenes PNG o JPEG en su sitio de WordPress y usar un complemento para convertirlas en uno de los formatos de imagen de próxima generación. Esta es una forma fácil y eficaz, ya que no necesita cambiar su modelo de trabajo.

Dado que Google es el propietario propietario del formato WebP, muchos complementos admiten la conversión de imágenes tradicionales al formato WebP. Aquí, explicaremos cómo convertir sus imágenes a WebP y corregir "servir imágenes en formato de próxima generación" en la herramienta PageSpeed ​​Insights.

Complementos WebP para WordPress

Hay bastantes complementos populares disponibles para la conversión WebP.

SG Optimizer para SiteGround

Si está alojando en SiteGround, la mejor opción es utilizar el complemento SG Optimizer. Esto funcionará de inmediato para convertir y servir imágenes WebP desde su servidor. Puede elegir el nivel de compresión para controlar la calidad de las imágenes convertidas conservando todas las imágenes originales. Consulte nuestro artículo anterior sobre cómo servir imágenes WebP en SiteGround.

  • Simplemente puede habilitar la opción "Generar copias WebP de nuevas imágenes" en la sección "Optimizador de SG> Optimización de imagen".
  • Haga clic en el botón “Generar archivos WebP a granel" para generar imágenes WebP para todas sus imágenes existentes con un nivel de compresión con pérdida predefinido o sin pérdida.

¿Cómo solucionar el problema de las imágenes de servicio en formatos de próxima generación en WordPress?

Opción WebP en el complemento SG Optimizer

Oferta de SEO: Optimice su sitio con la prueba gratuita especial de 14 días de Semrush Pro.

Smush Pro

Smush es otro complemento de compresión de imágenes popular con más de 1 millón de instalaciones activas. Sin embargo, WebP es una opción premium en este complemento y debe pagar una suscripción de $ 5 por mes (plan anual) para usar esta función.

¿Cómo solucionar el problema de las imágenes de servicio en formatos de próxima generación en WordPress?

Opción Smush Pro WebP

Autoptimizar

Este complemento ofrece optimización de imágenes sobre la marcha con conversión WebP utilizando el servicio ShortPixel CDN. Aunque esta es una buena opción para combinar CDN y WebP, hay una trampa. Tiene un límite de publicación de hasta 100 imágenes por mes de forma gratuita. Si necesita más, debe pagar $ 3.99 por mes para comenzar el plan premium de hasta 5000 imágenes. Esta será una opción costosa cuando desee comprimir y publicar una gran cantidad de imágenes. Si desea probar Autoptimize, después de instalar y activar el complemento, vaya a la sección "Configuración> Autoptimize> Imágenes".

  • Active la casilla de verificación "Optimizar imágenes".
  • Elija el nivel de optimización de la imagen como brillante, sin pérdida o con pérdida.
  • Marque la casilla que dice "¿Cargar WebP o AVIF en navegadores compatibles?"
  • Habilitar "¿Imágenes de carga diferida?" caja.

¿Cómo solucionar el problema de las imágenes de servicio en formatos de próxima generación en WordPress?

Configuración de WebP en el complemento Autoptimize

Haga clic en el botón "Guardar cambios" y pruebe la herramienta PageSpeed ​​Insights de su sitio. Debería ver que la advertencia "Publicar imágenes en formatos de próxima generación" ha desaparecido ahora. Sin embargo, comenzará a ver un mensaje de advertencia en el panel de administración de WordPress de que se está usando su cuota de ShortPixel y le pedirá que actualice el plan.

Complementos WebP gratuitos

Afortunadamente, hay pocos complementos gratuitos disponibles como WebP Express y WebP Converter for Media. En este artículo, explicaremos el proceso con el complemento WebP Converter for Media.

Instalar WebP Converter for Media Plugin

Inicie sesión en su panel de administración de WordPress y navegue hasta la sección "Complementos> Agregar nuevo". Escriba "webp" en el cuadro de búsqueda para filtrar los resultados y descubrir el complemento WebP Converter for Media. Haga clic en el botón "Instalar" y luego active el complemento en su sitio.

¿Cómo solucionar el problema de las imágenes de servicio en formatos de próxima generación en WordPress?

Instalar WebP Converter for Media Plugin

Habilitar la conversión de imágenes WebP

Después de activar el complemento, verá un mensaje como el siguiente y haga clic en el botón "Acelerar mi sitio web". Alternativamente, puede ir al menú "Configuración> WebP Converter" para llegar a la página de configuración del complemento.

  • Seleccione el modo de carga de imágenes como "a través de .htaccess (recomendado)".
  • Elija JPEG, JPG y PNG para las extensiones de archivo compatibles.

¿Cómo solucionar el problema de las imágenes de servicio en formatos de próxima generación en WordPress?

Modo de carga de imágenes y extensiones de archivo

  • Para obtener una lista de directorios compatibles, elija la opción "/ uploads". Asegúrese de que está sirviendo las imágenes de la carpeta de cargas de WordPress predeterminada. Si ha movido sus imágenes al subdominio, seleccione ese directorio para que el complemento funcione correctamente.
  • Para el método de conversión, elija la opción "GD (recomendado)".
  • Finalmente, elija la calidad de imagen según sus necesidades. El complemento utiliza 85% como valor de calidad predeterminado para la conversión de WebP.

¿Cómo solucionar el problema de las imágenes de servicio en formatos de próxima generación en WordPress?

Conversión y calidad de directorios

El complemento también utiliza algunas funciones adicionales para optimizar la imagen adicional. Puede dejar los valores predeterminados como están o marcar y habilitar / deshabilitar los valores necesarios para su necesidad. Por ejemplo, puede elegir el almacenamiento en caché del navegador para los archivos WebP que recomendamos y elegir la eliminación de archivos WebP más grandes. Haga clic en el botón "Guardar cambios" después de seleccionar todas sus opciones.

¿Cómo solucionar el problema de las imágenes de servicio en formatos de próxima generación en WordPress?

Características adicionales

Regenerar imágenes

El complemento WebP Converter for Media también ofrece una opción para regenerar todas sus imágenes para convertirlas en formato WebP. Esto es útil si ha subido imágenes al sitio antes de instalar el complemento.

¿Cómo solucionar el problema de las imágenes de servicio en formatos de próxima generación en WordPress?

Regenerar imágenes de WebP

Verificar en Google Chrome

Después de regenerar todas las imágenes existentes, puede abrir el sitio web en Google Chrome y verificar. Debería ver que las imágenes de WebP se muestran en la sección de herramientas para desarrolladores. Puede consultar este artículo sobre cómo comprobar que las imágenes WebP se muestran en el navegador Chrome. Si ha habilitado el almacenamiento en caché del navegador, simplemente copie la URL de la imagen y vea que el nombre del archivo contiene .webp.

Problema de soporte del servidor

Desafortunadamente, no todos los servidores web admiten la conversión de WebP. Puede encontrar esto si la sección "Método de conversión" está deshabilitada en la configuración del complemento. Su servidor debe tener instalada la biblioteca GD o Imagick compatible para admitir el formato WebP. De lo contrario, el complemento mostrará un error y no debería poder utilizar la conversión WebP. Por lo que hemos probado, los servidores de alojamiento compartido de Bluehost no admiten la conversión de WebP y verá un mensaje de error como el siguiente.

¿Cómo solucionar el problema de las imágenes de servicio en formatos de próxima generación en WordPress?

Error de configuración del servidor para WebP

En este caso, debe hablar con el anfitrión para habilitar el soporte necesario para las imágenes WebP.

Habilitar el almacenamiento en caché para imágenes WebP con WP Rocket

Como se mencionó, el complemento WebP Converter for Media ofrece una opción para habilitar el almacenamiento en caché del navegador para imágenes WebP. Esto le ayudará a acelerar la carga de la página indicando a los navegadores que guarden en caché las imágenes cuando el usuario vuelva a abrir las mismas imágenes. Sin embargo, esta opción no está disponible con muchos otros complementos y debe combinarla con la configuración de su complemento de almacenamiento en caché. Por ejemplo, si está utilizando WP Rocket, asegúrese de habilitar la casilla de verificación para el almacenamiento en caché del navegador en la sección "Imágenes". Esto permitirá que el complemento almacene en caché las imágenes WebP y sirva en los navegadores compatibles.

¿Cómo solucionar el problema de las imágenes de servicio en formatos de próxima generación en WordPress?

Habilitar la compatibilidad con WebP en WP Rocket

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More