Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Acelera tus imágenes y ahorra ancho de banda con CDN gratus
#1
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.





PASO 2. - 

Hacemos clic en el menú donde dice PRICING.





PASO 3. - 

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


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


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

[Imagen: 71139d1455108335-acelera-tus-imagenes-y-...al-005.jpg]




PASO 5. -

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

[Imagen: 71140d1455108448-acelera-tus-imagenes-y-...al-006.jpg]




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

[Imagen: 71141d1455108579-acelera-tus-imagenes-y-...al-007.jpg]

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

[Imagen: 71142d1455108686-acelera-tus-imagenes-y-...al-008.jpg]

Pulsa el botón SIGN IN para ingresar




PASO 7. - 

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

[Imagen: 71143d1455108859-acelera-tus-imagenes-y-...al-009.jpg]




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

[Imagen: 71144d1455109093-acelera-tus-imagenes-y-...al-011.jpg]

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

En mi caso la llamaré FOTOS DE AVIONES

[Imagen: 71145d1455109231-acelera-tus-imagenes-y-...al-012.jpg]

Hacemos clic en el botón CREATE




PASO 9. - 

Abrimos la carpeta que hemos creado haciendo clic sobre su nombre

[Imagen: 71146d1455109336-acelera-tus-imagenes-y-...al-013.jpg]




PASO 10.- 

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

[Imagen: 71147d1455109405-acelera-tus-imagenes-y-...al-014.jpg]




PASO 11.- 

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

[Imagen: 71148d1455109623-acelera-tus-imagenes-y-...al-015.jpg]




PASO 12. - 

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

[Imagen: 71150d1455109744-acelera-tus-imagenes-y-...al-016.jpg]




PASO 13. - 

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

[Imagen: 71152d1455109857-acelera-tus-imagenes-y-...al-017.jpg]




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.

[Imagen: 71153d1455110251-acelera-tus-imagenes-y-...al-018.jpg]

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

[Imagen: 71154d1455110535-acelera-tus-imagenes-y-...al-020.jpg]




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

[Imagen: 71155d1455110674-acelera-tus-imagenes-y-...al-021.jpg]




PASO 17. - 

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

[Imagen: 71156d1455110794-acelera-tus-imagenes-y-...al-022.jpg]




PASO 18. - 

Hacemos clic en INSERTAR DESDE URL

[Imagen: 71157d1455110855-acelera-tus-imagenes-y-...al-023.jpg]




PASO 19. - 

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

En mi caso quedaría así

[Imagen: 71158d1455110943-acelera-tus-imagenes-y-...al-024.jpg]

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)

[Imagen: 71159d1455111045-acelera-tus-imagenes-y-...al-025.jpg]




PASO 20. -

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

[Imagen: 71160d1455111157-acelera-tus-imagenes-y-...al-026.jpg]




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.
#2
Genial amigo gracias por la info he venido teniendo estos problemas de calidad de imágenes que saturan en dominio es una buena alternativa voy a probar
#3
muy bueno y bien explidado tendre que provbarlo aun  que creo que exiiten plunig que hace todo esto mas rapido
[Imagen: Nexo_Firma.gif]
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Duda] Problema espaciados en imagenes PabloA3 17 386 26-09-2018, 03:35 AM
Último mensaje: DaveNPlay
  Añade Marcas de agua a tus imágenes con Wordpress jcifuentes 1 104 02-06-2018, 07:57 AM
Último mensaje: ReyNexo23
  Evitar imágenes de productos borrosas en WooCommerce logoregion 2 862 25-03-2016, 06:46 AM
Último mensaje: garcon
  Que hago para evitar publiquen de forma masiva y me dejen si ancho de banda mandragon 4 389 14-01-2015, 07:42 PM
Último mensaje: cbmontemayor
  Ancho de banda en escritorio celticslment 5 530 19-03-2014, 06:30 AM
Último mensaje: Juliens
  Vídeo e imágenes en comentarios WordPress mandragon 2 531 08-01-2014, 03:46 PM
Último mensaje: teury
Bug Mi sitio no reconoce las imágenes subidas FacuBV 4 476 24-12-2013, 09:38 PM
Último mensaje: cesavir
  ayuda con imagenes videox 8 734 27-04-2013, 04:30 AM
Último mensaje: videox
Fotografía Descarga automática de imágenes remotas a WordPress juanluispc 4 630 01-03-2013, 07:45 PM
Último mensaje: ilopezbdn
  Meter publi en las imagenes dBer 15 1,468 03-11-2011, 12:48 AM
Último mensaje: knightramza



Usuarios navegando en este tema: 1 invitado(s)