Como fazer uma imagem aparecer e carregar mais rápido

Contente

Instruções
Dicas
O que você precisa

Ao publicar imagens na internet, é importante ter certeza de que elas estão otimizadas para exibição na web, pois assim, você pode fazê-las carregar mais rápido. Imagens de carregamento lento tendem a afastar os visitantes e podem impedi-los de desfrutar plenamente do seu site. A melhor maneira de certificar-se de que suas imagens carregam mais rápido é espremer o máximo de qualidade possível em um tamanho fixo. Para visualização web, é uma boa ideia manter o tamanho de cada uma das suas imagens abaixo de 50KB.

Instruções

Otimizar suas imagens para exibição na web vai fazê-las carregar mais rápido (Ablestock.com/AbleStock.com/Getty Images)

Use o formato certo. Use JPEG para imagens com gradientes e muita mistura de cores. Para imagens que contêm formas e texto de alto contraste, você pode usar GIF ou PNG. A maioria dos softwares de edição de imagem suporta conversões para vários formatos.
Altere a resolução da imagem para 72 dpi (pontos por polegada). A maioria das telas e monitores exibe páginas da web e imagens com essa resolução. Use esta resolução também para reduzir as distorções e os problemas com cor.
Maximize o corte em sua imagem. Por exemplo, se o objeto de sua imagem é colocado contra um fundo sólido, corte a maior parte da cor sólida. Você vai acabar com um tamanho de arquivo menor.
Aplique um leve borrão à sua imagem. Comece por aplicar um Gaussian Blur com raio de 0,2 pixel. Um Gaussian background blur de 1,0 pixel deve ser suficiente para reduzir o tamanho do arquivo da imagem em aproximadamente 23%. Para evitar a perda de qualidade, tente borrar apenas o fundo de sua imagem ou partes dela que não se destacam.
Isole o objeto da imagem usando a ferramenta de selecionar e adicione mais desfoque para o resto da imagem. Isso irá reduzir significativamente o tamanho do arquivo da sua imagem. Como benefício, você destaca o que for importante.

Dicas

Em sua marcação HTML, não se esqueça de indicar a largura e a altura de cada imagem que inserir. Desta forma, os navegadores não têm que calcular o tamanho ideal para a sua imagem. Use imagens tipo sprite sempre que puder. Combine imagens menores em um arquivo de imagem grande para reduzir o número de requisições HTTP que sua página web tem de fazer. Com isso, você pode fazer suas imagens carregarem mais rápido.