Tutorial: Ahorra espacio y ancho de banda con CDN gratuito (lite)

  • Autor Autor ramonjosegn
  • Fecha de inicio Fecha de inicio
ramonjosegn

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
Hola. - Supongo que no soy el único que en algún momento ha tenido problemas con el espacio en algún hosting y con el ancho de banda.

¿A quién no le suena esa pesadilla?

Acá os traigo una solución temporal, usar un CDN gratuito.

Aunque el CDN es gratuito es algo limitado pero será aceptable para guardar tus imágenes de un sitio web pequeño-medio y que no tenga un gran consumo de ancho de banda.

En mi caso lo que hago es guardar algunas imágenes grandes en este CDN y el resto las alojo normalmente en el hosting, de esta forma tengo repartido un poco el peso entre uno y otro.

- ¿QUÉ NECESITAS?

- Tener conocimientos básicos de INTERNET Y WORDPRESS
- Saber registrarte

Pero bueno, no más vueltas y vamos con el tutorial.



PASO 1. -

Ingresa al sitio web

Sirv - the dynamic imaging platform
https://sirv.com/

Este sitio web es el que usaremos como CDN. Te recomiendo familiarizarte un poco con el para no tener problemas en el futuro.

sirv-tutorial-001.webp



PASO 2. -

Hacemos clic en el menú donde dice PRICING.

sirv-tutorial-002.webp



PASO 3. -

En esta sección podemos ver las opciones que existen de pago.

sirv-tutorial-003.webp

Si te desplazas a la parte inferior podrás ver que se puede ELEGIR UN PLAN GRATUITO (lite) y sus características.

sirv-tutorial-004.webp

Como puedes ver la cuenta ofrece

500 MEGAS DE ALOJAMIENTO (EXCLUSIVAMENTE IMÁGENES OJO)
1 GIGAS DE ANCHO DE BANDA MENSUAL

Sirv hace ciertas excepciones si te excedes siempre y cuando el próximo mes no vuelva a ocurrir...

Además tus imágenes se ofrecerán desde 20 PUNTOS DIFERENTES DEL PLANETA, lo que hará que carguen con mayor velocidad.



PASO 4. -

Hacemos clic en FREE ACCOUNT

sirv-tutorial-005.webp



PASO 5. -

Rellenamos el formulario de registro, esperamos verificación del correo electrónico y lo confirmamos para poder comenzar a usar la plataforma

sirv-tutorial-006.webp



PASO 6. -

Una vez que tengas tu cuenta CREADA accede con tus datos desde la pantalla principal de https://sirv.com/ haciendo clic en LOGIN

sirv-tutorial-007.webp

Ingresa tu correo electrónico y tu contraseña con los que te registrarte para poder ingresar a la plataforma

sirv-tutorial-008.webp

Pulsa el botón SIGN IN para ingresar



PASO 7. -

Ahora estás dentro de la plataforma. Como podrás ver es bastante espartana.

sirv-tutorial-009.webp



PASO 8. -

Te recomiendo que eches un ojo a la plataforma para familiarizarte con ella.

Para vamos a lo nuestro, que es tener el CDN funcionando y listo.

CREA UNA CARPETA donde alojarás tus archivos (puedes crear varias pare tener tus imágenes organizadas, por temáticas, fechas, o como consideres).

Para ello hacemos clic en NEW > NEW FOLDER

sirv-tutorial-011.webp

A continuación aparecerá una ventana donde debemos ingresar el nombre de la nueva carpeta.

En mi caso la llamaré FOTOS DE AVIONES

sirv-tutorial-012.webp

Hacemos clic en el botón CREATE



PASO 9. -

Abrimos la carpeta que hemos creado haciendo clic sobre su nombre

sirv-tutorial-013.webp



PASO 10.-

Por el momento veremos que el contenido está vacío, ya que todavía no hemos subido nada a la carpeta

sirv-tutorial-014.webp



PASO 11.-

Escogemos nuestra imagen y la arrastramos y soltamos sobre la zona vacía de SIRV (en la carpeta actualmente abierta)

sirv-tutorial-015.webp



PASO 12. -

Aparecerá una ventana flotante indicando datos del proceso de subida.

sirv-tutorial-016.webp



PASO 13. -

Una vez completada la subida de la imagen hacemos clic sobre la nueva miniatura que aparecerá en nuestra carpeta creada en Sirv.

sirv-tutorial-017.webp



PASO 14. -

Una vez abierta la imagen veremos varias opciones.

HACEMOS CLIC EN LA OPCIÓN EMBED

En esta parte podemos escoger varias opciones como si queremos que nuestra imagen se muestre en el navegador como webP, si queremos cambiar el tamaño e incluso hay algunos perfiles ya creados.

Personalmente me gusta usar WEBP porque comprime más que JPEG, pero algunos navegadores como Mozilla Firefox no lo soportan así que igualmente mostrarán otro formato (JPG fallback o PNG fallback, que significa mostrar dicho formato si WEBP falla durante la carga).

También se pueden hacer galerías o imágenes con ZOOM, pero eso ya es cuestión de explorar y se sale de este tutorial que en principio pretendo que sea algo básico para iniciarse a SIRV.

sirv-tutorial-018.webp

PERSONALMENTE DEJO TODO TAL CUAL, EXCEPTO QUE ESCOJO WEBP CON FALLBACK JPEG, por si WEBP FALLARA EN LA CARGA. De esta forma la imagen carga más rápido en navegadores modernos y me ahorro también algo de ancho de banda. Pero las imágenes se comprimen más y el usuario no podrá descargarlas de forma sencilla como ocurre con una imagen PNG ó JPG, así que tendrás que valorar los pros y los contras de cada formato.



PASO 15. -

Nos desplazamos a la parte inferior de la página.

En esta parte encontraremos varios códigos.

Si usas un sitio web en HTML o algún gestor que soporte HTML puedes usar el primer código, simplemente copíalo y pégalo en tu editor HTML.

Si estás usando WORDPRESS COPIAMOS EL SEGUNDO CÓDIGO

sirv-tutorial-020.webp



PASO 16. -

Ingresamos a nuestro administrador de WordPress (recuerda que debes haber copiado el código que se mostraba en SIRV).

Accedemos (o creamos) el post/página donde queremos insertar nuestra imagen.

En mi caso he creado un post/artículo de prueba en WordPress

sirv-tutorial-021.webp



PASO 17. -

Hacemos clic en el botón AÑADIR OBJETO en nuestro editor de WordPress

sirv-tutorial-022.webp



PASO 18. -

Hacemos clic en INSERTAR DESDE URL

sirv-tutorial-023.webp



PASO 19. -

Pegamos el código que habíamos copiado desde SIRV

En mi caso quedaría así

sirv-tutorial-024.webp

Configura las opciones que consideres oportuna (leyenda - pie de foto - , alineado, etc), como sueles hacerlo habitualmente en WordPress.

Una vez configurado hacemos clic en

INSERTAR EN LA ENTRADA (ó página)

sirv-tutorial-025.webp



PASO 20. -

DISFRUTA DE TU IMAGEN CARGANDO DESDE UN CDN GRATIS, CONSUMIENDO MENOS ANCHO DE BANDA, Y SIN OCUPAR ESPACIO EN TU SERVIDOR

sirv-tutorial-026.webp



Espero que os haya gustado.

Con SIRV se pueden crear otros efectos interesantes como

https://sirv.com/demos/360-spin-full-screen/

Pero eso queda para otro día

TAMBIÉN DISPONEN DE PLUGIN PARA WORDPRESS PERO PERSONALMENTE NO ME AGRADÓ EN ABSOLUTO, SE PIERDE MUCHO TIEMPO CONFIGURANDO CADA IMAGEN (a no ser que lo hayan actualizado)

Cualquier duda con gusto os colaboro, hay bastantes opciones pero quería enfocarme en los pasos básicos para comenzar y que luego ya os pongáis a investigar por vuestra cuenta y riesgo.
 
Última edición:
huy te luciste con este tutorial , sirve mucho para los que no quieren gastar mucho dinero en hosting y compran planes baratos , gracias por el tutorial
 
Gracias hombre 😛8:
 
Genial Ramón todo el tutorial bien paso a paso :encouragement:
 
Genial Ramón todo el tutorial bien paso a paso :encouragement:

Me alegro que te haya gustado.

Lo que no sé es qué hacen si te pasas del ancho de banda... nunca me ha pasado y no lo dicen en ninguna parte, igual ellos son flexibles, si te pasas este mes no pasa nada pero si te vuelves a pasar ahí sí te toca pagar o no sé...
 
Muchas gracias muy buen tutorial 😀
 
Gracias a ti por revisarlo [MENTION=1]Carlos Arreola[/MENTION]
 
Gracias hombre 😛8:

De nada amigo, espero que te haya resultado de utilidad.

Yo lo estoy usando hace ya unas semanas, pero he visto que algunas imágenes han comenzado a fallar, quizás sea porque ya me he excedido con el ancho de banda en algunas... ¿será?
 
Más que un CDN es simplemente una web tipo image sharing pero privada, y si es por eso, prefiero utilizar Google Photos, que funciona de maravillas (ilimitado, sin reducción de dimensiones) y optimiza las imágenes de manera brutal 🙂
 
Más que un CDN es simplemente una web tipo image sharing pero privada, y si es por eso, prefiero utilizar Google Photos, que funciona de maravillas (ilimitado, sin reducción de dimensiones) y optimiza las imágenes de manera brutal 🙂

Creo que quizás no has revisado bien todas las ventajas de SIRV... que yo sepa en google no se pueden insertar imágenes en 3D, con Zoom, rotatorias y demás.

Ni tampoco aplicar formatos adicionales como WEBP (con fallback incluido), ni creo que genere imágenes responsive...

Como dije no quería meterme en todos los detalles porque era para largo.

Y con Google Photos ¿cómo se supone que se insertan las imágenes en WordPress? Me picó la curiosidad (y por ahí otro usuario estaba preguntando también).
 
Google Photos si acepta WebP, de hecho todos mis blogs con n blogger tienen imágenes en ese formato.
Para copiar las url de las imágenes se copia el enlace que da en la zona de información y se insertan igual que con este servicio que presentaste.
 
Google Photos si acepta WebP, de hecho todos mis blogs con n blogger tienen imágenes en ese formato.
Para copiar las url de las imágenes se copia el enlace que da en la zona de información y se insertan igual que con este servicio que presentaste.

Interesante, gracias por comentarlo. Voy a echarle un ojo.
 
etonses seria lo mismo que esta verdad imgbox - fast, simple image host ? gracias

Muy similar, sólo que SIRV usa varios puntos desde el planeta para enviar las imágenes y lograr acelerarlas, algo que creo que no dispone IMGBOX.

Además por lo que estoy viendo te dan una URL virtual en principio, y tampoco permite opción de conversión en descarga a webP u otros como ocurre con SIRV.
 
Última edición:
Buen tutorial amigo! Un saludo
 
Bien explicado el paso a paso, muy bien. Graciasss
 
Buen tutorial amigo! Un saludo

Me alegro que te haya gustado.

Perdona la demora en la respuesta pero si no me citan o mencionan es complicado estar al tanto de todo lo que me responden 🙂

Gracias por comentar.
 
Muchisimas Gracias!
 
Esta bien SIRV; pero el CDN (Content Delivery Network) solo aplica en la opción de pago de $299.00

Igual gracias por el tutorial.
 
me gusto el tutoral!
 

Temas similares

Atrás
Arriba