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:
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:
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.
Pero si usas un CDN, deberías además marcar la segunda opción que aparece en el plugin en la pestaña WebP:
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!
Deja una respuesta