7

Criei esta pergunta com intuito de esclarecer dúvidas que acabei desenvolvendo com passar dos meses em relação a imagens e espaço.

Enquanto acesso sites, tanto em meu celular ou meu computador normal, eu tenho observado que imagens em SVG ou codificadas usando base64 são carregadas mais rapidamente em relação a imagens normais1, percebo isso principalmente quando minha internet está lenta.

Desde então carrego essa dúvida na minha cabeça, qual é o mais vantajoso de usar em relação a espaço de armazenamento (em benefício do servidor) e que ao mesmo tempo tenha o carregamento mais rápido (em benefício do usuário final).

Em meus projetos que usam bastante imagens, tais como uma rede social, que carrega imagens de avatares etc, eu uso como alternativa estes passos para tentar ajudar o servidor sem atrapalhar o resultado final:

  1. Quando a imagem é "upada", ele reduz ao tamanho (medidas x,y) que eu determino e diminui a qualidade para não ocupar espaço em meu servidor.

  2. Para exibir ela ao usuário final, dentro do <img eu faço a imagem passar por um thumb que corta a imagem de acordo com minha necessidade, sem perder a qualidade original, com redimensionamento automático.

Creio que as respostas a esta pergunta irão ajudar bastante não só a mim, mas como ao público no geral e futuros web sites, assim ajudando todo mundo.


1 Imagens normais: .png, .gif, .jpeg etc..

4
  • 1
    Uma pergunta interessante e relacionada no SOen stackoverflow.com/questions/1124149/…
    – Sergio
    Commented 13/12/2014 às 15:25
  • base64 não economiza espaço de armazenamento de imagens; ele economiza espaço quando uma imagem precisa ser representada como texto (em um Json, CSS...). Veja, 8 bits de uma imagem representado como texto: 01001101, ocupa 8 acaracteres, ou seja, no mínimo 64 bits. Agora, estes mesmos bits representados em base64: T, ou seja, 1 caracter, ocupando apenas os mesmos 8 bits que a representação binária original da imagem.
    – Caffé
    Commented 15/12/2014 às 12:43
  • @Caffé entao ele so tras utilidade pra "quando uma imagem precisa ser representada como texto (em um Json, CSS...)".. Pelo que falou sobre os bytes ele apenas coloca mais carga em pouco espaco. Commented 15/12/2014 às 13:28
  • 1
    @user3163662 Não entendi "colocar mais carga em pouco espaço". base64 é para representação de dados binários (uma imagem, por exemplo) como texto; é mais amigável e usa menos bytes do que representar com os caracteres "0" e "1". Então pode fazer sentido suas imagens serem codificadas para base64 para trafegarem em um xml, ou em um json, ou para serem salvas em um css, mas não faz sentido você armazenar imagens no servidor em base64 - isso inclusive aumentaria o espaço ocupado por elas (talvez para economizar processamento na hora de enviar para o client, mas nunca ouvi falar deste uso).
    – Caffé
    Commented 15/12/2014 às 14:46

1 Resposta 1

6

Imagens SVG são imagens vetoriais enquanto que imagens png, jpg e etc. são imagens matriciais.

Uma imagem SVG nada mais é que um arquivo de texto com um XML descrevendo arcos, posições, gradientes, preenchimentos e etc. Experimente abrir num editor de textos como o Vim/Gedit (Linux) ou Notepad/Notepad++ (Windows).

Assim elas são muito menores do que os outros tipos de arquivos que descrevem a imagem bit a bit como é o caso das imagens matriciais, mesmo com a compressão que os vários tipos de imagem têm.

A diferença é que SVG são desenhos, não fotos. E mesmo que alguns mais complexos cheguem a parecer bem reais, nunca serão fotos.

A vantagem do SVG é que, por ser vetorial, nunca perde resolução, nos maiores e menores tamanhos.

Já uma imagem matricial, com alguns zooms, já aparece aquele "quadriculado" típico que indica o limite de resolução dela. Se a aplicação que você quer dar são ícones, SVG ocupará menos espaço, mas não será possível utilizá-lo para fotos.

2
  • 1
    Bacana! Se eu não aprender mais nada hoje, já saio satisfeito pela explicação sobre SVG.
    – Caffé
    Commented 15/12/2014 às 15:06
  • 1
    Boa resposta, dei apenas uma ajeitada nela ;) Commented 15/12/2014 às 16:52

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 .