0

Qual a melhor forma de carregar imagens remotas no Android? Como estes grandes aplicativos otimizam estas imagens?

Em um país onde a Internet móvel é uma das piores do mundo, surge a necessidade de não deixar o usuário do aplicativo esperando muito até que uma imagem carregue completamente.

A minha ideia inicial era que quando o aplicativo baixasse os dados do servidor, o conteúdo que tivesse imagem, essa imagem não viria como uma URL e sim com seu conteúdo codificado com base64, com isso o usuário não teria que esperar nenhum segundo para visualizar.

Ou será que não temos culpa da Internet ser lenta e enviar uma URL mesmo assim?

[EDITADO]

Abaixo @Maniero perguntou como carregar uma imagem remota com base64

Resposta:

Com uma requisição HTTP. No servidor com PHP eu preparo os dados do banco, e envio de volta um arquivo JSON contendo dados, exemplo:

Exemplo para um aplicativo de festas/eventos

Dados das últimas festas

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

<img src="URL">

Exemplo com base64, com os bits das imagens codificados

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

O ganhamos com isso?

Eliminamos a necessidade de sobrecarregar o servidor, um vez que a imagem já codificada será armazenada no servidor, o que desobriga o PHP de ficar codificando toda vez.

<img src="data:image/type;base64,........">
8
  • "não temos culpa da Internet ser lenta", realmente não temos culpa, mas o cliente da aplicação não vai de certeza gostar de esperar... Neste aspeto a pergunta que fica é: É importante o cliente não esperar pelas imagens?
    – Jorge B.
    Commented 6/01/2015 às 11:15
  • Não sei se entendi, mas posso tentar responder. Tem algum exemplo mais concreto?
    – Maniero
    Commented 6/01/2015 às 11:32
  • Um exemplo concreto seria um aplicativo de eventos que precisa exibir fotos de festas, essas fotos ficam armazenadas no servidor. O desenvolvimento do aplicativo em si não é um problema, mas como exibir imagens o mais rápido possível sim, isso está me preocupando.
    – Daniela
    Commented 6/01/2015 às 11:46
  • Como exemplo concreto estava esperando como você está fazendo. Até porque a pergunta está confusa. Não faz muito sentido comparar URL com base64. São conceitos ortogonais. Talvez devesse editar a pergunta para explicar o que isso significa. Como você poderia acessar uma imagem remota sem URL? E por que vê necessidade de uso de base64 e por que acha que isto poderia trazer alguma vantagem?
    – Maniero
    Commented 6/01/2015 às 12:04
  • @bigown veja no exemplo acima como os dados são carregados e quais suas vantagens.
    – Daniela
    Commented 6/01/2015 às 12:21

1 Resposta 1

5

Nenhuma imagem vem por um URL ou com base64. Os conceitos aí estão confusos.

URL é um endereço e base64 é uma forma de representação de dados. Não há dicotomia em entre eles.

Se vai acessar remotamente precisará de um URL para acessar. Desconheço outra forma de acessar.

Se quer saber se deveria trazer a imagem na sua forma binária ou com base64, deve trazer por forma binária sempre que possível. Base64 fará o volume de dados ser maior ainda. Base64 é usado quando um dado binário criaria algum problema para a transmissão ou armazenamento. E volumes maiores aumentam o tempo de carga.

Se quer saber se a imagem deveria vir embutida em algum outro dado, não vejo isto como grande vantagem na maioria dos casos, principalmente se para isto for obrigado codificar em base64. Mais ainda se trouxer dados que não serão usados.

Diminuir o número de requisições pode trazer alguma vantagem ou desvantagem dependendo do caso. Se tiver muitos elementos para carregar pode ser mais interessante carregar eles separadamente, assim vai carregando progressivamente. Tentar carregar tudo como se fosse um elemento pode até ser ligeiramente mais rápido mas criará a sensação de demora.

Sensação do usuário é mais importante que a velocidades de fato. Carregar imagens assincronamente dão a ilusão de mais velocidade. Carregar as imagens individualmente já é uma técnica de assincronicidade.

Inclusive hoje é comum usar um técnica de só carregar uma imagem quando ela efetivamente será exibida. Isso é bom por um lado e ruim por outro. O meio termo é exibir as primeiras imagens tão logo quanto possível e deixar as demais que só serão exibidas se a pessoa navegar pela galeria depois que terminar as que serão mostradas de imediato. Assim você controle um pouco mais o fluxo total.

De acordo com a edição parece que a questão é se deve carregar a imagem embutida em uma página ou vir através de JSON. A segunda forma é mais assíncrona que traz as vantagens que descri acima. Trazer depois por JSON, talvez até sob demanda poderá criar uma ilusão de mais velocidade dependendo de como for desenvolvido. A primeira forma, se tiver muitas imagens embutidas o HTML ficará enorme e demorará para carregar por completo.

Se puder não fazer nenhum nem outro talvez seja melhor. Porque ambos usam base64 que aumentará o volume de dados trafegados. A não ser que se use compactação na transmissão. O que nem sempre está disponível e aumentar a consideravelmente a carga do servidor.

Mas talvez o problema não seja este porque o exemplo usa HTML e outras informações indicam que o aplicativo é nativo. Com informações conflitantes não sei se consigo responder melhor que isto.

Nessa pergunta do SO tem exemplos para carregar as imagens de forma eficiente mas não sei se isto contribui para responder alguma coisa. Eu apenas iria por este caminho. E há esse tutorial com outras técnicas. A própria documentação oficial fala sobre o assunto. Existem componentes que fazem o "trabalho sujo" por você.

Conclusão

O mais rápido é ter a imagem o menor possível descartando o uso de base64. Dar a sensação de mais rápido é carregar as imagens aos poucos.

Coloquei no GitHub para referência futura.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .