New Dimensions
--
File Size
--
Scale
--
Redimensione imagens para dimensões exatas com bloqueio de proporção e predefinições comuns. Todo o processamento ocorre no seu navegador — nada é enviado a nenhum servidor.
Imagens com tamanho adequado são críticas para a velocidade da página e Core Web Vitals. OneStepToRank monitora suas classificações, acompanha concorrentes e otimiza sua estratégia local de SEO automaticamente.
ComeçarCada plataforma tem requisitos específicos de dimensões de imagem. Usar o tamanho errado faz com que seus visuais cuidadosamente projetados sejam recortados, esticados ou reduzidos de forma que prejudicam sua marca. O Facebook recomenda 1200x630 para pré-visualizações de links e 1080x1080 para publicações no feed. O Instagram usa 1080x1080 para postagens quadradas, 1080x1350 para retrato e 1080x608 para paisagem. As imagens do Twitter/X exibem melhor em 1200x675 pixels. Acertar essas dimensões não é opcional — é a diferença entre uma presença profissional e uma amadora.
Para sites, o princípio fundamental é servir imagens exatamente no tamanho em que serão exibidas. Uma imagem exibida com 600 px de largura em CSS não deve ser um original de 3000 px de largura — o navegador ainda baixa o arquivo completo antes de redimensioná‑lo, desperdiçando largura de banda e atrasando o carregamento da página. A exceção são as telas retina, onde você deve servir imagens em 2× o tamanho de exibição em CSS (ou seja, 1200 px para um espaço de 600 px) para manter a nitidez em telas de alta densidade.
O desenvolvimento web moderno requer servir diferentes tamanhos de imagem para diferentes dispositivos. Um usuário de desktop em um monitor de 1920 px de largura precisa de uma imagem diferente de um usuário móvel em uma tela de 375 px. O atributo HTML srcset e o atributo sizes permitem definir múltiplas versões da imagem para o navegador escolher com base na largura da viewport e na proporção de pixels do dispositivo. Isso significa criar várias versões de cada imagem — tipicamente com larguras de 400 px, 800 px, 1200 px e 1600 px.
Telhas retina (densidade de 2x e 3x) concentram duas ou três vezes mais pixels físicos na mesma área de tela. Sem imagens preparadas para retina, fotografias parecem suaves e borradas em iPhones, iPads, MacBooks e na maioria dos dispositivos Android modernos. A solução é simples: redimensione suas imagens para 2× o tamanho de exibição e deixe o CSS limitá‑las. Um espaço de imagem de 600 x 400 precisa de uma imagem fonte de 1200 x 800. Use esta ferramenta para criar cada variante de tamanho e, em seguida, comprima‑as com o nosso Compressor de Imagens para manter os tamanhos de arquivo gerenciáveis.
A imagem mais rápida é a menor imagem que ainda mantém boa aparência. Para seções hero, vise imagens comprimidas abaixo de 200 KB. Para imagens de conteúdo embutido, mantenha-as abaixo de 100 KB. Miniaturas devem ficar abaixo de 30 KB. Essas metas pressupõem o uso de formatos modernos como WebP — se você estiver preso ao JPEG, os tamanhos serão 25‑35 % maiores para qualidade equivalente. Sempre redimensione as imagens para o tamanho de exibição antes de comprimir. Uma fotografia de 4000 x 3000 comprimida para 150 KB terá aspecto pior que uma versão redimensionada corretamente para 1200 x 900 comprimida ao mesmo tamanho, pois a compressão precisa trabalhar muito mais para encaixar mais pixels no mesmo orçamento de tamanho de arquivo.
Reduzir o tamanho preserva bem a qualidade, pois você está consolidando pixels. Aumentar (ampliar) reduz a qualidade porque o navegador precisa interpolar novos pixels que não existiam na original, causando borrões. Para obter os melhores resultados, sempre comece com a fonte de maior resolução e reduza. Nunca aumente uma imagem pequena e espere resultados nítidos.
A proporção de aspecto é a relação proporcional entre largura e altura. Razões comuns incluem 16:9 (wide screen), 4:3 (padrão) e 1:1 (quadrado). Bloquear a proporção de aspecto garante que ao alterar uma dimensão a outra seja ajustada automaticamente para manter as proporções, evitando estiramento ou compressão. Desbloqueie‑a somente quando desejar intencionalmente um dimensionamento não proporcional.
Publicações no Facebook: 1200x630. Feed do Instagram: 1080x1080 (quadrado) ou 1080x1350 (retrato). Twitter/X: 1200x675. LinkedIn: 1200x627. Pinterest: 1000x1500. Fotos de perfil em todas as plataformas geralmente são 400x400 ou maiores. Usar as dimensões corretas garante que suas imagens sejam exibidas sem recorte inesperado ou degradação de qualidade.
Telas Retina e HiDPI têm densidade de pixels 2‑3× maior que telas padrão. Uma imagem exibida em 300 x 200 pixels CSS em uma tela retina 2× realmente usa 600 x 400 pixels físicos. Se sua imagem tem apenas 300 x 200, ela aparece borrada nessas telas. A solução é fornecer imagens em 2× o tamanho de exibição pretendido e usar largura/altura em CSS para limitá‑las.