O velho ditado diz que "uma imagem vale mais que mil palavras". Isso é especialmente verdadeiro na Web, onde os períodos de atenção são notoriamente curtos e, portanto, a imagem certa pode realmente fazer ou quebrar um site atraindo a atenção certa e atraindo visitantes da página por tempo suficiente para que eles aprendam o que precisam aprender ou realizem uma atividade específica. ação que sinaliza uma "vitória" para o site. Sim, quando se trata de um site, as imagens podem valer mais do que mil palavras!
Assim, com a importância das imagens on-line estabelecidas, vamos considerar o que seu site está dizendo se uma imagem que deveria estar no site não for carregada? Isso pode acontecer se você tiver imagens embutidas que fazem parte do HTML ou imagens de plano de fundo aplicadas com CSS (e provavelmente seu site possui as duas). A linha inferior é que quando um gráfico não carrega em uma página, ele faz o design parecer quebrado e, em alguns casos, pode destruir completamente a experiência do usuário naquele site. As "mil palavras" que a imagem está enviando certamente não são positivas!
Vejamos alguns dos motivos mais comuns pelos quais as imagens não seriam carregadas em um site, bem como o que você deve ter em mente ao solucionar esse problema durante o teste do website.
Caminhos de arquivo incorretos
Quando você adiciona imagens ao arquivo HTML ou CSS de um site, é necessário criar um caminho para o local em sua estrutura de diretórios onde esses arquivos residem. Este é o código que informa ao navegador onde procurar e buscar a imagem. Na maioria dos casos, isso estaria dentro de uma pasta chamada "imagens". Se o caminho para essa pasta e os arquivos dentro dela estiverem incorretos, as imagens não serão carregadas corretamente porque o navegador não poderá recuperar os arquivos corretos. Ele seguirá o caminho que você disse, mas chegará a um beco sem saída e, em vez de exibir a imagem apropriada, aparecerá em branco.
O passo 1 na depuração de problemas de carregamento de imagens é certificar-se de que o caminho do arquivo que você codificou está correto. Talvez você tenha especificado o diretório errado ou não tenha listado corretamente o caminho para esse diretório. Se este não for o caso, você pode ter outro problema com esse caminho. Leia!
Nomes de arquivos com erros ortográficos
Ao examinar os caminhos de arquivos para os seus arquivos, certifique-se de digitar corretamente o nome da imagem. Em nossa experiência, nomes incorretos ou erros ortográficos são a causa mais comum de problemas de carregamento de imagens. Lembre-se, os navegadores da web são muito implacáveis quando se trata de nomes de arquivos. Se você esquecer uma carta por engano ou usar a letra errada, o navegador não procurará por um arquivo semelhante e dirá, "ah, você provavelmente quis dizer isso, certo?" Não - se o arquivo está escrito errado, mesmo que seja próximo, não será carregado na página.
Extensão de arquivo errada
Em alguns casos, você pode ter o nome do arquivo corretamente digitado, mas a extensão do arquivo pode estar incorreta. Se a sua imagem é um arquivo .jpg, mas seu HTML está procurando por um .png, haverá um problema. Certifique-se de que você está usando o tipo de arquivo correto para cada imagem e, em seguida, verifique se você ligou para a mesma extensão no código do seu website.
Procure também pela diferenciação de maiúsculas e minúsculas. Se seu arquivo termina com .JPG, com as letras todas em maiúsculas, mas seu código faz referência a .jpg, todas em minúsculas, há certos servidores da web que verão esses dois são diferentes, mesmo que sejam os mesmos conjuntos de letras. A sensibilidade do case conta! É por isso que sempre salvamos nossos arquivos com todas as letras minúsculas. Fazer isso nos permite usar sempre letras minúsculas em nosso código, eliminando um possível problema que poderíamos ter com nossos arquivos de imagem.
Arquivos estão faltando
Se os caminhos para os arquivos de imagem estiverem corretos e o nome e a extensão de arquivo também estiverem livres de erros, o próximo item a verificar é certificar-se de que os arquivos foram realmente carregados no servidor da web. Negligenciar o upload de arquivos para esse servidor quando um site é lançado é um erro comum que é fácil ignorar.
Como você resolve esse problema? Carregue essas imagens, atualize sua página da Web e ela deverá exibir imediatamente os arquivos conforme o esperado. Você também pode tentar excluir a imagem no servidor e enviá-la novamente. Pode parecer estranho, mas já vimos esse trabalho mais de uma vez. Às vezes, os arquivos são corrompidos, portanto, esse método "excluir e substituir" pode ajudar.
O site que hospeda as imagens está inativo
Você normalmente deseja hospedar qualquer imagem que o seu site use em seu próprio servidor, mas, em alguns casos, você pode estar usando imagens hospedadas em outro lugar. Se esse site que hospeda a imagem ficar inativo, suas imagens também não serão carregadas.
Problema de transferência
Se um arquivo de imagem é carregado de um domínio externo ou do seu próprio, há sempre uma chance de haver um problema de transferência para esse arquivo quando ele é solicitado pela primeira vez pelo navegador. Isso não deve ser uma ocorrência comum (se for, talvez seja necessário procurar um novo provedor de hospedagem), mas isso pode acontecer de tempos em tempos.
O lado lamentável desta questão é que realmente não há nada que você possa fazer sobre isso, pois é um problema fora de seu controle. A boa notícia é que é um problema temporário que muitas vezes é resolvido rapidamente. Por exemplo, quando alguém vê uma página desatualizada e a atualiza, isso sozinho corrige o problema e carrega as imagens corretamente. Se você estiver vendo uma imagem quebrada, atualize o navegador para ver se talvez fosse apenas um problema de transmissão seu pedido inicial.
Algumas notas finais
Ao pensar sobre imagens e preocupações com carregamento, duas coisas que também devem ser lembradas são o uso adequado de tags ALT e a velocidade e o desempenho geral do seu site.
ALT, ou "texto alternativo", tags são exibidas por um navegador se uma imagem não for carregada. Eles também são um componente importante na criação de sites acessíveis que podem ser usados por pessoas com certas deficiências. Cada imagem in-line em seu site deve ter uma tag ALT apropriada. Observe que as imagens aplicadas com CSS não possuem esse atributo.
Quanto ao desempenho do website, o carregamento de muitas imagens, ou mesmo apenas algumas imagens gigantes que não são adequadamente otimizadas para entrega na web, terá um impacto negativo na velocidade de carregamento. Por esse motivo, teste o impacto de todas as imagens usadas no design de seu site e tome as medidas necessárias para melhorar o desempenho desse site e, ao mesmo tempo, crie a aparência geral adequada ao projeto do website.
