Upload remote images with base64 or URL?

0

What is the best way to upload remote images on Android? How do these great applications optimize these images?

In a country where mobile Internet is one of the worst in the world, there is a need to keep the user from waiting too long until an image loads completely.

My initial idea was that when the application downloaded the data from the server, the content that had an image, that image would not come as a URL but with its base64 encoded content, so the user would not have to wait for a second to view.

Or is it not the fault of the Internet to be slow and send a URL anyway?

[EDITED]

Below @Maniero asked how to load a remote image with base64

Answer:

With an HTTP request. On the server with PHP I prepare the database data, and send back a JSON file containing data, eg:

Example for a party / event application

Last Holiday Data

{
    "event_name": "Nome do evento",
    "images": ["ImageURL 1", "ImageURL 2"]
}

<img src="URL">

Example with base64, with bits of encoded images

{
    "event_name": "Nome do evento",
    "images": [{
        "type": "gif", 
        "data": "SW1hZ2VVUkwgMQ=="
        }, 
        {
        "type": "png", 
        "data": "SW1hZ2VVUkwgMQ=="
        }]
}

What do we get out of it?

We have eliminated the need to overload the server, since the already encoded image will be stored on the server, which frees PHP from being coded every time.

<img src="data:image/type;base64,........">
    
asked by anonymous 06.01.2015 / 11:53

1 answer

3

No image comes from a URL or based on64. The concepts there are confusing.

URL is an address and base64 is a form of data representation. There is no dichotomy between them.

If you are going to access remotely you will need a URL to access. I do not know any other way to access.

If you want to know if you should bring the image in its binary or base64 form, you should bring it binary whenever possible. Base64 will make the data volume even larger. Base64 is used when a binary data would create some problem for transmission or storage. And larger volumes increase the load time.

If you want to know if the image should be embedded in some other data, I do not see this as a big advantage in most cases, especially if you need to do base64 encoding. Even more so if you bring in data that will not be used.

Decreasing the number of requests can bring some advantage or disadvantage depending on the case. If you have too many elements to load it may be more interesting to load them separately, so it will load progressively. Trying to load everything as if it were an element may even be slightly faster but it will create a sense of delay.

Feeling of the user is more important than at speeds in fact. Loading images asynchronously gives the illusion of more speed. Uploading the images individually is already a technique of asynchronicity.

Even today it is common to use a technique of only loading an image when it will actually be displayed. This is good on the one hand and bad on the other. The middle ground is to display the first images as soon as possible and leave the others that will only be displayed if the person navigates the gallery after they finish the ones that will be shown immediately. So you control the flow a bit more.

According to the edit it seems the question is whether to load the embedded image into a page or come across JSON. The second form is more asynchronous which brings the advantages I described above. Bringing later by JSON, maybe even on demand may create an illusion of more speed depending on how it is developed. The first way, if you have a lot of embedded images, the HTML will be huge and will take a long time to load completely.

If you can do neither, maybe it's better. Because both use base64 that will increase the volume of data trafficked. Unless compression is used in the transmission. What is not always available and considerably increase server load.

But maybe the problem is not this because the example uses HTML and other information indicates that the application is native. With conflicting information I do not know if I can respond better than this.

In that OS question has examples to load the images efficiently but I do not know if this helps to answer something . I would just go this way. And there's this tutorial with other techniques. The official documentation talks about it. There are components that do the "dirty work" for you.

Conclusion

The fastest is to have the image as small as possible by discarding the use of base64. To give the sensation of faster is to load the images little by little.

    
06.01.2015 / 13:22