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:
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.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..
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.