{"id":17207,"date":"2019-10-25T18:20:35","date_gmt":"2019-10-25T21:20:35","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=17207"},"modified":"2025-03-21T18:33:52","modified_gmt":"2025-03-21T21:33:52","slug":"tamanho-imagens-wordpress","status":"publish","type":"post","link":"\/br\/tutoriais\/tamanho-imagens-wordpress","title":{"rendered":"Tudo sobre o tamanho das imagens no WordPress"},"content":{"rendered":"<p>Lidar com imagens no <a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-wordpress\">WordPress<\/a> pode ser um desafio. Se voc&ecirc; n&atilde;o prestar aten&ccedil;&atilde;o nas exig&ecirc;ncias, voc&ecirc; pode bagun&ccedil;ar toda a apar&ecirc;ncia do seu site ou pode inclusive impactar o tempo de carregamento. Por isso, voc&ecirc; precisa aprender sobre o padr&atilde;o do tamanho das imagens do WordPress e como alter&aacute;-las. Relaxe, pegue o seu caf&eacute; e vamos aprender mais essa!&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-como-o-wordpress-processa-imagens\"><strong>Como o WordPress Processa Imagens<\/strong><\/h2><p>Quando voc&ecirc; faz o upload de uma imagem na biblioteca de m&iacute;dia, o WorPress gera, automaticamente, imagens adicionais com tr&ecirc;s tamanhos de imagem padr&atilde;o e armazena em outro local. <\/p><p>Por essa raz&atilde;o, voc&ecirc; v&ecirc; quatro op&ccedil;&otilde;es de imagens quando est&aacute; fazendo o upload de uma imagem. As op&ccedil;&otilde;es s&atilde;o <em>thumbnail <\/em>(miniatura), m&eacute;dio, grande e full-size (tamanho original). <\/p><p>As tr&ecirc;s primeiras op&ccedil;&otilde;es s&atilde;o chamadas de tamanho de imagens padr&atilde;o do WordPress, enquanto a op&ccedil;&atilde;o <em>full-size <\/em>&eacute; o tamanho original da imagem que voc&ecirc; fez upload.<\/p><p>O WordPress cria essas op&ccedil;&otilde;es porque ao usar essas imagens em locais diferentes para serem exibidas exigir&aacute; tamanhos diferentes. Por exemplo, a resolu&ccedil;&atilde;o da imagem em <em>thumbnail <\/em>pode ser diferente da resolu&ccedil;&atilde;o da imagem usada no <em>slide.<\/em><\/p><p>Portanto, voc&ecirc; n&atilde;o precisa editar e redimensionar suas imagens manualmente se quiser usar as mesmas imagens em locais diferentes com resolu&ccedil;&otilde;es diferentes. Voc&ecirc; s&oacute; precisa adicionar uma imagem e o WordPress far&aacute; o resto.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/br\/hospedagem-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-44638\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-qual-e-o-padrao-do-tamanho-das-imagens-do-wordpress\"><strong>Qual &eacute; o Padr&atilde;o do Tamanho das Imagens do WordPress?<\/strong><\/h2><p>Por padr&atilde;o, o WordPress vem com tr&ecirc;s tamanhos de imagens pr&eacute;-estabelecidos. S&atilde;o eles:<\/p><ul class=\"wp-block-list\">\n<li><em>Thumbnail <\/em>(miniatura): <strong>(150px quadrangular)<\/strong>;<\/li>\n\n\n\n<li>Tamanho m&eacute;dio: <strong>(m&aacute;ximo 300px largura e altura)<\/strong>;<\/li>\n\n\n\n<li>Tamanho grande: <strong>(m&aacute;ximo 1024px largura e altura)<\/strong>;<\/li>\n\n\n\n<li>Tamanho original: <strong>(tamanho original da imagem que voc&ecirc; fez upload)<\/strong>.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-como-alterar-o-padrao-do-tamanho-das-imagens-do-wordpress\"><strong>Como Alterar o Padr&atilde;o do Tamanho das Imagens do WordPress<\/strong><\/h2><p>Embora o WordPress j&aacute; oferece tr&ecirc;s tamanhos de imagem padr&atilde;o, se voc&ecirc; perceber que essas op&ccedil;&otilde;es n&atilde;o atendem &agrave;s suas necessidades, existem alternativas. <\/p><p>Talvez voc&ecirc; precise de <em>thumbnails<\/em> menores ou imagens em destaque maiores. Portanto, voc&ecirc; precisa alterar os tamanhos de imagem padr&atilde;o do WordPress. Para fazer isso, siga as etapas abaixo:<\/p><ol class=\"wp-block-list\">\n<li>Acesse o Painel do Administrador;<\/li>\n\n\n\n<li>Passe o <em>mouse <\/em>em <strong>Configura&ccedil;&otilde;es<\/strong> <strong>-&gt; M&iacute;dia;<\/strong><\/li>\n\n\n\n<li>Na janela de configura&ccedil;&otilde;es de m&iacute;dia, voc&ecirc; pode ajustar o pixel desejado para cada tamanho;<\/li>\n\n\n\n<li>Clique em <strong>Salvar Altera&ccedil;&otilde;es <\/strong>para finalizar.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-como-adicionar-tamanho-de-imagens-personalizado-no-wordpress\"><strong>Como Adicionar Tamanho de Imagens Personalizado no WordPress<\/strong><\/h2><p>Ent&atilde;o, voc&ecirc; tem os tr&ecirc;s tamanhos de imagem padr&atilde;o. Digamos que voc&ecirc; tenha uma imagem em tamanho <em>thumbnail<\/em> para sua miniatura, uma imagem de tamanho m&eacute;dio para a imagem do seu <em>post<\/em> e uma imagem de tamanho grande para seu <em>slide<\/em>. <\/p><p>Mas voc&ecirc; percebe que precisa de mais tamanhos de imagem padr&atilde;o para seu <em>banner<\/em>, <em>pop-up<\/em> e <em>widgets<\/em>. Voc&ecirc; pode adicionar tamanhos de imagem personalizados do WordPress? Sim voc&ecirc; pode.<\/p><h3 class=\"wp-block-heading\" id=\"h-1&ordm;-passo-adicionar-tamanhos-de-imagens-personalizados-no-wordpress-via-arquivo-function-php\"><strong>1&ordm; Passo. Adicionar Tamanhos de Imagens Personalizados no WordPress via Arquivo function.php<\/strong><\/h3><p>Na verdade, alguns temas j&aacute; oferecem op&ccedil;&otilde;es adicionais de tamanho de imagem. Mas, se voc&ecirc; n&atilde;o encontr&aacute;-los, adicione o tamanho de imagem personalizado do WordPress que faremos agora.<\/p><p>Voc&ecirc; vai lidar com c&oacute;digos agora. Ent&atilde;o, n&atilde;o esque&ccedil;a de fazer um <strong><a rel=\"noreferrer noopener\" aria-label=\"backup (abre numa nova aba)\" href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/como-fazer-backup-do-seu-site-wordpress\/\" target=\"_blank\">backup<\/a> <\/strong>dos arquivos e <strong><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/como-criar-o-tema-filho-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"criar um tema filho (abre numa nova aba)\">criar um tema filho<\/a><\/strong> do seu WordPress antes de qualquer mudan&ccedil;a.<\/p><ol class=\"wp-block-list\">\n<li>Acesse o painel do administrador;<\/li>\n\n\n\n<li>Passe o ponteiro do mouse em <strong>Apar&ecirc;ncia -&gt; Editor de Temas<\/strong><\/li>\n\n\n\n<li>Edite o arquivo <strong>functions.php<\/strong>;<\/li>\n\n\n\n<li>Copie o <em>script<\/em> abaixo e cole no arquivo <strong>add_theme_support<\/strong>( &lsquo;pop-up-banner&rsquo; );<\/li>\n\n\n\n<li>Aperte o bot&atilde;o <strong>Atualizar Arquivo<\/strong>.<\/li>\n<\/ol><p>O script acima ir&aacute; ativar a fun&ccedil;&atilde;o <strong>add_image_size()<\/strong>. Se j&aacute; estiver ativada, voc&ecirc; pode adicionar novas imagens WordPress como a seguir:<\/p><ol class=\"wp-block-list\">\n<li><strong><code>add_image_size<\/code><\/strong><code>( 'pop-up banner size', 1000, 590 );<\/code><\/li>\n\n\n\n<li><strong><code>add_image_size<\/code><\/strong><code>( 'widget size', 220, 180 );<\/code><\/li>\n<\/ol><p>No exemplo, voc&ecirc; nomear&aacute; os novos tamanhos como&nbsp; &ldquo;<em>Pop-up banner size<\/em>&rdquo; e &ldquo;<em>Widget size<\/em>.&rdquo; Os n&uacute;meros a seguir do tamanho correspondem a largura e altura.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"933\" height=\"347\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/10\/image.png\/public\" alt=\"editando tema wordpress\" class=\"wp-image-17208\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/10\/image.png\/w=933,fit=scale-down 933w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/10\/image.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/10\/image.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/10\/image.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 933px) 100vw, 933px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-2&ordm;-passo-exiba-as-imagens-com-tamanhos-customizados-no-seu-tema\"><strong>2&ordm; Passo. Exiba as Imagens com Tamanhos Customizados no seu Tema<\/strong><\/h3><p>Voc&ecirc; conseguiu adicionar os novos tamanhos de imagem com sucesso, mas ainda n&atilde;o est&aacute; sendo exibido no seu tema. Agora, voc&ecirc; tem que ativar os novos tamanhos ao seu tema.<\/p><p>Primeiro, fa&ccedil;a um backup do seu site antes de qualquer mudan&ccedil;a. Acesse seu arquivo de tema dentro do <em>loop <\/em>de posts e edite-o. Agora, cole o c&oacute;digo:&nbsp;<\/p><ol class=\"wp-block-list\">\n<li><code>&lt;?php <\/code><strong><code>the_post_thumbnail<\/code><\/strong><code>( 'your-specified-image-size' ); ?&gt;<\/code><\/li>\n<\/ol><p>Voc&ecirc; deve alterar &lsquo;your-specified-image-size` com o nome que voc&ecirc; definiu na etapa anterior. Por exemplo, voc&ecirc; pode alter&aacute;-lo para &ldquo;tamanho do banner pop-up&rdquo;. <\/p><p>Depois destas etapas, voc&ecirc; vai encontrar op&ccedil;&otilde;es de tamanho de imagem de banner pop-up ao carregar imagens na sua biblioteca de m&iacute;dia.<\/p><h2 class=\"wp-block-heading\" id=\"h-plugins-para-ajudar\"><strong>Plugins Para Ajudar<\/strong><\/h2><p>Voc&ecirc; definiu um novo tamanho de imagem personalizado no WordPress. Por&eacute;m, essa altera&ccedil;&atilde;o n&atilde;o afetar&aacute; suas imagens anteriores. Para isso, voc&ecirc; precisa regenerar os tamanhos de imagem anteriores.<\/p><p>Para sua sorte, voc&ecirc; n&atilde;o precisa fazer isso manualmente. Existe um plugin chamado <a href=\"https:\/\/wordpress.org\/plugins\/regenerate-thumbnails\/\" target=\"_blank\" rel=\"noopener\">Regenerate Thumbnails<\/a>, que o ajudar&aacute; a atualizar o tamanho das imagens anteriores. Siga as etapas abaixo para fazer isso.<\/p><ol class=\"wp-block-list\">\n<li>Acesse o painel do administrador;<\/li>\n\n\n\n<li>Clique em <strong>Plugins -&gt; Adicionar Novo<\/strong>;<\/li>\n\n\n\n<li>Pesquise por <strong>Regenerate Thumbnails<\/strong>;<\/li>\n\n\n\n<li>Instale e ative o plugin;<\/li>\n\n\n\n<li>Agora, acesse <strong>Ferramentas -&gt; Regenerate Thumbnails<\/strong>;<\/li>\n\n\n\n<li>Clique no bot&atilde;o <strong>Regenerate Thumbnails For X Attachments<\/strong>;<\/li>\n\n\n\n<li>Todas as imagens que voc&ecirc; fez upload anteriormente ser&atilde;o regeneradas para as novas configura&ccedil;&otilde;es de imagem.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Os tamanhos de imagem do WordPress parecem um detalhe pequeno, mas, na verdade, podem causar dor de cabe&ccedil;a. Voc&ecirc; pode descobrir que a imagem que voc&ecirc; carrega n&atilde;o atende ao tamanho exigido.&nbsp;<\/p><p>Para resolver isso, voc&ecirc; pode tentar dois m&eacute;todos. Voc&ecirc; pode alterar os tamanhos de imagem padr&atilde;o do WordPress ou adicionar tamanhos de imagem personalizados. <\/p><p>Antes de configurar o novo tamanho da imagem, lembre-se de que enviar imagens grandes com alta resolu&ccedil;&atilde;o n&atilde;o &eacute; uma boa ideia. Imagens de tamanho grande ocupam muito espa&ccedil;o e diminuem o tempo de carregamento dos sites.&nbsp;<\/p><p>Esperamos que este artigo ajude voc&ecirc; a escolher as imagens certas, no lugar certo, com os tamanhos certos. At&eacute; logo!<br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lidar com imagens no WordPress pode ser um desafio. Se voc&ecirc; n&atilde;o prestar aten&ccedil;&atilde;o nas exig&ecirc;ncias, voc&ecirc; pode bagun&ccedil;ar toda a apar&ecirc;ncia do seu site ou pode inclusive impactar o tempo de carregamento. Por isso, voc&ecirc; precisa aprender sobre o padr&atilde;o do tamanho das imagens do WordPress e como alter&aacute;-las. Relaxe, pegue o seu caf&eacute; [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/tamanho-imagens-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":78,"featured_media":17209,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Saibva como personalizar o tamanho das imagens do WordPress no seu blog com nosso passo a passo simples de seguir.","rank_math_focus_keyword":"tamanho das imagens wordpress","footnotes":""},"categories":[4911],"tags":[6949,6948],"class_list":["post-17207","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-imagens-wordpress","tag-tamanho-das-imagens-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-images-sizes","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/tamanho-imagens-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/tamanos-de-imagenes-en-wordpress","default":0},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/rozmiary-obrazow-w-wordpress","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/wordpress-images-sizes","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-images-sizes","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-images-sizes","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-images-sizes","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/tamanos-de-imagenes-en-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/tamanos-de-imagenes-en-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/tamanos-de-imagenes-en-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/tamanho-imagens-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-images-sizes","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-images-sizes","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-images-sizes","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-images-sizes","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/17207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=17207"}],"version-history":[{"count":5,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/17207\/revisions"}],"predecessor-version":[{"id":49147,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/17207\/revisions\/49147"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/17209"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=17207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=17207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=17207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}