Guia Definitivo do TAMANHO DAS IMAGENS para Sites WordPress e Elementor [Não Erre Mais!]

eu vou dar um guia definitivo de tamanho de imagens aqui para vocês então vamos lá pessoal eu estou aqui no site da inovarenutri que foi um site institucional que eu ensinei vocês a criar com elemento fria aqui no canal vou deixar o link no card e na descrição se você quiser ir lá aprender Tá bom vou usar ele aqui como exemplo para poder mostrar para vocês algumas coisas então assim essa é a dúvida que vocês mais tem na vida né e eu vou dar o guia definitivo de tamanho de imagens aqui para vocês primeiro ponto

banner slides que se estendem a tela toda como esse banner que está aqui né Toda vez que você tem um banner que se estende na largura inteira da tela para desktop ou seja para computador você tem que deixar ele de largura de largura no desktop 1920 tá porque é um tamanho Universal que vai servir tanto para telas de computadores maiores quanto para a tela de computadores menores de altura né altura que é isso daqui vai depender do tamanho que você quer que fique se você quiser que fique mais estreito você coloca mais estreito se você

quiser que fique mais largo você coloca maior Eu geralmente uso 1920 por 650 que fica mais ou menos esse tamanho aqui tá é um bom número aí para você se basear mas que nem eu falei você vai fazer no teste se você quiser que fique mais estreito coloca menor Se quiser que fique mais largo coloca maior Ok E aí é importante ressaltar Quando você vai otimizar um site Inclusive tem vídeo no canal ensinando otimizar site tá que a gente vai assistir Já até sabe disso mas enfim Quando você vai otimizar um site você tem que

otimizar ele para celular e para computador tá otimizar para deixar mais rápido então assim no computador a imagem tem que ser entregue né nesse tamanho de 1920 e para celular o ideal é que de largura tenha 1080 que é a largura ideal para dispositivos móveis aqui para celular só que assim é a mesma coisa do desktop se você quiser que fique mais estreito fique maior mais alto você coloca a altura no tamanho maior se você quiser que fique quadrado por exemplo esse daqui tá mais ou menos quadrado Então você coloca 1080 por 1080 por 1.200

1100 né Depende de como que você quer que fique o seu layout E aí conforme for aqui o seu design você tem que mudar as imagens para elas não ficarem pesadas então por exemplo aqui nesse banner quando é um banner como esse daqui né só a foto de fundo você consegue fazer isso aqui pelo elementor mesmo então aqui o meu tá aqui na sobreposição de fundo né E a minha imagem aqui ela tá ó 1920 por 650 Ok quando eu vou otimizar o site eu tenho que vir aqui colocar na função do celular tá vendo

e vir aqui e colocar a imagem do tamanho para celular senão o que que acontece o código do site ele tem que fazer um código para poder reduzir essa imagem que está 1900 e tanto para apenas 1080 E assim se você trocar essa imagem colocar imagem também certo o site ele não precisa gerar esse código logo é um recurso a menos para o navegador ter que processar e consequentemente o site carrega mais rápido tá fora que a dimensão é completamente diferente né quando você tá fazendo um site para um computador o tamanho e o layout

da imagem fica de um jeito se você apenas Coloca ele deixa ele desse mesmo tamanho aqui no celular o que pode acontecer dependendo do layout que você tiver feito é ficar todo errado é cortar a cabeça da pessoa né Se tiver uma pessoa cortar arte então é interessante que você faça um tamanho de imagem um banner diferente para cada tipo de tamanho de tela vou te ensinar por exemplo Como reduzir só esse daqui se for apenas uma imagem por exemplo você pode entrar aqui no campo clicar aqui em criar um design E aí você vai

colocar aqui um tamanho personalizado e você coloca no tamanho que você quer que fique né Por exemplo o mi 80 por sei lá mil e cem Criar novo design aí eu venho aqui pego a imagem né que eu usei lá no banner ou foi essa imagem aqui arrasto ela para cá E aí eu redimensiono no tamanho aqui que eu achar que fica legal aqui no campo tem isso se você clicar com o botão direito você pode colocar o definir imagem com plano de fundo que aí ele já coloca tá vendo aí se você clica duas

vezes você consegue redimensionar aqui tá vendo colocar aqui no jeito que você quer que fique por exemplo Deixar mais aqui a parte das frutas né E aí você já vem aqui em compartilhar clica aqui embaixo e já baixa a imagem png ou jpg do jeito que você quiser tá vendo aí você já baixa a imagem E aí você vem aqui no site e coloca a imagem insere aqui a mídia e já vai ficar ali tá vendo com aquele novo redimensionamento que você fez e aí para o computador vai continuar aquela imagem e aí para o

celular ou para o tablet enfim o tamanho que você tiver colocado vai ficar aqui no tamanho que você colocou tá Então primeiramente é isso extensão da tela toda né banner e também slides serve para slides rotativos também no desktop 1920 de largura de altura depende do tamanho que você quer que fique e para o mobile né para o celular de largura 1080 e de altura depende do tamanho que você quer que fique ok ok uma coisa que você tem que observar para imagens que você faz Artes né Artes completas como essa daqui do site que

eu fiz essa aqui é uma loja de dropshipping que eu ensinei no canal tá eu ensinei fazer esse banner no campo aqui também tem vídeo disso aqui no canal E aí você vai ver o seguinte quando você for fazer uma arte assim você tem que deixar o Espaço das extremidades livre para que não aconteça de quebrar se eu tivesse pegado por exemplo esse título e deixado ele bem aqui na extremidade o que que aconteceria quando eu colocasse uma tela pequena ia cortar tudo porque não tem espaço suficiente então quando você for fazer um banner de

arte você tem que pensar sempre nisso o espaço das extremidades então em cima embaixo dos lados você tem que deixar um espaço livre não é para deixar em branco não tá pelo amor de Deus né para criar arte até aqui começa cria uma arte até aqui o resto você deixa um branco um trem cortado não é para você pensar na arte como um todo então se aqui no meu por exemplo tem igual eu fiz aqui umas Fontes eu vou colocar essa fonte na extensão da imagem inteira só que o principal da arte que é esse

texto e essa foto vou colocar bem no centro eu vou deixar o espação em cima embaixo e dos lados e aí quando você for configurar a imagem que você deixar ela centralizada de modo que apareça aqui no meio a arte você quer e se eu colocar numa tela menor e se eu colocar numa tela maior ela ainda se ajuste ainda mostra que o que eu tô querendo mostrar então aqui ó por exemplo tem um espação aqui em cima o espaço menor Isso numa tela menor tá vendo o espaço em cima e embaixo do lado do

outro e se eu coloco numa tela maior não corta nada porque eu deixei espaço suficiente para isso então quando você for fazer uma arte você tem que pensar nisso Ok Ok Isso tudo que eu falei são para imagens que estendem a tela toda de um lado outro da tela para outros tipos de imagem qualquer outro tamanho de imagem que não seja esse você vai pensar um pouquinho assim se 1920 a extensão da tela toda né se eu preciso de uma imagem que seja metade da tela Então vai ser mais ou menos metade disso entende então

você tem que fazer mais ou menos esse cálculo isso aqui por exemplo essa imagem é mais ou menos um quarto Acho que menos do que isso da extensão da tela toda né então você faz mais ou menos essa conta 1920 dividido por 4 né então teria que ficar mais ou menos aproximadamente 1980 de largura essa imagem aqui tá bom mas o que que eu tô falando mais ou menos não precisa ser exato porque depois a gente usa um plugin chamado smush ó que você pode vir aqui plugin se Adicionar novo procurar por Smash é esse

daqui ó Smash lazy loud imagens tem um vídeo só sobre ele aqui no canal eu não vou ensinar presta atenção tá não vou ensinar nesse vídeo como usa o Smurf porque tem um vídeo só sobre o Smurf aqui são várias configurações um vídeo que eu abordei só isso aqui eu estou dando um guia de tamanho de imagens Ok tem o vídeo só do Smash aqui no card na descrição para vocês mas continua na explicação o Smurf depois você pode passar ele e ele te diz exatamente o tamanho que tá sendo representado a imagem aqui no

layout então por exemplo se eu clico aqui ó tá vendo ele fica aqui amarelinho Aí eu clico aqui ele me mostra por exemplo a logo tá falando que a logo ela está no tamanho 400 por 167 só que ela tá sendo representada por 140 e 62 então 14148 né 148 62 é o tamanho certo que essa louca tem que ficar aqui então eu teria que vir aqui na mídia né biblioteca procurar essa imagem de logo e redimensionar ela para esse tamanho que tá verdinho aqui tá vendo Então a gente ó viria aqui e aí é

só você vir aqui editar a imagem vir aqui quanto que é 148 tá vendo ela já redimensiona sozinha na proporção certa então vem aqui em escala salvo e aí pronto ela já fica no tamanho certo aqui ó por exemplo essa ó tô falando que a imagem tá a mil por mil tá vendo que não precisa ser exato você só precisa colocar um tamanho geralmente o ideal é a gente colocar um tamanho maior do que a gente acha que vai ser por exemplo eu chutei que seria mais ou menos 500 480 aqui né eu coloco um

tamanho maior eu coloquei mil por mil que é uma imagem de por um aqui né para poder ficar com layout bonito porque se você coloca uma imagem muito pequena fica embaçado né então eu não sabia como é que eu ia representar ela aqui então eu coloquei um tamanho razoável para que se eu quisesse deixar ela maior ela não ficasse embaçada Se eu quisesse deixar menor não ficasse também ruim tá bom então você coloca um tamanho mais ou menos que você acha que é faz aqui o seu layout e no final você vem passa o Smash

para você deixar a imagem exatamente no tamanho que ela tem que ficar então por exemplo essa daqui tem que ficar 550 né que essa imagem aqui eu venho aqui em editar 550 salvo duas vezes é bom conferir porque às vezes acontece de não salvar tá então você passa para frente volta aqui para trás e vê ó se ela já tá no tamanho certo nesse caso aqui tá E aí depois você vem aqui recarrega o site e Confere se ficou no tamanho certo então por exemplo ó recarreguei aqui e essa de mil e pouco ela não

tá aparecendo mais tá vendo ó Ele já me manda a partir dessas imagens aqui embaixo tá vendo ele fica piscando aqui com a imagem que é tá então faça isso faça um cálculo mais ou menos não precisa colocar exato tamanho da imagem só pensa assim se é mais tensão da imagem tela toda é 1920 Quanto que vai ser se eu for usar a metade da tela se eu for usar um texto da tela tá coloca mais ou menos o tamanho depois passa o Smash para vir aqui e acertar o tamanho certo das imagens Tá ok

então é isso Pessoal espero que vocês tenham gostado se você curtiu deixa um like no vídeo se inscreve no canal ativa o Sininho me segue nas minhas redes sociais um abraço até a próxima tchau