• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
Pampua

Pampua

Diseño web y marketing online

  • Servicios
    • Diseño web
    • Marketing digital
    • Mantenimiento web
  • Portfolio
  • Sobre mi
  • Blog
  • Contacto

Cómo usar imágenes WebP en WordPress de forma sencilla

Si quieres hacer que tu WordPress vaya un poquito más rápido, aquí te explico cómo implementar el formato de imagen WebP de forma sencilla.

18/06/2020 Por Ramón Deja un comentario

https://roptex.com/podcast/podcast91.mp3

Apple Podcasts | Google Podcasts | Spotify | Pandora | RSS

Déjame que te cuente algo que te va a interesar:

En 1946 hubo una gran sequía en Ucrania.

Una muy grande.

No llovía ni sin querer.

Además, hacía poco que los nazis habían asolado el país y ahora eran los comunistas rusos los que les hacían la vida imposible.

La consecuencia estaba siendo una hambruna que se llevaba a millones de personas.

Ni los paraguas ni la revolución eran comestibles.

En una reunión con Stalin, un oficial del ejército destinado en Ucrania comenzó a dar datos y cifras de fallecidos por la hambruna.

Pronto Stalin le interrumpió:

–Si un solo hombre muere, es una tragedia. Si mueren millones, es una estadística.

Hace unas semanas, durante el confinamiento, vi una foto de Pau Donés en la terraza de su casa y no me la pude quitar de la cabeza en todo el día.

Estaba, literalmente, comido por el cáncer.

Me impactó.

Durante estas mismas últimas semanas he escuchado y leído datos de miles y miles de muertos por coronavirus.

Hace unos días, Pau Donés, un solo hombre, murió, y la extraña tristeza que me vino con aquella foto, ha vuelto.

Una tristeza que nunca he llegado a sentir con los miles de muertos por coronavirus.

¿He elegido yo qué me emociona y qué no?

¿Soy un bárbaro sin sentimientos?

¿Solo me da pena porque me sé Grita de principio a fin?

No.

Stalin tenía claro que ciertos mensajes penetran y otros no.

Muchos tiranos y dictadores de todos los colores se han aprovechado a lo largo de la historia.

Y con el diseño web pasa lo mismo.

Hay webs que convierten las visitas en clientes y otras que no.

Llevo desde 2002 haciendo páginas web y algo sé del tema.

Si quieres que te ayude a hacer crecer tu negocio en internet, ponte en contacto conmigo.

Del resto me encargo yo.

Si prefieres hacerlo tu mismo, te recomiendo que te pases por https://pampua.es/plantilla para que al menos, el aspecto visual de tu web no te quite el sueño.

Y empecemos con el tema de hoy:

Cómo implementar imágenes en formato WebP en nuestro WordPress

Con esto vamos a conseguir optimizar aún más las imágenes de nuestro WordPress para arañar un poco de tiempo de carga y que nuestros usuarios y Google estén más contentos.

Primero veamos los formatos de imagen que se venían usando (algunos desde hace más de 30 años)

  • JPEG: para fotos
  • PNG: para gráficos con transparencia
  • GIF: permite animaciones
  • SVG: gráficos vectoriales para logos, iconos…

Nuevos formatos:

  • JPEG XR
  • JPEG 2000
  • WebP

Los dos primeros no aportan apenas ventajas y además no están soportados por la mayoría de navegadores.

WebP está soportado por la mayoría de navegadores, excepto por safari y explorer, pero creo que más pronto que tarde lo soportarán.

Este formato permite transparencias, animaciones, compresión de imagen como el JPEG, o compresión sin pérdida de calidad, lo que lo hace un formato muy polivalente.

Este formato lo ha desarrollado Google, lo cual es una garantía.

Cómo implementarlo en nuestro WordPress

Por defecto WordPress aún no permite este formato, por lo que necesitaremos usar un plugin.

Si buscas “WebP” en el repositorio, hay varios plugins que optimizan las imágenes y las transforman a este nuevo formato, pero no hacen los ajustes necesarios en el hosting para que cuando entre un usuario al que su navegador le permita visualizar imágenes WebP se le muestren.

Pero investigando un poco si que he encontrado que el plugin EWWW image optimizer si lo hace:

EWWW Image Optimizer

Te permite hacerlo todo desde el plugin sin tener que tocar nada de código. Es muy sencillo.

Lo primero que tendrías que hacer es configurar cómo quieres que redimiensione y comprima las imágenes (como cualquier plugin de optimización de imagen) y luego tiene una pestaña de WebP en la que tendrías que activar el primer punto:

JPG to WebP conversion

Después simplemente tendrás que darle al botón de “Insertar reglas de reescritura” que lo que hace es modificar el .htaccess para que detecte si el navegador es compatible y muestre las imágenes en formato WebP.

Una vez hecho esto, si le das al botón “actualizar” de tu navegador, deberías ver una imagen verde en lugar de esta roja:

Si no usas ningún CDN como Cloudflare simplemente tendrías que ir a “Medios” -> “Optimización en lote” -> “Buscar imágenes sin optimizar” para que te optimice todas las imágenes con los ajustes que hayas definido y además te cree una copia en formato WebP de cada imagen, para que si entra un usuario con un navegador compatible se le muestre esa versión de la imagen.

Buscar imágenes sin optimizar

Pero si usas un CDN, deberías además marcar la segunda opción que aparece en el plugin en la pestaña WebP:

Reescritura de WebP por JS

Y después hacer la optimización en lote del paso anterior; con esto ya lo tendrías listo!

Creo que ya sabes que tengo un newsletter en el que cada 15 días comparto 4 recursos interesantes (normalmente gratuitos)

Lo que no sabes es que últimamente está gustando mucho. Y he decidido que en el futuro esté newsletter será de pago. Si quieres apuntarte mientras aún sea gratis entra en https://pampua.es/regalo

Y esto ha sido todo por hoy. Si tienes alguna duda sobre diseño web, escríbeme a través del formulario https://pampua.es/contacto o si lo prefieres en los comentarios de iVoox, o por telegram o twitter como @pampua y estaré encantado de comentarlo contigo. 

Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por  Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spotify, Youtube y desde la web de pampua.es/podcast.

Estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Y sí tienes Spotify, aunque me escuches por otras vías, suscríbete en Spotify a este podcast; así Spotify sabrá que hay más gente que lo escucha.

El próximo jueves 2 de julio emitiré el último episodio de la temporada y haré un análisis web de una tienda de ropa que además podrás consultar en vídeo. No te lo pierdas!

Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos la quincena que viene, llueva, nieve o truene!

Quizá te interese:

Marketing de Contenidos
Atraer más clientes con el marketing de contenidos
Cómo eliminar RogueAds y evitar infectarte
Cómo modificar los tipos de letra de tu Wordpress
Cómo modificar los tipos de letra de tu WordPress

Publicado en: Podcast Etiquetado como: imágenes, optimizar

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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

Footer

Contacta conmigo

De L a V de 9:00 – 21:00
Av. Maisonnave, 5, 8D, 03003 Alicante
Aviso legal - Privacidad
© 2002–2023 Ramón Prats

Podcast

En los 122 episodios del podcast "Diseño Web" he ido compartiendo un montón de consejos para que puedas optimizar tu web fácilmente.

Newsletter

Apúntate y accede a contenido exclusivo gratis con el que quincenalmente te ayudaré a mejorar tu presencia online.

Blog

Lee las últimas publicaciones del blog o mejor aún, suscríbete por RSS. Dicen que de vez en cuando publico algo interesante ;-)

Uso las dichosas cookies para darte una mejor experiencia en esta web.

Puedes informarte más sobre qué cookies uso o desactivarlas en los AJUSTES.

Powered by  GDPR Cookie Compliance
Resumen de privacidad

Utilizo las cookies en mi web para poder ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a visitar la web o ayudarme a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!