Gente, cómo están. Nos encontramos haciendo un REST Ful WS en Java (con Jersey) que va a escuchar las peticiones de aplicaciones de celular. Una de esas peticiones es la de recibir todos los productos en canje que tiene determinado local. Hemos implementado el retorno de las imágenes en BASE64 de modo paginado (10 en 10 a medida que el usuario de la App navega por las páginas). El servidor busca la imagen (en un disco local) aproximadamente son de tamaño 500 x 500 (40 Kb), las codifica a base64 y vía JSON, las envía al celular; la app recibe, decodifica y muestra en pantalla (ya las estamos cacheando). Aun no nos encontramos conformes con la velocidad de las primeras cargas, pensamos en bajar la calidad de las imágenes pero queda poco atractiva la App y no es la idea. Se les ocurre algún otro método distinto al que tenemos implementado para enviar el conjunto de imágenes?. Muchas gracias.
-
Hola @Andres Una pregunta, las imágenes las obteneis desde la base de datos? El problema cuál es?? que durante la carga, van apareciando las cosas poco a poco?¿ PD: Si mejoras tu pregunta, acotaremos mucho mejor para poder responderte: es.stackoverflow.com/help/dont-ask– Alejandro Teixeira MuñozCommented el 11 sept. 2018 a las 12:09
-
Hola @AlejandroTeixeiraMuñoz. En la base de datos almacenamos el path de la imagen, este path nos apunta a un disco local al servidor. La demora es apreciable desde que el celular envía la petición al WS y se refresca la pantalla con todos los productos en canje. Presiento que los pasajes por la codificación y decodificación en BASE64, más los anchos de banda afectan directamente sobre ésta demora. He estado viendo algo de crear servidores de imágenes en la nube y alojarlas directamente ahí.– AndrésCommented el 11 sept. 2018 a las 12:15
-
echa un ojo que acabo de leerte bien... ahi tienes el problema y la solución– Alejandro Teixeira MuñozCommented el 11 sept. 2018 a las 12:56
-
¿Las imágenes deben estar ocultas a usuarios no identificados? Quizá la solución más sencilla sería servirlas como assets– Pablo LozanoCommented el 11 sept. 2018 a las 13:06
2 respuestas
A ver, trato de contarte:
1.- Guardar las imágenes en Base64 sólo tiene utilidad si las dejas embebidas en el HTML. Es decir, evitas tener que cargarlas de un archivo externo. Si no, la verdad que da un poco igual
2.- Posiblemente, esa conversión os está matando. Te recomendaría dejarlas en el formato original
3.- Habéis comprobado en el inspector web, si la carga de las imágenes realmente se demora en el tiempo para todas o son algunas em particular?
Puestos a ello, y si es más un tema visual, creo que lo correcto es que ejecutéis/mostréis la página al finalizar la carga de imágenes. Te paso un ejemplo de cómo lo hace la gente ( si bien buscando por tí mismo encontrarás diferentes, en angular, en jquery, etc. etc.)
Por tanto, entiendo que si cumples lo siguiente:
- Las imagenes actuan como imagenes normales (nada de base64. Archivos normales y corrientes)
Revisais que se esté cacheando correctamente (Ojo, el navegador en el inspector, en network debe decir que es un codigo de retorno 304). https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304
Controlas que tu web cargue cuando se han cargado todas las imágenes.
Deberías conseguir que el problema sea "menos visible" e incluso hacerlo desaparecer. Por otra parte, y antes de nada, asegúrate que únicamente estés cargando las 10 primeras imágenes, y de que la velocidad de conexión que tienes, cuadra con el tiempo que tardas en descargar 400Kb.
Todas estas cosas, te recomiendo verlas en Chrome / Firefox. Activando las opciones para desarrolladores, botón derecho, e Inspeccionar elemento -> Red.
EDIT
Acabo de leerte bien:
servidor busca la imagen (en un disco local) aproximadamente son de tamaño 500 x 500 (40 Kb), las codifica a base64 y vía JSON, las envía al celular;
Lo que estás haciendo, es enviar todas en un mismo JSON. Es decir, envías todas seguidas en un trenecito. Por eso tarda tanto. No las cargas en paralelo como un navegador hace al cargar la página
SOLUCION: En el JSON únicamente debes enviar la URL y dejar que el propio navegador las cargue normal
-
Muchas gracias por tu respuesta Alejandro. Te comento que el WS no posee una interfaz, es meramente un proveedor de información hacia las Apps Android. Sin embargo, vamos a probar quitarnos de encima a la codificación en BASE64 de la imagenes para ver qué ocurre. Hoy estamos utilizando JSON para enviar la información entre los dispositivos y el WS, la imagen es un String en BASE64. De no codificarla, enviríamos el Byte Array que la representa o hay otra forma?– AndrésCommented el 11 sept. 2018 a las 13:01
-
1Sobre que da un poco igual usar Base64 o no... los datos en Base64 ocupan 4/3 de lo que ocuparían en formato binario, en general me parece contraproducente usar Base64 en algo que no sea datos embebidos en un formato de texto (dentro de un documento XML o JSON) por este motivo. Commented el 11 sept. 2018 a las 13:14
si aun te sirve mi respuesta te comento que acabo de hacer lo mismo o creo que es lo mismo que tu estas haciendo. Tengo Fotos guardadas en mi PC y hago que se muestren en forma de lista en una APP Android.
Lo que hice fue que movi la carpeta de Fotos a un servidor Apache en mi caso instale Xampp "C:\xampp\htdocs\FotosAPP" Una vez corriendo el servicio de apache las Fotos son accesibles desde una URL por ejemplo: "http://localhost/zFotosAPP/0101_Selfie.jpg"
y en la aplicacion Android Utilice la Libreria Glide para leer las fotos desde una URL.
Para ser mas especifico: mi aplicacion android lee la lista de usuario desde un WebService, en esa misma respuesta le mando la URL de la Foto.(no olvidar remplazar localhost por la IP del servidor que contiene las fotos)
y dentro del Adapter que estoy usando para el RecyclerView tengo el metodo:
@Override
public void onBindViewHolder(@NonNull NewsViewHolder newsViewHolder, int position) {
//muestra el nombre de usuario
newsViewHolder.tv_title.setText(mDataFiltered.get(position).getNombreUser());
//carga la Imagen desde URL
//y aqui es donde esta la magia
Glide.with(mContext)
.load(mDataFiltered.get(position).getURL_IMG())
.placeholder(newsViewHolder.img_user.getDrawable())
.into(newsViewHolder.img_user);
//img_user es el ID del ImageView
}