Melhores Práticas com imagens


(Pedro Henrique Sousa da Rocha ) #1

Olá, estou montando um site e estou com uma pequena dúvida.

Já li em alguns lugares que não devemos redimensionar as imagens que pedimos do server no navegador. Mas vi recentemente que é bom termos uma imagem grande com uma qualidade baixa pra que quando essas imagens sejam baixadas em uma tela de retina elas fiquem com uma qualidade razoável.

Mas preciso de uma imagem pequena para colocar na minha

. Então a minha pergunta é: Como faço? Pego uma imagem grande e redimensiono ele no meu CSS, ou pego uma imagem do tamanho exato que preciso?

Att, Obrigado.


(Luã Ciceri Schwertner) #2

@Pedro_Sousa coloca a imagem do tamanho que precisa.
Pensa na seguinte situação, você tem uma imagem de 2000x2000 de 2mb, mas redimensiona ela pra 150x150. O usuário que entrar no teu seu site vai baixar a imagem de 2mb mas o resultado que ele vai ver vai ser 150x150. O ideal é colocar ela já 150x150 que o tamanho dela vai ser menor, deixando seu site mais leve e sendo carregado mais rápido.


(Maykel Esser) #3

Eu sempre vejo qual o tamanho máximo que ela será utilizada.

Como os sites que produzo são responsivos, geralmente as medidas são diferentes entre cada query string. Neste caso, por exemplo, em uma tela de 720px, a imagem ficará com 700px. Na tela de 1920px, ficará com 390px (por ter mais colunas, ficará menor).

Neste caso, pego a maior medida, e deixo a imagem neste tamanho.

Após isso, faço também uma otimização com o ImageOptim, que reduz até 80% do tamanho da imagem sem perder qualidade.


(Luan Maik) #4

Para complementar o que foi respondido até agora, você pode criar um script para que quando for adicionado uma imagem no site (via painel), o script criar 3 tamanhos da imagem, um pequeno (para pequenos thumbnails), um médio (para listagem de artigos por exemplo) e um grande.


(Eduardo Ribeiro) #5

@LuanMaik, você poderia falar melhor de como fazer um script desse? E se é possível realizar isso para uploads dos usuários?


(Rafael França Marques da Silva) #6

Acabei de falar sobre isso... Veja se te ajuda tb...


(Luan Maik) #7

Existem váaaaaaaaarias bibliotecas para esta finalidade, mas depende da linguagem que está usando.
Este é um exemplo de biblioteca para PHP:

utilize o github para buscar bibliotecas: