Tamanhos de imagem do WordPress explicados

Os tamanhos de imagem do WordPress às ​​vezes podem ser um pouco misteriosos! Você já viu esta página de configurações de mídia em sua área de administração e se perguntou o que é?

Neste artigo, vamos analisar os tamanhos de imagem do WordPress, o que eles são e como isso pode afetar coisas como os tempos de upload. Além disso, também veremos como o WordPress utiliza esses diferentes tamanhos de imagem em layouts de sites. E, finalmente, veremos como você pode remover tamanhos de imagem desnecessários ou adicionar seu próprio tamanho personalizado.

Qual é o papel dos tamanhos de imagem no WordPress?

É muito importante que as imagens do seu site sejam bonitas, nítidas e de alta qualidade. Existem vários elementos que ditarão isso, incluindo o tamanho físico da imagem (tanto as dimensões quanto o tamanho do arquivo) e a resolução da imagem. Se a sua imagem for muito grande (por exemplo, 10.000px de largura) e o tamanho do arquivo for muito grande (ou seja, mais de 1 MB ou mais), você começará a diminuir a velocidade de carregamento do seu site. Por outro lado, se o tamanho da imagem for muito pequeno, você provavelmente verá uma degradação na qualidade da imagem... em outras palavras, ela pode começar a parecer embaçada ou granulada.

Hospede seu site com a Pressidium

GARANTIA DE DEVOLUÇÃO DO DINHEIRO DE 60 DIAS

VEJA NOSSOS PLANOS

O WordPress tenta encontrar um equilíbrio servindo o tamanho ideal da imagem dependendo da localização da imagem. Ele faz isso criando 3 tamanhos de imagem diferentes cada vez que você carrega uma imagem para a Biblioteca de Mídia do WordPress. Estes são 'Tamanho da miniatura', 'Tamanho médio' e 'Tamanho grande' com dimensões de 150×150 pixels, 300×300 pixels (máximo) e 1024×1024 pixels (máximo), respectivamente. Finalmente, ele também armazenará uma imagem 'tamanho completo', que é o tamanho original da imagem enviada.

Esses tamanhos, juntamente com os tamanhos adicionais que veremos mais tarde, são usados ​​pelo WordPress em várias posições no layout do frontend. Isso é feito para que a imagem usada a) pareça boa e b) carregue rapidamente.

Examinando os tamanhos de imagem do WordPress com mais detalhes

Vamos ver um exemplo para que você possa ver exatamente o que acontece 'nos bastidores' quando você carrega uma imagem no WordPress. Para os propósitos deste exemplo, vamos carregar uma imagem com o nome 'post1-feature-image'. Tem 294KB de tamanho e mede 2089×1175 pixels e vamos fazer isso com o tema padrão do WordPress Twenty Twenty ativo (outros temas podem alterar a forma como as imagens são tratadas pelo WordPress).

Tendo carregado esta imagem através da Biblioteca de Mídia do WordPress, podemos nos conectar ao nosso site usando um cliente FTP e, se formos para a pasta Upload, veremos que várias versões de nossas imagens foram criadas.

Destacado em vermelho, você verá nossos tamanhos de imagem padrão. A miniatura foi cortada, pois está definida como padrão nas configurações de mídia.

O 'Tamanho médio' e o 'Tamanho grande' foram redimensionados de forma a evitar a alteração das proporções reais da imagem. Então, é por isso que, por exemplo, o 'tamanho médio' é 300×169 em vez de 300×300. O restante das imagens geradas são resultado de alguns arquivos principais do WordPress e do código do tema Twenty Twenty.

Obtendo Técnico!

Se você estiver interessado no código por trás do que está acontecendo quando os tamanhos de imagem adicionais são criados, esta seção do artigo é para você. Se não, sinta-se à vontade para pular para o próximo capítulo!

O WordPress está puxando instruções de um arquivo chamado media.php que está localizado dentro da pasta wp-includes/. Vá para isso, linha 4861 e você verá o seguinte:

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpg está sendo criado como resultado do tamanho 'medium_large' que foi adicionado no WordPress versão 4.4 para melhor suporte a imagens responsivas e pode ser visto em vários dispositivos portáteis. Está definido na pasta “wp-admin/includes” no arquivo schema.php linha 522

 // 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

e solicitado no arquivo image.php na linha 86:

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg e post1 post1-feature-image-1980x1114.jpg são gerados a partir do tema 'Twenty Twenty' dentro do arquivo functions.php na linha 53:

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

Isso é feito porque o tema Twenty Twenty usa 1200px como tamanho de imagem para imagens em destaque. Se criarmos uma postagem de teste e adicionarmos uma imagem em destaque e, em seguida, na página de postagem única do frontend, podemos ver como esse tamanho é usado clicando com o botão direito do mouse na imagem em destaque e olhando no inspetor do navegador.

Finalmente, a imagem de 1980px é o tamanho usado para a imagem em destaque dos outros modelos de postagem. Você pode ver isso alterando o modelo de postagem de teste para 'Modelo de capa'. Então, no inspetor CSS do elemento HTML da imagem de capa podemos ver como esse tamanho é usado:

Sempre vale a pena certificar-se de que qualquer imagem que você enviar seja mais larga do que as larguras da imagem em destaque e capa para que pareçam nítidas. O WordPress pode reduzir o tamanho das imagens de forma eficaz, mas não pode escalar uma imagem pequena e torná-la boa.

Remova tamanhos de imagem desnecessários do WordPress

Como vimos, o WordPress está ocupado produzindo uma variedade de tamanhos de imagem sempre que fazemos upload de uma imagem para nossa Biblioteca de mídia. Mas será que realmente precisamos de todas essas imagens? Na realidade não temos. Não só diminui a velocidade com que as imagens são carregadas, pois o WordPress está tendo que trabalhar em segundo plano criando esses vários tamanhos de imagens, mas também ocupa espaço de armazenamento que não precisamos usar em nosso servidor. Então, como paramos o WordPress de criar tamanhos de imagem que não precisamos? Leia mais para descobrir!

Observação: a menos que você esteja seguindo estas instruções em um site de demonstração, recomendamos que você implemente as alterações descritas abaixo no arquivo functions.php de um tema filho. As alterações feitas no arquivo functions.php em um tema pai serão apagadas na próxima vez que o tema for atualizado.

Remova os tamanhos de imagem padrão do WordPress

Isso pode ser feito facilmente editando o arquivo functions.php do tema e adicionando o seguinte código:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

Para testar, vamos carregar uma nova imagem (no nosso exemplo, isso é chamado post2-featured-image) para a biblioteca de mídia e atualizar nossa visualização FTP da pasta de upload.

Como você pode ver, ao dizer ao WordPress para remover os 4 tamanhos de imagem padrão através do nosso arquivo functions.php, paramos o WordPress para criá-los em nossa pasta de mídia. Seguindo em frente, esta simples atualização do código do nosso tema significa que não vamos entupir nosso servidor com tamanhos de imagem indesejados. Isso economizará espaço e acelerará o processo de upload da imagem.

Removendo tamanhos de imagem antigos da biblioteca de mídia

Você deve ter notado que, embora os 4 tamanhos de imagem padrão não tenham sido criados para nossa nova imagem que carregamos, a imagem carregada anteriormente ainda tem todas as 8 variantes salvas na biblioteca de mídia. Com toda a probabilidade, a menos que este seja um site totalmente novo, você terá carregado dezenas, senão centenas de imagens e em todos os casos esses tamanhos 'extras' terão sido criados. Então o que fazer?

A primeira coisa a verificar é que você precisa dessas imagens? Antes de prosseguir com a remoção de imagens geradas pelo WordPress, você terá que confirmar que esses tamanhos não são mais usados. Verifique as postagens do seu blog, imagens em destaque e qualquer outra parte do seu site para garantir que nenhum dos tamanhos antigos ainda esteja em uso.

Uma ótima maneira de lidar com esses arquivos indesejados das imagens antigas é usar o plug-in Force Regenerate Thumbnail que passará e os excluirá automaticamente. Instale e ative o plug-in e, em seguida, pressione o botão 'Regenerar todas as miniaturas' no menu do plug-in (Ferramentas->Forçar a regeneração de miniaturas).

Atualize sua visualização de pasta de mídia FTP e você verá que as imagens padrão do WordPress desapareceram. Agradável!

Outra maneira fácil de obter o mesmo resultado para os tamanhos padrão é alterar o valor das dimensões para “0” em Configurações> Mídia no arquivo wp-admin. Você então verá algo assim:

Um método alternativo é alterar o update_option( 'SIZE_w/h', 0 ); dentro de functions.php. Lembre-se de fazer isso com um arquivo functions.php de um tema filho para que suas alterações não sejam perdidas quando você atualizar o tema posteriormente.

 update_option( 'thumbnail_size_h', 0 ); update_option( 'thumbnail_size_w', 0 ); update_option( 'medium_size_h', 0 ); update_option( 'medium_size_w', 0 ); update_option( 'large_size_h', 0 ); update_option( 'large_size_w', 0 );

Quando essa atualização for feita, você verá que o que refletirá o valor das dimensões nas configurações de mídia (de dentro do WP Admin) agora foi atualizado para 0.

Remover tamanhos de imagem de tema adicionais

Agora lidamos com sucesso com as imagens padrão produzidas pelo núcleo do WordPress. Agora podemos seguir em frente e abordar as imagens criadas pelo tema (neste caso, Twenty Twenty). Se, como nossos tamanhos de imagem padrão, você concluiu que eles não são necessários, você pode fazer algumas alterações no código do tema para impedir que o WordPress produza esses tamanhos no futuro.

Para fazer isso, usaremos o gancho init e a função principal remove_image_size. Copie o código abaixo e cole-o em seu arquivo functions.php. Se você não estiver usando o tema Twenty Twenty como estamos aqui, substitua os nomes 'post-thumbnail' e 'twentytwenty-fullscreen' pelo nome do seu tema ativo.

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

Se carregarmos uma nova imagem agora e verificarmos nossa pasta de upload através do nosso cliente FTP, veremos que todos os tamanhos são gerados, exceto 'post-thumbnail' e 'twentytwenty-fullscreen'.

Adicione seu próprio tamanho de imagem personalizado

Agora que aprendemos como remover tamanhos de imagem redundantes no WordPress, vamos ver como podemos adicionar nossos próprios tamanhos de imagem personalizados de acordo com as necessidades do nosso modelo.

Como decidimos quais tamanhos de imagem precisamos?

Supondo que você tenha um site com uma coluna principal com largura de 960px onde a imagem do destaque está no topo e o conteúdo do post abaixo. O tamanho de imagem desejado será de 960px então. Não se esqueça de calcular também o preenchimento CSS, se houver. Se os elementos pai tiverem uma soma de 20px de preenchimento, por exemplo, a largura certa para a imagem será de 920px. É 960px menos 20px para o preenchimento esquerdo menos 20px para o preenchimento direito.

Registrar Novos Tamanhos de Imagens

Uma maneira simples de registrar novo(s) tamanho(s) é usar a função add_image_size() embutida que é fornecida pelo WordPress. A estrutura da função é:

 add_image_size( name, width, height, crop )

A maioria dessas opções são autoexplicativas. A última opção (cortar) determina se o WordPress respeita as proporções de nossa imagem ao redimensionar ou se corta nossa imagem. Se a opção de corte estiver definida como 'true', a imagem será cortada e as proporções não serão respeitadas. Se a opção de corte for ignorada ou definida como falsa, nossas proporções de imagem serão respeitadas.

Vamos tentar isso em ação e monitorar o resultado usando uma imagem de teste de 2089×1175 pixels.

Primeiro vamos adicionar este código:

 add_image_size( 'new-post-thumb', 220, 180 );

Isso gerará um post2-feature-image-220x124.jpg em vez de 220×180 em nossa pasta de uploads porque o recorte não está definido (falso). O mesmo aconteceria se você inserir o seguinte:

 add_image_size( 'new-post-thumb', 220, 180, false );

Se, no entanto, você definir o crop para true assim, uma imagem post2-feature-image-220x180.jpg será salva.

 add_image_size( 'new-post-thumb', 220, 180, true );

Por fim, você pode ditar a maneira como o corte será posicionado. Em vez de 'true', basta usar opções como 'left' ou 'top' ou ambos:

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

A matriz especifica o local do corte. Os valores que podem ser usados ​​são:

Para x_crop_position: 'esquerda', 'centro' ou 'direita'.
Para y_crop_position: 'top', 'center' ou 'bottom'.

A saída em cada caso será uma parte diferente da imagem original. aqui estão alguns exemplos:

Uma alternativa para fazer isso manualmente adicionando código ao nosso tema é usar um plug-in como Tamanhos de imagem simples. Mesmo assim, é útil entender o que está acontecendo nos bastidores, mesmo que você use um plugin como este.

Conclusão

Usar os tamanhos de imagem corretos no WordPress é importante – não apenas garante uma experiência de usuário de alta qualidade, apresentando imagens nítidas e de alta resolução para o visualizador do site, mas também afeta significativamente os tempos de carregamento e o uso do servidor. Espero que este artigo tenha ajudado você a entender a importância dos tamanhos das imagens no WordPress e as maneiras de substituir, remover ou expandir os tamanhos das imagens para atender às necessidades do seu site, bem como como você pode economizar muito espaço no servidor interrompendo o WordPress gerando tamanhos desnecessários de cada imagem que você carrega.