tamanhos de imagem WordPress explicado

tamanhos de imagem WordPress pode, por vezes, ser um pouco de um mistério! Você já viu esta página de configuração de mídia em sua área de administração e se perguntou o que é?

configurações de mídia

neste artigo vamos executar através do WordPress tamanhos de imagem, o que eles são e como isso pode afetar coisas como tempos de carregamento. Além disso, vamos também olhar para como o WordPress utiliza estes diferentes tamanhos de imagem em layouts do site. E finalmente vamos dar uma olhada em como você pode remover tamanhos desnecessários de imagem ou adicionar o seu próprio tamanho personalizado.

Qual é o papel dos tamanhos de imagem no WordPress?

é muito importante que as imagens no seu site fiquem bonitas e nítidas e de alta qualidade. Existem vários elementos que irão ditar isso, incluindo o tamanho físico da imagem (ambas as dimensões e tamanho do arquivo) e a resolução da imagem. Se sua imagem é muito grande (por exemplo, 10,000 px de largura) e o tamanho do arquivo é muito grande (ou seja, em excesso de 1mb ou assim) você vai começar a diminuir a velocidade de carga do seu site. Por outro lado, se o tamanho da imagem for muito pequeno, então você provavelmente verá uma degradação na qualidade da imagem… em outras palavras, ela pode começar a parecer desfocada ou granulada.

hospedar o seu site com o Presidium

60-Garantia dia dinheiro de volta

ver nossos planos

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 WordPress. Trata-se de “miniaturas”, “dimensões médias” e “dimensões grandes” com dimensões de 150×150 pixels, 300×300 pixels (Máximo) e 1024×1024 pixels (Máximo), respectivamente. Finalmente, ele também vai armazenar uma imagem de ‘tamanho completo’ que é o tamanho original da imagem enviada.

estes tamanhos, juntamente com tamanhos adicionais que mais tarde vamos olhar são usados pelo WordPress em várias posições no layout frontend. Isto é feito para que a imagem usada tanto a) Parece bom e B) carrega rapidamente.

examinando os tamanhos das imagens WordPress com mais detalhes

vamos passar por um exemplo para que você possa ver exatamente o que acontece nos bastidores quando você carrega uma imagem para o WordPress. Para efeitos deste exemplo, vamos enviar uma imagem com o nome ‘post1-feature-image’. É 294KB em tamanho e medidas 2089×1175 pixels e vamos fazer isso com o WordPress padrão vinte tema 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 WordPress podemos conectar ao nosso site usando um cliente FTP e, se formos para a pasta de Upload, veremos que várias versões de nossas imagens foram criadas.

realçado a vermelho, verá os nossos tamanhos de imagem predefinidos. A miniatura foi cortada como este é definido como um padrão através das configurações de mídia.

o “tamanho médio” e o “tamanho Grande” foram dimensionados de forma a evitar alterar as proporções reais da imagem. Por isso, por exemplo, o “tamanho médio” é de 300×169 em vez de 300×300. O resto das imagens que foram geradas são um resultado de alguns arquivos WordPress core e do código de vinte temas.

Getting Technical!

se você está interessado no código por trás do que está acontecendo quando os tamanhos adicionais de imagem são criados, então esta seção do artigo é para você. Se não, sinta-se à vontade para saltar para o próximo capítulo!O WordPress está puxando instruções de um arquivo chamado mídia.php que está localizado dentro do wp-includes/ pasta. Cabeça para isso, a linha 4861 e você verá a 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 da “medium_large’ tamanho que foi adicionado no WordPress versão 4.4 para melhor receptivo de suporte de imagem e pode ser visto em vários dispositivos portáteis. Ele é definido na pasta “wp-admin/includes” no esquema de arquivos.linha php 522

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

e solicitado na imagem.ficheiro php em 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-feature-image-1980x1114.jpg são gerados a partir do tema’ vinte e vinte ‘ dentro das funções.ficheiro 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 );

isto é feito porque o Vinte tema usa 1200px como o tamanho da imagem para imagens em destaque. Se criarmos um post de teste e adicionarmos uma imagem em destaque e, em seguida, na primeira página de post simples, podemos ver como este tamanho é usado, clicando com o botão direito da imagem em destaque e olhando no inspetor do navegador.

inspector

finalmente, a imagem de 1980px é o tamanho usado para a imagem de destaque dos outros modelos post. Você pode ver isso mudando o modelo de Teste post para ‘modelo de capa’. Em seguida, no inspector CSS do elemento HTML da imagem de capa podemos ver como este tamanho é usado:

inspector

vale sempre a pena ter certeza de que qualquer imagem que você upload é maior do que as larguras de imagem de destaque e capa, a fim de que eles parecem afiados. WordPress pode reduzir os tamanhos de imagem de forma eficaz, mas não pode escalar uma pequena imagem e fazê-lo parecer bom. Como vimos, o WordPress está ocupado produzindo uma gama de tamanhos de imagens sempre que carregamos uma imagem para a nossa biblioteca de mídia. Mas precisamos mesmo de todas estas imagens? Na realidade, não. Não só diminuir a velocidade em que as imagens são carregadas como o WordPress é ter que trabalhar em segundo plano, a criação desses vários tamanhos de imagens, mas também se ocupa de armazenamento que não precisamos no nosso servidor. Então, como paramos WordPress criando tamanhos de imagem que não precisamos? Leia para descobrir!

Nota: A menos que você esteja seguindo estas instruções em um site de demonstração, nós recomendamos que você implemente as mudanças descritas abaixo nas funções.ficheiro php de um tema infantil. Mudanças nas funções.o ficheiro php num tema pai será apagado da próxima vez que o tema for actualizado.

remova os tamanhos predefinidos de imagem do WordPress

isto pode ser facilmente realizado editando as funções do tema.php e adição do 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); // 150x150 pixels unset( $sizes); // 300x300 pixels(maximum) unset( $sizes); // 1024x1024 pixels(maximum) unset( $sizes); // 768px width return $sizes;}

para testar, vamos enviar uma nova imagem (no nosso exemplo isto é chamado post2-featured-image) para a biblioteca de mídia e atualizar a nossa Vista FTP da pasta de upload.

como você pode ver, dizendo ao WordPress para remover os 4 tamanhos de imagem padrão através de nossas funções.arquivo php nós paramos WordPress para criar estes em nossa pasta de mídia. Seguindo em frente, esta simples atualização para o nosso código de tema significa que não vamos entupir o nosso servidor com tamanhos de imagem indesejados. Isto irá poupar espaço e acelerar o processo de envio da imagem.

remover os tamanhos de imagens antigas da Biblioteca Media

pode ter notado que, embora os 4 tamanhos de imagens predefinidos não tenham sido criados para a nossa nova imagem que enviámos, a imagem anteriormente enviada ainda tem todas as 8 variantes guardadas na biblioteca media. Com toda a probabilidade, a menos que este seja um site novinho em folha, você terá carregado dezenas, se não centenas de imagens e em todos os casos estes tamanhos ‘extra’ terão sido criados. Então, o que fazer? A primeira coisa a verificar é se precisa destas imagens? Antes de prosseguir com a remoção de imagens geradas pelo WordPress você terá que confirmar que estes tamanhos não são mais usados. Verifique suas postagens no blog, imagens em destaque e qualquer outra parte do seu site para se certificar de que nenhum dos tamanhos antigos ainda estão em uso.

uma grande maneira de lidar com estes arquivos indesejados das imagens antigas é usar o plugin de recuperação de força Thumbnail que irá passar e apagá-los automaticamente. Instalar e activar o ‘plugin’ e depois carregar no botão ‘regenerar todas as miniaturas’ dentro do menu ‘plugin’ (Ferramentas->obrigar a regenerar as miniaturas).

atualize a sua área de pasta de mídia FTP e você vai ver que as imagens padrão WordPress foram embora. Boa!

outra maneira fácil de alcançar o mesmo resultado para os tamanhos padrão é mudar o valor de suas dimensões para” 0 ” a partir de configurações internas > mídia no wp-admin. Vais ver algo assim.:

um método alternativo é alterar o update_option( ‘SIZE_w/h’, 0 ); dentro das funções.pai. Lembre-se de fazer isto a uma função de tema infantil.ficheiro php para que as suas alterações não se percam quando actualizar o tema num ponto posterior.

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 esta actualização for feita, verá que o valor que irá reflectir as dimensões nas configurações de Media (a partir do wp Admin) foram agora actualizadas para 0.

remover tamanhos adicionais de imagem Tema

agora lidamos com sucesso com as imagens padrão produzidas pelo Núcleo WordPress. Podemos agora seguir em frente e abordar as imagens criadas pelo tema (neste caso, vinte). Se, como os nossos tamanhos de imagem padrão, você concluiu que estes não são necessários, então você pode fazer algumas alterações ao seu código tema para parar WordPress produzir esses tamanhos no futuro.

para fazer isso vamos usar o gancho init e a função core remove_ imagee_size. Copie o código abaixo e cole-o em suas funções.ficheiro php. Se você não está usando o vinte temas como estamos aqui, em seguida, substituir os nomes ‘post-thumbnail’ e ‘twentytwenty-fullscreen’ com o 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 nós upload de uma nova imagem agora e verifique a nossa pasta de upload através do nosso cliente de FTP vamos ver que todos os tamanhos são gerados, exceto ‘post-thumbnail’ e ‘twentytwenty-tela cheia’.

adicione o seu próprio tamanho de imagem personalizado

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

como é que decidimos de que tamanhos de imagem precisamos?

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

Registre novos tamanhos de imagens

uma maneira simples de registrar novos tamanhos é usar a função add_image_size incorporada() que é fornecida pelo WordPress. A estrutura de funções é:

add_image_size( name, width, height, crop )

a maioria destas opções são auto-explicativas. A última opção (recorte) dita se o WordPress respeita as proporções da nossa imagem ao redimensionar ou se cultiva a nossa imagem. Se a opção de colheita for definida como “verdadeira”, então a imagem será cortada e as proporções não serão respeitadas. Se a opção de colheita for ignorada ou configurada como falsa, então nossas proporções de imagem serão respeitadas.

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

Primeiro vamos adicionar este código:

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

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

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

se, no entanto, definir a colheita como verdadeira desta forma, então uma imagem post2-feature-image-220x180.jpg será salva.

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

por último, pode ditar a forma como a cultura será posicionada. Em vez de ‘true’, basta usar opções como ‘left’ ou ‘ top ‘ ou ambas:

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

a matriz especifica a localização da colheita. Os valores que podem ser usados são:

para x_crop_posição:’ 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 através da adição de código ao nosso tema é usar um plugin, como tamanhos de imagem simples. No entanto, é útil para entender o que está acontecendo nos bastidores, mesmo se você usar um plugin como este.

conclusão

usar os tamanhos de imagem corretos no WordPress é importante-não só garante uma experiência de usuário de alta qualidade, apresentando imagens agudas e de alta resolução para o visualizador do site, mas também impacta significativamente os tempos de carga e o uso do servidor. Espero que este artigo ajudou a compreender a importância dos tamanhos de imagem no WordPress e as maneiras que você pode substituir, remover ou expandir a imagem tamanhos para atender as necessidades de seu site, bem como como você pode economizar uma tonelada de espaço de servidor parando WordPress geração desnecessária tamanhos de cada imagem que você enviar.

hospedar o seu site WordPress com Presídio!

Ver nossos planos de preços

Deixe uma resposta

O seu endereço de email não será publicado.