Como fazer uma imagem aparecer e carregar mais rápido

Escrito por brian valle | Traduzido por victor rodrigues
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer uma imagem aparecer e carregar mais rápido
Otimizar suas imagens para exibição na web vai fazê-las carregar mais rápido (Ablestock.com/AbleStock.com/Getty Images)

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.

Nível de dificuldade:
Desafiante

Outras pessoas estão lendo

O que você precisa?

  • Editor de imagem (Photoshop, PaintShopPro, GIMP ou Pixlr)

Lista completaMinimizar

Instruções

  1. 1

    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.

  2. 2

    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.

  3. 3

    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.

  4. 4

    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.

  5. 5

    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 & Advertências

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

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível