Tutorial: Acelera tu web con imágenes webP usando el plan CDN gratuito de Cloudinary

ramonjosegn

Ro
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
62.699
Hace un par de días hablábamos del buen trabajo que ha realizado el compañero [MENTION=114720]PichoLetra[/MENTION] optimizando su sitio web y yo le consultaba sobre si estaba usando el formato webP lo que suscitó el interés de algunos compañeros/as del foro (@celciusb entre ellos).

En su día expliqué cómo mostrar imágenes webP usando SIRV, aunque el plan gratuito es algo básico.

Desde hace unos meses he venido experimentando con CLOUDINARY, y la verdad es que tiene algunas opciones interesantes y el plan gratuito es más que aceptable para un sitio web sin un consumo excesivo, ¡y lo mejor es que puedes conseguir más ancho de banda y más espacio compartiendo el servicio a través de Redes Sociales u otros medios de promoción que verás en tu cuenta!

Pero bueno vamos con el tutorial.

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 1. -

Por supuesto el primer paso es que te crees una cuenta en CLOUDINARY.

La cuenta gratuita tiene las siguientes características

  • 300,000 imágenes y vídeos en total (puedes alojar)
  • 20,000 transformaciones que puedes aplicar al mes
  • 10 GB de espacio en disco
  • 20 GB consumo de ancho de banda mensual

Algunas características se pueden mejorar con ciertas promociones que te permitirán realizar desde tu cuenta.

webp_cloudinary_paso001.jpg

Te puedes registrar desde el siguiente enlace web.

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 2. -

Una vez ya tenemos de una cuenta ingresamos a través de la sección de login.

Está un poco escondido en la parte superior en el home.

webp_cloudinary_paso002.jpg

Ingresa el correo electrónico de registro y la contraseña asociada y haz clic en el botón de SIGN IN

webp_cloudinary_paso002b.jpg

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 3. -

Una vez que ingreses verás un widget a mano derecha donde te invitarán a compartir el servicio en tus redes sociales de forma que puedas obtener más espacio/ancho de banda. Esto sólo hacen en ciertas ocasiones de forma promocional. Así que si lo tienes disponible ¡aprovecha!

webp_cloudinary_paso003.jpg

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 4. -

Te recomiendo que revises un poco la interface para que te vayas acostumbrando a ella.

Vamos a subir nuestra primera imagen (en mi caso ya tengo algunas subidas lógicamente).

Para ello haremos clic en el botón, ubicado en al parte superior, MEDIA LIBRARY

webp_cloudinary_paso004.jpg


✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 5. -

Ahora estaremos ubicados en la sección de MEDIA LIBRARY.

Si te gusta el orden seguramente querrás tener organizado tu material en carpetas.

Para crear una carpeta debes dirigirte a la casilla FOLDER NAME, asignar un nombre y hacer clic en el botón CREATE.

En mi caso voy a crear una carpeta llamada PRUEBA_WEBP

webp_cloudinary_paso005.jpg

De forma automática se abrirá la ubicación de la nueva carpeta, con un menú de migajas de pan en la parte superior.

webp_cloudinary_paso005b.jpg

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 6. -

Para continuar por supuesto lo primero será tener una imagen a subir.

En mi caso voy a usar la siguiente imagen que encontré en PIXABAY en su formato más pequeño 640×423 píxeles (por supuesto puedes escoger la imagen que quieras).

Foto gratis: Couple, Parejas, People, Personas - Imagen gratis en Pixabay - 2308244

couple-2308244_640.jpg

A continuación la arrastro (o uso el botón "SELECT FILE) para subirla.

webp_cloudinary_paso006.jpg

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 7. -

Si todo ha funcionado de forma correcta ahora deberás ver una miniatura de tu imagen en la carpeta donde la hayas subido, como muestro a continuación:

webp_cloudinary_paso007.jpg

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 8. -

Hacemos clic sobre la miniatura de la imagen...

webp_cloudinary_paso008.jpg

Y se abrirá una nueva página con nuevas opciones...

webp_cloudinary_paso008b.jpg


✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 9. -

Debajo de la imagen principal podrás ver diferentes URLs para copiar y usar de diferentes formas.

Al usar estas URLs estaremos manejando la imagen en el formato original.

Es decir si yo copio la URL tal como se encuentra en estos momentos y la pego en alguna aplicación compatible estaría haciendo llamada a la imagen tal y como la subí.

webp_cloudinary_paso008c.jpg

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 10. -

Sin embargo nosotros queremos ir un paso más allá.

No sólo queremos que nuestras imágenes se sirvan desde un servicio como CLOUDINARY que te permitirá disponer de una cuenta de CDN gratuita (ahorrarás ancho de banda y espacio en tu hosting).

También queremos que nuestras imágenes se sirvan en formato webP, un formato más eficiente a la hora de comprimir que jpg.

Para ello procedemos con el siguiente paso.

Nos dirigimos a las opciones y en concreto al desplegable FORMAT (formato).

webp_cloudinary_paso010.jpg

Seguidamente desplegamos y escogemos FORMAT > AUTO

webp_cloudinary_paso011.jpg

Fíjate que ahora la URL ha cambiado, al incorporar un nuevo parámetro (f_auto)

webp_cloudinary_paso011b.jpg

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 11. -

A continuación procedemos a copiar la URL de la imagen en el formato que nos briban CLOUDINARY.

Si tu sitio web está en http quizás prefieras usar http, si lo tienes en https, quizás https. Ya es decisión tuya si usar (o no) un protocolo seguro. Debido a que en 2018 la web debería funcionar casi al 100% sobre https, quizás sería buena opción escoger https.

Mi web está en https así que para evitar avisos de error copiaré la URL marcada con https.

webp_cloudinary_paso011c.jpg

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 12. -

Ya tengo el código copiado, así que ingreso a mi sitio web desarrollado en WORDPRESS y accedo a la opción

AÑADIR OBJETO

webp_cloudinary_paso012.jpg

Seguidamente selecciono la opción INSERTAR DESDE URL

webp_cloudinary_paso012b.jpg

y pego la DIRECCIÓN que había copiado desde CLOUDINARY

rellenamos los datos que considermos necesarios y hacemos clic en el botón

INSERTAR EN LA ENTRADA

webp_cloudinary_paso012c.jpg

Nota - si eres usuario/a de WordPress la empresa Cloudinary dispone de un plugin para facilitarte la inclusión de imágenes desde este servicio:

Cloudinary – Image management and manipulation in the cloud + CDN — WordPress Plugins
Cloudinary – Image management and manipulation in the cloud + CDN — WordPress Plugins

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 13. -

A continuación publicamos nuestra entrada/página una vez la tengamos lista.

webp_cloudinary_paso013.jpg

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

PASO 14. -

A partir de ahora los visitantes que ingresen con Chrome, Opera, Android o cualquier dispositivo compatible con el formato de imagen webP, podrá ver la imagen en este formato. Para conocer los dispositivos/navegadores compatibles puedes visitar el siguiente enlace web - Can I use... Support tables for HTML5, CSS3, etc

Vamos a comprobarlo.

Ingreso con Chrome al artículo publicado. En apariencia no se ve nada "diferente".

webp_cloudinary_paso014.jpg

Sin embargo fíjate qué ocurre cuando descargo la imagen:

webp_cloudinary_paso014b.jpg

¿Te has dado cuenta?

CLOUDINARY está mostrando una imagen webP aunque en apariencia podríamos pensar que es una imagen JPG (incluso maneja esa extensión desde la web).

Si te fijas en la diferencia de tamaños podrás ver que el formato webP comprime más que JPG.

Comparando ambas imágenes verás que

FOTO ORIGINAL - PESO - 58 kbs
FOTO WEBP (CLOUDINARY) - PESO - 25 kbs

No siempre se consiguen compresiones con tanta diferencia, pero en muchas ocasiones sí, lo que hará que tus visitantes disfruten de un sitio web con CARGA MÁS RÁPIDA...


webp_cloudinary_paso015.jpg

✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈✈

Espero que os haya resultado de utilidad. Sé que es un poco largo pero no quiero que los usuarios/as nuevos/as se pierdan en el tutorial.

Cualquier duda agradezco que me mencionéis con "@ramonjosegn" (sin las comillas) así podré responder lo antes posible.

Gracias por haberlo revisado.
 
Última edición:

CarlosZART

Eta
Verificación en dos pasos desactivada
Desde
12 Jul 2016
Mensajes
1.411
Gracias ramón, no tuviste advertencias por parte de la empresa?
 

CarlosZART

Eta
Verificación en dos pasos desactivada
Desde
12 Jul 2016
Mensajes
1.411
¿A qué te refieres? ¿Qué tipo de advertencias? No entendí...
Como en el anterior tuto dijiste que esa empresa que usabas te mandó una advertencia por usar muchos recursos creo que era

- - - Actualizado - - -

¿A qué te refieres? ¿Qué tipo de advertencias? No entendí...
Como en el anterior tuto dijiste que esa empresa que usabas te mandó una advertencia por usar muchos recursos creo que era
 

ramonjosegn

Ro
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
62.699
Como en el anterior tuto dijiste que esa empresa que usabas te mandó una advertencia por usar muchos recursos creo que era
Ah, con la empresa SIRV.com que dan sólo 2 gigas de ancho de banda mensual y me los llevo tragando ya más de 5 meses seguidos...

Cada rato me envían avisos de que la cuenta está congelada...

Pero Cloudinary mira que te da 20 gigas de ancho de banda en el plan gratuito (aunque a mí me aparecen 8, no sé bien cómo manejen eso la verdad), sean 8 ó 20 es un consumo bastante generoso para un plan gratuito, si además usas webP pues vas a consumir mucho menos.

No he usado mucho el servicio pero estos son mis cosumos de los últimos 3 meses



Como ves estoy muy lejos de llegar a los límites (ya veremos cuando mueva todas las imágenes que tengo en SIRV a Cloudinary).
 

CarlosZART

Eta
Verificación en dos pasos desactivada
Desde
12 Jul 2016
Mensajes
1.411
Ah, con la empresa SIRV.com que dan sólo 2 gigas de ancho de banda mensual y me los llevo tragando ya más de 5 meses seguidos...

Cada rato me envían avisos de que la cuenta está congelada...

Pero Cloudinary mira que te da 20 gigas de ancho de banda en el plan gratuito (aunque a mí me aparecen 8, no sé bien cómo manejen eso la verdad), sean 8 ó 20 es un consumo bastante generoso para un plan gratuito, si además usas webP pues vas a consumir mucho menos.

No he usado mucho el servicio pero estos son mis cosumos de los últimos 3 meses



Como ves estoy muy lejos de llegar a los límites (ya veremos cuando mueva todas las imágenes que tengo en SIRV a Cloudinary).
Se mira bien, ya cuando arregle el slider comenzaré a subir las imágenes a cloudinary con tal de que mejora la velocidad y no consuma recursos de mi hosting :encouragement:
 

ramonjosegn

Ro
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
62.699
Se mira bien, ya cuando arregle el slider comenzaré a subir las imágenes a cloudinary con tal de que mejora la velocidad y no consuma recursos de mi hosting :encouragement:
Algo que también puedes hacer, si quieres rizar el rizo, es

- comprimes localmente tu imagen en formato webP (puedes usar irfanview, xnview o algún servicio online para la conversión)
- subes la imagen a Cloudinary en ese formato webP
- una vez la hayas subido le indicas que el formato correcto es JPG (en lugar de AUTO) - para que puedas insertarlas, ya que por ejemplo wordpress de entrada no te dejaría meter una URL con webP
- insertas la imagen como expliqué en el tutorial

De esta forma te ahorras espacio y la imagen se servirá en formato webP cuando sea necesario.

Una locura que se me acabó de ocurrir (acabé de probar y funciona). No sé porqué no se me ocurrió antes... ahí sí creo que voy a conseguir unas buenas velocidades para ciertas imágenes que me tienen con dolor de cabeza (precisamente las que tengo en SIRV).
 
Última edición:

Yuston Arce

Pi
Verificado con documento
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
8 May 2016
Mensajes
5.105
ecelente tutorial bro! usted como siempre aportando muy buenas cosas al foro
 

Boyka

No recomendado
SEO
Verificación en dos pasos desactivada
Desde
7 Ago 2017
Mensajes
30
Si funciona esto?
 

rafadizeosp

Mi
Verificación en dos pasos activada
Desde
19 Nov 2011
Mensajes
3.071
Excelente tutorial. Una aclaración necesaria: este tipo de servicios hay que usarlos casi obligatoriamente en sitios grandes con miles de visitas diarias provenientes de distintas ubicaciones. Si tenemos una tienda enfocada a un publico especifico en una ciudad especifica, no sería prudente utilizar un cdn.
 

PichoLetra

Baneado
Préstamo
Kappa
Domainer
Verificación en dos pasos desactivada
Desde
25 Ago 2014
Mensajes
2.725
Que gran Tutorial Amigo Muchisimas Gracias Se lo Agradesco mucho [MENTION=1576]ramonjosegn[/MENTION] fuerte Abrazo
 

ramonjosegn

Ro
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
62.699
Que gran Tutorial Amigo Muchisimas Gracias Se lo Agradesco mucho [MENTION=1576]ramonjosegn[/MENTION] fuerte Abrazo
La opción de hacerlo con EWWW Image Optimizer también me parece muy buena, pues prácticamente te automatiza todo el proceso.
 

ramonjosegn

Ro
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
62.699
Si funciona esto?
¿Podrías formular la consulta de otra forma?

Siguiendo los pasos del tutorial lo que consigues es que las imágenes que sirvas a tus visitantes que ingresen con navegadores basados en Chrome (Opera, Vivaldi, Kinza, Whale Naver, Opera Neon, Chrome, 7 Star Browser, Yandex Browser, Coc Coc Browser, etc) o que ingresen con dispositivos Android, vean las imágenes que tengas alojadas en Cloudinary, y a las que hayas aplicado el tutorial, en formato webP, un formato de Google para imágenes que comprime bastante más que jpg.

En este enlace web puedes ver una comparativa de las diferencias de compresión

WebP Gallery *|* WebP *|* Google Developers

- - - Actualizado - - -

Pero ese no es pago?
No recordaba que fuera de pago...

me dejaste pensando jajajaa... y sí, es de pago por lo visto, pero yo recuerdo haber usado el plugin sin pagar nada.... ¿lo cambiaron o qué ocurrió?
 

angeljavier

Dseda
Redactor
Verificación en dos pasos desactivada
Desde
26 Ago 2016
Mensajes
1.151
Tremendo tuto amigo como siempre, gracias.
 

ramonjosegn

Ro
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
62.699
Tremendo tuto amigo como siempre, gracias.
Me alegra que te haya gustado.

Mandé un correo a soporte para que me expliquen porque dicen que la cuenta free es con 20 gigas de ancho de banda gratis pero en la mía marca 8 gigas... y eso que está ampliada con las opciones de compartir en facebook/twitter como explico al inicio del tutorial.
 

angeljavier

Dseda
Redactor
Verificación en dos pasos desactivada
Desde
26 Ago 2016
Mensajes
1.151
Si amigo me di cuenta, perfecto cuando tengas esa información la publicas para estar al tanto.
 

Johao Hernandez

Ómicron
Social Media
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
7 Nov 2012
Mensajes
4.729
Gran tuto, excelente, a favoritos, gracias por compartir , como siempre excelente [MENTION=1576]ramonjosegn[/MENTION]
 

ramonjosegn

Ro
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
62.699
Me llamó la atención lo de subir las imágenes ya en formato webP, había intentando eso mismo en otras plataformas y no hubo forma... pero en Cloudinary se puede, pero como comenté habría que cambiar el formato no a "auto" sino a "jpg" para que sea compatible con wodpress... revisé e igualmente sigue cargando webp... aunque es algo "misterioso" el porqué las sirve en ese formato cuando en realidad le indicas que debería ser jpg... rarezas de los programadores... quizás deberían tener una opción de auto+jpeg o algo así.... [MENTION=33138]Johao Hernandez[/MENTION]

- - - Actualizado - - -

Si amigo me di cuenta, perfecto cuando tengas esa información la publicas para estar al tanto.
Ya me respondieron, me dicen que han hecho ajustes para ampliar los planes free para usuarios nuevos, pero que eso no lo están aplicando a cuentas antiguas aunque quizás puedan hacerlo a futuro.
 
Última edición:

Arriba