Imagine você, dono de um site ou blog, iniciando o processo de postagem de um conteúdo em seu projeto.
Imagine que no seu post, você deseja inserir uma imagem que é muito importante para contextualizar o assunto ou atrair visitantes, porém, você se depara com algum tipo de erro que impede você de inserir a imagem.
Vamos abordar neste post, como identificar cada cenário e explorar algumas tratativas para resolver cada caso.
Quais são os principais problemas que ocorrem no uso de imagens em sites e blogs?
Existem diversos tipos de erros e incompatibilidades que podem gerar problemas com uso de imagens em seu site, vamos explorar a causa e a solução dos mais recorrentes.
Upload de uma imagem muito grande
Um dos mais comuns é o erro que ocorre ao realizar o upload de uma imagem muito grandes. Este erro ocorre por você estar inserindo uma imagem com um tamanho maior do que o permitido para seu site.
Mas e agora, não posso mais utilizar esta imagem?
Calma, primeiramente, o mais recomendável a fazer é buscar uma forma de reduzir o tamanho de sua imagem. Lembramos que o indicado é sempre utilizar imagens entre 100 kb e 150kb para não prejudicar o carregamento da página para os leitores de seu conteúdo.
Você pode realizar este processo através de editores de imagens do seu computador ou smartphone, até mesmo editores simples como o Paint, que é nativo do Windows.
Uma outra forma interessante (e curiosa) é enviar a imagem pelo WhatsApp, e baixar no celular pelo app ou pelo WhatsApp Web no seu computador. Por padrão, como forma de otimização, o aplicativo reduz a qualidade no envio de imagens para otimizar uso de tráfego de rede e armazenamento, uma preocupação que hospedagens de sites também compartilham, saiba mais sobre este assunto em nosso post.
Bom, caso não exista a opção de reduzir a qualidade da imagem, podemos partir para as alterações na sua hospedagem. Este passo pode variar muito de acordo com o tipo de hospedagem que você possui, saiba mais sobre os planos de hospedagem da ServerDo.in.
Existem duas formas de limitar o tamanho do upload que você pode realizar em seu site, a primeira é o próprio site, ou seja, a própria estrutura do seu site, possui uma diretiva que estabelece este limiar porém que pode ser ajustável.
A segunda é o próprio sistema que gerencia sua hospedagem limitar seu limite de upload, para este caso, você deve entrar em contato com o suporte técnico de sua hospedagem para este ajuste.
Cada CMS (Sistema de gerenciamento de conteúdo) como o WordPress, por exemplo, tem seus limites. Alguns possuem um limite padrão já bem baixo com 2MB. Nossa equipe de infraestrutura estabelece o padrão em 8MB, mas o cliente pode ajustar em seu cPanel ou pedindo ao nosso suporte que pode ser aumentado em até 25x para 200MB.
Na imagem abaixo, está sendo ilustrado um WordPress configurado com o limite em 8MB.
Caso você possua uma hospedagem compartilhada com o cPanel, você pode aumentar o limite do upload de arquivos. Basta fazer o login no painel de controle, e pesquisar por MultiPHP INI Editor.
Então escolha o site em que deseja fazer a alteração conforme imagem abaixo, e aumentar a diretiva.
upload_max_filesize para o tamanho adequado de sua imagem. No caso da ilustração abaixo, a diretiva está definida como 50MB, o que significa que é possível realizar um upload de uma imagem de 50MB.
Esta diretiva é responsável por limitar o tamanho máximo de upload de qualquer arquivo para o site, incluindo imagens. Em seguida, basta clicar em aplicar e pronto! Só realizar o teste. 🙂
Espaço em disco
Às vezes o upload no sistema pode falhar por falta de espaço em disco em seu plano ou servidor de hospedagem. Isso ocorre porque o espaço de armazenamento está em seu valor máximo, e não é possível inserir mais nenhum arquivo. Seja imagem, PDF ou qualquer outro tipo de arquivo.
Por isso é importante conferir sempre seu armazenamento conforme o material que citamos anteriormente neste post.
A solução para este caso seria analisar sua hospedagem e excluir arquivos menos importantes para liberar espaço no disco. Ou contratar um aumento na sua capacidade de armazenamento.
Cuidado: existem empresas de hospedagem que vendem “planos ilimitados” mas com bloqueio na quantidade de inodes.
Então mesmo com espaço em disco livre, você pode ter estourado a quantidade de inodes e por isso seu upload não funciona, ou seja, você extrapolou a quantidade de arquivos que você pode ter em sua hospedagem, independentemente do tamanho de cada arquivo e do espaço em disco disponível.
Confira mais detalhes neste vídeo feito por nossa equipe.
Importante registrar que na ServerDo.in não temos limitação pelo número de inodes, confira mais sobre o assunto.
Erro 403 Forbidden
Esse é um erro que pode ocorrer de forma menos comum que os anteriores. Ao tentar fazer o upload da imagem, a ação é bloqueada pelo sistema por seu usuário não possuir permissão para editar tal pasta, desenvolvemos um conteúdo que explica detalhadamente como corrigir o Erro 403 Forbidden
Para este caso, orientamos entrar em contato com a equipe técnica de sua hospedagem para ajustar as permissões na sua hospedagem.
Leia mais: Erros em sites: aprenda a identificar os principais e a buscar soluções.
Qual a importância de observar o tamanho da imagem antes de subir para o site ou blog? Qual a influência no desempenho do site ou blog?
Não é incomum hoje em dia ter fotografias com mais de 20MB, porém a qualidade destas imagens tendem a estar na qualidade máxima, mas na internet, mesmo com a melhoria da velocidade média de conexão, é importante priorizar a velocidade do carregamento dos dados, para não impactar no carregamento da página para o leitor, desta forma, uma qualidade menor de imagem é recomendável.
Enquanto para armazenar no seu celular a qualidade é mantida em 100% nos arquivos .JPG da sua câmera, para internet, visando velocidade, a qualidade aceitável fica entre 80% e 70%.
Para exemplificar, a câmera traseira do Iphone X tem 12MP, ou seja, as suas fotos tem 4000px de largura. Só que a tela de um celular tem em média 350px de largura e uma tela de computador 1600px. Então apenas em redimensionar as fotos você já terá um tamanho menor.
Além do tamanho da imagem em pixels, o percentual de qualidade existe também o tamanho da imagem em DPI. Enquanto imagens para impressão tem 300 DPI (dots per inch ou pixels por polegada), para internet a resolução usada por padrão é 72DPI.
Com tratamento de diminuição de tamanho em PX, diminuição da qualidade e DPI você consegue diminuir o tamanho das imagens em 95%. Imagens menores são carregadas mais rápidas e te garantem melhor resultado no Google PageSpeed Insights e buscadores.
Agora que vimos que até mesmo o formato da imagem influencia no desempenho de seu carregamento no navegador, vamos abordar então o questionamento.
Proteger seus dados empresariais nunca foi tão simples. Comece hoje e mantenha-se um passo à frente das ameaças cibernéticas. 🛡️ Acesse agora nosso checklist!
Qual o melhor formato de imagem para usar em seu site?
Você já deve ter ouvido falar em JPEG e PNG, que são formatos de imagens muito utilizados na internet. Existem alguns formatos relativamente novos que são indicados para usar no seu site, pois as imagens ficam com um tamanho menor sem perder a qualidade.
O Google indica o uso de JPEG 2000, JPEG XR, ou WebP. O segredo para a escolha é optar pelo formato com maior compatibilidade com navegadores, e neste caso, o vencedor é o WebP, que é o formato que possui a maior lista de compatibilidade, saiba mais sobre esta análise neste post.
Sendo assim o formato WebP é o mais indicado para quem busca melhor desempenho sem comprometer a compatibilidade com os navegadores.
Quando o problema é com a imagem e quando é problema do servidor?
Depois do upload realizado, a imagem é um arquivo estático no servidor, assim, os servidores web fazem a entrega do conteúdo de forma rápida. Não seria como um arquivo em PHP por exemplo, que está associado a uma série de processos envolvendo um banco de dados que por sua vez, pode até mesmo estar em outro servidor, sendo assim, entregue de forma mais atenuada.
Então se a imagem está com tamanho adequado conforme todas as tratativas abordadas até o momento neste conteúdo, e ainda assim ela carrega de forma lenta o problema está no servidor.
É sempre importante você testar a velocidade de download do seu servidor. É sempre importante destacar que a velocidade de Donwload/Upload de sua Internet contratada ou da rede na qual o acesso à página está sendo realizado tem influência, resumidamente, seu site pode estar lento em seu dispositivo, seja smartphone ou computador, mas não necessariamente nos dos leitores.
Qual a configuração indicada para uma foto no site ou blog?
O formato WebP é o mais indicado, a qualidade aceitável fica entre 80% e 70% da mais alta e o indicado é sempre utilizar imagens com tamanho entre 100 kb e 150kb.
Quais critérios devem ser observados?
O mais importante é focar em otimizar as imagens na perspectiva de equilibrar entre tamanho e qualidade, tornando o carregamento da página o mais fluido possível preservando a qualidade do conteúdo.
Que diferenças existem entre PNG e JPG em termos de peso?
O formato JPG é um formato em que estabelece categorias de compactação em sua imagem, ou seja, você pode compactá-la com mais intensidade, diminuindo muito seu peso e consequentemente sua qualidade.
Ou pode compactar de forma menos intensa, resultando em uma imagem de melhor qualidade porém mais pesada, por isso seu uso é muito comum na internet.
Sua usabilidade é mais comprometida em casos em que a imagem possui conteúdo textual, pois a dispersão dos pixels com o processo de compactação fica mais nítida, conforme a imagem abaixo.
Uma forte característica deste formato também é que quando a imagem é compactada, o processo não pode mais ser desfeito.
O PNG já é um formato que permite que a imagem seja compactada sem perder sua qualidade, seu uso é indicado em caso em que você deseja manter o nível de qualidade alto, porém eventualmente é mais pesado.
Um grande diferencial do PNG em relação ao JPG, é que com ele é possível utilizar imagem com fundo transparente, porém com JPG sua imagem fica muito menos pesada.
Para escolher o melhor entre eles, é necessário analisar sua necessidade e escolher o que melhor a satisfaz, pois as propostas dos formatos são distintas.
Podem explicar o problema com http? Por que ocorre?
O Erro de HTTP que pode ocorrer na hora de fazer uploads em sites, vamos usar como parâmetro o WordPress por contemplar a grande maioria dos sites como portais de conteúdo.
Erro de HTTP WordPress
O erro de HTTP WordPress ocorre durante o processo de upload de arquivos de imagens ou de outro formato suportado no CMS como PDF por exemplo, então durante o processo, ocorre o erro “HTTP error”.
Existem vários motivos que causam este erro, o que pode tornar a identificação do motivo um pouco demorada.
Às vezes até mesmo um problema temporário no servidor em que seu site está hospedado pode causar este erro, portanto, também orientamos aguardar alguns instantes e tentar realizar o upload novamente do arquivo.
Um dos motivos pode ser por conta do uso de plugins de terceiros, ou seja, não oficiais do WordPress, que fazem tratamento e redimensionamento nas imagens após o upload automaticamente. Se o plugin gerar um erro, o upload também será marcado com a mensagem “HTTP error”. Neste caso recomendamos buscar mais informações sobre o funcionamento deste plugin ou até mesmo desativá-lo para realizar o upload.
Questões já vistas anteriormente neste artigo, como o limite de memória no servidor, inodes e erro da sua rede interna ou do seu provedor de internet também podem resultar neste erro no WordPress, portanto, siga as instruções que já auxiliamos anteriormente.
É possível que o nome da imagem que você está tentando fazer o upload não siga certas diretivas impostas pelo CMS, e pode estar utilizando alguns caracteres especiais não permitidos, portanto, é viável realizar a alteração do nome da imagem para tentar realizar novamente o upload.
Verifique a versão do PHP que está rodando no seu servidor de hospedagem, muitas vezes, esta incompatibilidade de versão pode ocasionar no Erro HTTP WordPress.
Mesmo o WordPress sendo extremamente eficiente e muito robusto para questões de gerenciamento de seu conteúdo no site, ainda sim está a mercê de erros, por isso ainda existe a importância de um time técnico de apoio para que nestes casos, sendo simples ou não, a resolução do problema possa ocorrer da forma mais segura e eficiente possível.
Fechamento
Neste post, aprendemos algumas formas de identificar os principais cenários com erros de imagens em sites e exploramos algumas tratativas para resolver cada caso.
Avaliamos que o erro pode estar tanto no processo de preparação da imagem, antes mesmo de subir para a hospedagem em si, quanto na própria hospedagem em si.
Por isso é muito importante entender em qual cenário você se encontra.
