- Desde
- 14 Feb 2010
- Mensajes
- 68.289
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
PASO 5. -
Rellenamos el formulario de registro, esperamos verificación del correo electrónico y lo confirmamos para poder comenzar a usar la plataforma
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
Ingresa tu correo electrónico y tu contraseña con los que te registrarte para poder ingresar a la plataforma
Pulsa el botón SIGN IN para ingresar
PASO 7. -
Ahora estás dentro de la plataforma. Como podrás ver es bastante espartana.
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
A continuación aparecerá una ventana donde debemos ingresar el nombre de la nueva carpeta.
En mi caso la llamaré FOTOS DE AVIONES
Hacemos clic en el botón CREATE
PASO 9. -
Abrimos la carpeta que hemos creado haciendo clic sobre su nombre
PASO 10.-
Por el momento veremos que el contenido está vacío, ya que todavía no hemos subido nada a la carpeta
PASO 11.-
Escogemos nuestra imagen y la arrastramos y soltamos sobre la zona vacía de SIRV (en la carpeta actualmente abierta)
PASO 12. -
Aparecerá una ventana flotante indicando datos del proceso de subida.
PASO 13. -
Una vez completada la subida de la imagen hacemos clic sobre la nueva miniatura que aparecerá en nuestra carpeta creada en Sirv.
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.
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
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
PASO 17. -
Hacemos clic en el botón AÑADIR OBJETO en nuestro editor de WordPress
PASO 18. -
Hacemos clic en INSERTAR DESDE URL
PASO 19. -
Pegamos el código que habíamos copiado desde SIRV
En mi caso quedaría así
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)
PASO 20. -
DISFRUTA DE TU IMAGEN CARGANDO DESDE UN CDN GRATIS, CONSUMIENDO MENOS ANCHO DE BANDA, Y SIN OCUPAR ESPACIO EN TU SERVIDOR
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.
¿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
PASO 5. -
Rellenamos el formulario de registro, esperamos verificación del correo electrónico y lo confirmamos para poder comenzar a usar la plataforma
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
Ingresa tu correo electrónico y tu contraseña con los que te registrarte para poder ingresar a la plataforma
Pulsa el botón SIGN IN para ingresar
PASO 7. -
Ahora estás dentro de la plataforma. Como podrás ver es bastante espartana.
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
A continuación aparecerá una ventana donde debemos ingresar el nombre de la nueva carpeta.
En mi caso la llamaré FOTOS DE AVIONES
Hacemos clic en el botón CREATE
PASO 9. -
Abrimos la carpeta que hemos creado haciendo clic sobre su nombre
PASO 10.-
Por el momento veremos que el contenido está vacío, ya que todavía no hemos subido nada a la carpeta
PASO 11.-
Escogemos nuestra imagen y la arrastramos y soltamos sobre la zona vacía de SIRV (en la carpeta actualmente abierta)
PASO 12. -
Aparecerá una ventana flotante indicando datos del proceso de subida.
PASO 13. -
Una vez completada la subida de la imagen hacemos clic sobre la nueva miniatura que aparecerá en nuestra carpeta creada en Sirv.
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.
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
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
PASO 17. -
Hacemos clic en el botón AÑADIR OBJETO en nuestro editor de WordPress
PASO 18. -
Hacemos clic en INSERTAR DESDE URL
PASO 19. -
Pegamos el código que habíamos copiado desde SIRV
En mi caso quedaría así
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)
PASO 20. -
DISFRUTA DE TU IMAGEN CARGANDO DESDE UN CDN GRATIS, CONSUMIENDO MENOS ANCHO DE BANDA, Y SIN OCUPAR ESPACIO EN TU SERVIDOR
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:
8:
