Entenda o problema de redimensionar imagem via HTML

Entenda porque não se deve redimensionar uma imagem via HTML ou CSS. Apesar de ser uma prática muito comum e muitas vezes necessária, o redimensionamento de imagens via HTML ou CSS pode trazer sérios prejuízos para a experiência de navegação do usuário. Em muitos casos pode deixar um site "inavegável" devido à grande quantidade de arquivos pesados que são baixados.

O problema começa quando grandes imagens são reduzidas para tamanhos muito pequenos, fazendo com que seja baixado um arquivo demasiadamente grande, sem que haja necessidade. Uma imagem ou foto, por exemplo, de 3160 de largura é reduzida para 600...700 para caber na página. Apesar de muito comum, algumas dezenas de imagens nesta situação são capazes de deixar o site extremamente lento, até mesmo inavegável em casos extremos devido a lentidão para carregar os arquivos. Esses arquivos grandes, que posteriormente são reduzidos com HTML ou CSS, são carregados desnecessariamente.

Como funciona

No redimensionamento via HTML ou CSS as imagens são “redimensionadas” informando nos atributos width e height valores menores do que realmente possuem. Por exemplo, uma imagem possuí 1024 x 1024px, porém, é informado um valor como 500 x 500 px nestes atributos para que ela seja exibida com um tamanho menor. A técnica funciona tanto em HTML quanto em CSS, bastando apenas declarar uma dimensão menor do que realmente a imagem possuí.

Isso é comum em sites com Slides, onde são colocadas várias imagens com resoluções extremamente altas para depois serem reduzidas para tamanhos menores. Apesar desta prática ser necessária em alguns casos, é preciso uma certa "moderação" para não haver grandes reduções.

O problema

Uma imagem pode ter a dimensão reduzida em mais de 80%, porém, o tamanho do arquivo continua o mesmo (a redução é apenas visual). Quando isso ocorre com imagens grandes são usados muitos recursos do servidor desnecessariamente. O navegador do visitante acaba baixando uma imagem extremamente grande para ser exibida num tamanho muito inferior. Muitos recursos do servidor e até mesmo do computador do visitante do seu site são desperdiçados. Se for um acesso via celular as imagens pesadas acabam consumindo mais dados de internet que o necessário.

Solução

Quando houver a necessidade de exibir uma imagem em tamanho reduzido utilize editores de imagens para fazer o redimensionamento. Desta forma, será carregada a imagem já com o tamanho correto, sem a necessidade de redimensiona-la via HTML ou CSS. Ao baixar a imagem com o tamanho previamente reduzido com editores o servidor e o computador do visitante não desperdiçaram recursos baixando uma imagem grande que depois será redimensionada.

No caso do WordPress (e possivelmente outros sistemas) existe um “editor” integrado que permite redimensionar as imagens. Com o recurso de mídia do WordPress a imagem é automaticamente redimensionada, conforme as configurações de “Mídia” do WordPress. Também é possível fazer o redimensionamento de maneira manual apenas informando as novas dimensões das imagens. Desta forma você não precisa declarar um tamanho menor do que a imagem realmente possuí.

Como redimensionar imagens no WordPress

Como dito anteriormente, é possível redimensionar as imagens com o “editor” de imagem integrado do WordPress. Para redimensionar uma imagem vá até a Mídia (menu lateral esquerdo). Clique na imagem desejada e depois em “Editar imagem”. Abaixo você encontra as instruções sobre o funcionamento deste “editor”.

REDIMENSIONAR A IMAGEM: Permite informar as novas dimensões (em pixel) da imagem. A proporção da imagem é mantida para evitar distorções.

RECORTE DA IMAGEM - Proporção: Basta informar a proporção da imagem (exemplo: 4:3 ou 4:4) para que a mesma seja recortada respeitando a proporção de altura e largura informados.

redimensionar imagem com wordpress

Como alterar as configurações de Mídia do WordPress

Sempre que é feito o upload de uma imagem o WordPress automaticamente redimensiona ela em três tamanhos diferentes justamente para evitar que você precise redimensioná-la via HTML. Os tamanhos podem ser alterados na página de configuração “Configurações > Mídia”. Basta informar os novos tamanhos que o WordPress automaticamente redimensionará as imagens para estes tamanhos sempre que houver um novo upload. As alterações nestas dimensões são aplicadas somente as novas imagens que forem feitas uploads, as imagens já enviadas não são afetadas pela alteração.

O que você achou do conteúdo?
Pode melhorar0
Ótimo0
Perfeito0