Como Exibir Imagens em Tamanho Real no WordPress (4 Maneiras Fáceis)

Você já fez upload de uma foto deslumbrante e de alta resolução para o seu site WordPress, apenas para descobrir que ela parece decepcionantemente pequena ou borrada? É uma experiência frustrante, especialmente quando você precisa exibir trabalhos detalhados como fotografia, arte ou imagens de produtos.

Desde a versão 5.3, o WordPress encolhe automaticamente imagens grandes para ajudar na velocidade do site, o que é um ótimo recurso. No entanto, pode parecer um obstáculo quando a qualidade da imagem é essencial para o seu portfólio ou loja online.

Na WPBeginner, já enfrentamos exatamente esse problema em nossos próprios projetos. Descobrimos que você não precisa escolher entre imagens bonitas e um site rápido.

Neste guia, vamos mostrar quatro maneiras fáceis de exibir imagens em tamanho real no WordPress sem diminuir a velocidade do seu site.

Quando você deve exibir imagens em tamanho real no WordPress?

Um exemplo de quando você pode precisar exibir imagens em tamanho real no WordPress é se você gerencia um portfólio de fotografia ou uma loja de design gráfico. Se você vende seu trabalho como downloads digitais, então você pode querer exibir imagens grandes para mostrar aos clientes potenciais a sua verdadeira qualidade.

Mesmo que você gerencie uma loja WooCommerce para produtos físicos de comércio eletrônico, você ainda pode precisar exibir algumas imagens em tamanho real. Você pode usar uma imagem em miniatura do produto, na qual os usuários podem clicar para ver o tamanho original da imagem e ampliar os detalhes do item.

Dito isso, imagens grandes podem causar muitos problemas. Elas podem deixar seu site lento, o que pode afetar negativamente sua otimização para mecanismos de busca (SEO).

Por esse motivo, o WordPress agora redimensiona automaticamente imagens grandes quando você as carrega. Se uma imagem for maior que 2560 pixels de altura e/ou largura, o WordPress a redimensionará proporcionalmente para um tamanho menor, mantendo as dimensões originais da imagem.

A maioria dos provedores de hospedagem WordPress também limita o tamanho do arquivo que você pode enviar para a biblioteca de mídia. Isso pode ser um obstáculo se você tiver muitas imagens grandes para exibir.

Se você quiser alterar o limite de tamanho, poderá ler nosso guia sobre como aumentar o tamanho máximo de upload de arquivos no WordPress.

Agora, vamos ver como você pode exibir imagens em tamanho real em seu site WordPress. Temos 4 métodos para fazer isso. Alguns podem funcionar melhor para imagens únicas, enquanto outros são melhores para várias. Simplesmente use os links abaixo para pular direto para o seu método preferido:

• Método 1: Use o URL da Imagem em Tamanho Real (Melhor para Imagens Únicas)
• Método 2: Desativar o Redimensionamento de Imagens no WordPress (Recomendado para Vários Arquivos)
• Método 3: Desativar o Redimensionamento de Imagens com um Plugin (Para Iniciantes Completos)
• Método 4: Abrir Imagens WordPress de Largura Total em um Lightbox (Melhor para Galerias)
• Perguntas Frequentes Sobre Imagens em Tamanho Real
• Bônus: Otimize Suas Imagens para Melhor Velocidade e SEO

Método 1: Use o URL da Imagem em Tamanho Real (Melhor para Imagens Únicas)

Se você deseja exibir apenas uma ou duas imagens grandes em seu site, pode simplesmente adicioná-las usando os URLs de imagem originais.

Quando você carrega uma imagem que excede as dimensões máximas, o WordPress redimensionará essa imagem para criar uma versão menor. No entanto, a imagem original e maior permanece intacta.

Primeiro, vá para Mídia » Biblioteca no painel do WordPress. Certifique-se de alterar sua visualização para a visualização de ‘Lista’.

Depois disso, passe o mouse sobre sua imagem grande. Procure aquela cujo nome de arquivo termina com ‘-scaled’.

Quando o botão ‘Copiar URL’ aparecer, clique nele.

Com isso feito, você pode colar o URL da imagem na barra de endereço do seu navegador e excluir ‘-scaled….’ do final do URL da imagem. Tenha cuidado para não remover o formato da imagem (.png, .jpg, .gif, etc.).

Portanto, se o URL da imagem dimensionada for http://example-website.local/wp-content/uploads/2024/03/example-image-scaled.jpg, então o seu URL original da imagem é http://example-website.local/wp-content/uploads/2024/03/example-image.jpg.

Ao visitar esse URL, você verá a imagem em suas dimensões originais.

Agora, você pode adicionar a imagem em qualquer lugar do seu site. Como estamos adicionando a imagem usando um link, você precisará incorporá-la em vez de selecioná-la na biblioteca de mídia.

Para fazer isso, abra o editor de blocos Gutenberg para a postagem ou página onde você deseja usar a imagem. Em seguida, clique no ícone ‘+ Adicionar Bloco’ para adicionar um novo bloco. Aqui, você pode selecionar o bloco de Imagem.

Com isso feito, clique em ‘Inserir de URL’.

Você pode então simplesmente colar o URL da imagem em tamanho real ou imagem grande no campo e pressionar a tecla ‘Enter’ no seu teclado.

Quando estiver pronto para publicar, basta clicar em ‘Publicar’ ou ‘Atualizar’. Agora você pode visitar esta página ou postagem para ver a imagem em tamanho real em ação.

Para adicionar mais imagens em tamanho real, basta repetir o mesmo processo descrito acima.

Método 2: Desativar o Redimensionamento de Imagens no WordPress (Recomendado para Vários Arquivos)

Se você planeja exibir várias imagens grandes, desativar o recurso de dimensionamento automático é a melhor abordagem. Embora você possa fazer isso editando o arquivo functions.php do seu tema, este método pode ser arriscado e pode quebrar seu site se você cometer um erro.

É por isso que recomendamos usar o plugin gratuito WPCode em vez disso. Como explicamos em nossa análise completa do WPCode, é a maneira mais segura de adicionar trechos de código, e eles não serão apagados quando você atualizar seu tema.

Primeiro, você precisará instalar e ativar o plugin. Para este método, a versão gratuita do WPCode é tudo o que você precisa.

Uma vez ativado, vá para Code Snippets » Add Snippet. Aqui, selecione ‘Add Your Custom Code (New Snippet)’ e clique em ‘Use snippet.’

Agora, digite um título para o trecho de código personalizado. Isso é apenas para sua referência. Depois disso, abra o menu suspenso ‘Code Type’ e selecione ‘PHP Snippet.’

No editor de código, adicione o seguinte snippet de código:

add_filter( 'big_image_size_threshold', '__return_false' );

Em seguida, role para baixo até a seção ‘Insertion’. Certifique-se de que a localização esteja definida como ‘Run Everywhere’ para que o código funcione em todo o seu site.

Quando estiver pronto, role até o topo da tela e clique no alternador ‘Inactive’ para mudá-lo para ‘Active’. Finalmente, clique em ‘Save Snippet’ para tornar o código ativo.

A partir de agora, o WordPress usará as dimensões originais para qualquer imagem grande que você enviar, dando acesso à versão em tamanho real.

Método 3: Desativar o Redimensionamento de Imagens com um Plugin (Para Iniciantes Completos)

Se você achar o método de código muito intimidador, então você pode desativar o redimensionamento de imagem usando o Perfect Images. Este plugin gratuito permite que você crie tamanhos de imagem adicionais no WordPress, atualize os metadados da sua mídia e muito mais.

Primeiro, você precisará instalar e ativar o plugin Perfect Images. Para mais detalhes sobre como instalar um plugin, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, vá para Meow Apps » Perfect Images e marque a caixa Desativar ao lado de ‘Image Threshold.’

O WordPress agora não adicionará mais o atributo ‘-scaled’ a nenhuma imagem, então você pode fazer upload de arquivos de mídia grandes e o WordPress os exibirá no tamanho completo por padrão.

Método 4: Abrir Imagens WordPress de Largura Total em um Lightbox (Melhor para Galerias)

A opção final é adicionar um lightbox de imagem em tamanho real ao seu site. Isso é perfeito se você estiver criando uma galeria de imagens, um slider ou um portfólio de fotos.

Este método permite que você mostre imagens em miniatura menores quando a página é carregada pela primeira vez. Os visitantes podem então clicar em qualquer miniatura para ver a imagem em tamanho real em um pop-up.

Apenas esteja ciente de que você precisa desativar o redimensionamento de imagem antecipadamente usando um dos métodos acima. Caso contrário, seu lightbox mostrará apenas a versão reduzida de suas imagens.

Depois de desativar o redimensionamento, é hora de criar uma galeria. Recomendamos o uso do Envira Gallery. Como explicamos em nossa análise completa do Envira Gallery, é o melhor plugin de galeria de imagens para WordPress devido ao seu poder e facilidade de uso.

Após instalar e ativar o Envira, você pode seguir nosso tutorial passo a passo sobre como adicionar uma galeria com efeito lightbox no WordPress.

Outra ótima opção é o NextGEN Gallery. Achamos este plugin excelente para fotógrafos profissionais ou artistas que precisam de recursos avançados para exibir e vender seu trabalho profissionalmente.

Perguntas Frequentes Sobre Imagens em Tamanho Real

No WPBeginner, recebemos frequentemente perguntas sobre como gerenciar imagens no WordPress. Aqui estão algumas das mais comuns sobre exibi-las em tamanho real.

Exibir imagens em tamanho real deixará meu site mais lento?

Sim, arquivos de imagem grandes podem aumentar o tempo de carregamento da sua página, o que pode prejudicar a experiência do usuário e o SEO. É por isso que é muito importante otimizar suas imagens para a web antes de carregá-las, mesmo ao exibi-las em tamanho real.

Qual é a maneira mais fácil de exibir uma única imagem em tamanho real?

O método mais simples é usar o URL direto da imagem original. Quando o WordPress cria uma versão redimensionada, ele mantém o arquivo original, que você pode então incorporar usando o Bloco de Imagem.

É melhor usar um plugin ou código para desativar o redimensionamento de imagens?

Para a maioria dos usuários, especialmente iniciantes, usar um plugin como o WPCode é a opção mais segura. Adicionar código diretamente aos arquivos do seu tema pode quebrar seu site se não for feito corretamente, enquanto um plugin lida com isso em um ambiente seguro.

Posso exibir uma miniatura que abre a imagem em tamanho real quando clicada?

Com certeza. Usar um plugin de galeria lightbox como o Envira Gallery é a melhor maneira de fazer isso. Os visitantes veem miniaturas menores e de carregamento rápido e podem clicar para ver a versão de alta resolução em um pop-up.

Bônus: Otimize Suas Imagens para Melhor Velocidade e SEO

Exibir imagens em tamanho real pode ser ótimo para mostrar seu trabalho, mas gráficos grandes podem diminuir o tempo de carregamento do seu site e impactar negativamente seu SEO.

Por causa disso, recomendamos fortemente otimizar suas imagens para desempenho. Um plugin como EWWW Image Optimizer pode ajudar comprimindo seus arquivos para torná-los menores e mais rápidos para carregar.

Esperamos que este artigo tenha ajudado você a aprender como exibir imagens em tamanho real no WordPress. Para mais dicas sobre como gerenciar seus arquivos de mídia e melhorar seu site, você pode explorar nossos outros guias:

• Como Otimizar Facilmente Arquivos de Imagem para a Web Sem Perder Qualidade
• Guia para Iniciantes em SEO de Imagens – Otimize Imagens para Mecanismos de Busca
• Como Carregar Imagens Lentamente (Lazy Load) Facilmente no WordPress
• Maneiras de Prevenir o Roubo de Imagens no WordPress
• Como adicionar texto sobre uma imagem no WordPress
• Ótimos Plugins do WordPress para Gerenciar Imagens (Atualizado)

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.