Por cerca de seis meses, todas as miniaturas deste blog eram um pouco suaves. não quebrado. Não obviamente errado. Simplesmente… felpudo, na maneira como você percebe com o canto do olho e depois se convence a não perceber.
O layout dizia que o slot de miniaturas tinha 600 pixels de largura. Então exportei miniaturas com 600 pixels de largura. Isso é exatamente a coisa errada a fazer, e demorei muito tempo para descobrir o porquê, porque no meu monitor parecia bem e no meu telefone parecia uma fotocópia de uma fotocópia.
A razão é que um pixel CSS não é um pixel do dispositivo Um telefone moderno ou um laptop retina embala dois ou três pixels físicos em cada pixel CSS - isso & #39; s o que window.devicePixelRatio relatórios. Portanto, minha imagem de 600 pixels estava sendo esticada em 1.200 pixels físicos de vidro, e o navegador estava inventando a diferença. Você não pode inventar detalhes que não estão no arquivo. A correção era exportar em 1.200 e permitir que o CSS o exibisse em 600.
Esse é o erro que este guia é construído, junto com os outros três ou quatro que fazem as imagens redimensionadas parecerem piores do que deveriam. o Ferramenta de redimensionamento de imagem no Toolz.dev faz o trabalho no seu navegador - o arquivo nunca sai da sua máquina - mas a ferramenta é a parte fácil Saber quais números digitar nele é a parte que realmente importa.
tl;dr: exportar em 2× o tamanho da tela Para telas Retina (um slot de 600 px precisa de um arquivo de 1.200 px) e nunca escala para cima- você pode & #39; t adicionar detalhes que nunca foram capturados Bloqueie a proporção, a menos que você realmente queira distorcer a imagem Redimensionar antes Você comprime, não depois. use o Ferramenta de redimensionamento de imagem Para definir as dimensões, o calculadora de taxa de aspecto Para calcular o lado ausente e o lado compressor de imagem Para obter o tamanho do arquivo para baixo depois. Tudo roda o lado do cliente. Uma advertência que vale a pena conhecer antecipadamente: o redimensionamento recodifica a imagem, então Todos os metadados EXIF são removidos- ótimo para privacidade, ocasionalmente surpreendente.
Por que minhas imagens parecem embaçadas após o redimensionamento?
Nove em cada dez vezes é uma das três coisas, e todas são consertadas.
Você aumentou. Ampliar uma foto de 400×300 para 1600×1200 pede ao software para produzir doze pixels de informação para cada um que tem Ele faz isso interpolando - calculando a média de vizinhos para adivinhar o que pertence no meio - e o resultado é suave, porque o detalhe genuinamente não existe Nada menos que um modelo generativo inventa de volta. Sempre comece com o maior original que você possui e reduza o tamanho. Down é quase sem perdas; Up é um palpite.
Você ignorou a proporção de pixels. O erro que descrevi acima Se a caixa CSS for 600×400 e a tela user' s for 2×, o navegador precisa de 1200×800 pixels reais para renderizá-la nitidamente Exporte em 2× e deixe o navegador diminuir - a redução de escala no navegador parece ótima; a ampliação parece lama.
Outra coisa comprimiu depois de você. Você redimensionou com cuidado e fez o upload para uma plataforma que codificou sua imagem em sua própria configuração de qualidade. Cada plataforma social faz isso. Você não pode pará-lo, mas pode reduzi-lo: faça o upload próximo às dimensões de destino da plataforma para que funcione o mínimo possível e entregue um arquivo que já esteja limpo, em vez de um que tenha que corrigir.
O que realmente acontece quando você redimensiona uma imagem?
Vale a pena entender, porque explica a maioria das surpresas.
Uma imagem raster é uma grade de pixels. Tornar essa grade menor significa decidir o que é um novo O pixel deve ser quando estiver entre vários antigos. Essa decisão é chamada reamostragem, e o algoritmo importa:
- vizinho mais próximo- pegue o pixel original mais próximo Arestas rápidas, em blocos e irregulares Corrigir apenas para pixel art, onde o bloqueio é o ponto.
- bilinear- média dos quatro pixels mais próximos Suave, um pouco suave.
- búbico- pesar dezesseis pixels circundantes com uma curva cúbica Mais nítida que bilinear; o padrão sensível na maioria dos softwares de desktop.
- Lanczos- um filtro sinc com janelas sobre uma vizinhança maior. A melhor qualidade para redução de escala, mais lenta, pode produzir um toque fraco em bordas de alto contraste.
O redimensionamento da tela do navegador fica na faixa bilinear a bicúbica e não & #39; permite escolher com precisão - você só pode solicitar qualidade de suavização e as especificações HTML & #39; O padrão para essa dica é "low". Isso é bom para a grande maioria do trabalho na web e é por isso que a ferramenta Toolz.dev parece instantânea.
Há um truque de usuário de energia que vale a pena conhecer Quando você reduz em um grande fator em uma única etapa - digamos 4000 px até 400 px, uma redução de 10× - algumas implementações de navegador são muito esparsas e você obtém aliasing: bordas cintilantes, padrões moiré em tecido ou alvenaria e detalhes finos perdidos A solução alternativa é Rebaixo de escalonamento: Halve repetidamente (4000 → 2000 → 1000 → 500 → 400), então cada etapa joga apenas metade dos pixels. Se uma grande redução sair mais crocante do que você esperava, esse é o motivo, e fazê-la em dois passes consertará.
O que a ferramenta Toolz.dev Resize realmente faz?
Prefiro dizer exatamente a você do que descobrir depois. É um redimensionador baseado em tela:
- Seu arquivo é lido no navegador por meio de um URL de objeto. é Nunca carregado- lá e #39; não há servidor para onde carregá-lo.
- Ele é desenhado em uma tela HTML nas dimensões de destino.
- A tela é re-codificada para PNG, JPEG ou WebP (qualidade padrão é 0,9 para os formatos com perda).
- Você baixa o resultado.
Três consequências decorrem disso, e apenas uma delas está na maioria das ferramentas.
Os metadados EXIF são removidos. Uma recodificação de tela produz um arquivo totalmente novo. Modelo de câmera, lente, tempo de captura e - mais importante - coordenadas de GPS Não sobreviva. Para qualquer coisa que você esteja publicando, isso é um recurso de privacidade e real: fotos diretamente de um telefone carregam rotineiramente as coordenadas exatas de onde foram tiradas. Se você necessidade O EXIF (por portfólio de fotografia, digamos), é redimensionado com uma ferramenta que o preserva explicitamente. Se a fonte saiu diretamente de um rolo da câmera, dê uma olhada na orientação de saída antes de publicar.
GIFs animados são lançados como um único quadro. Canvas desenha um quadro Não há nenhuma maneira honesta de descrever isso como algo diferente de uma limitação - se você precisa redimensionar uma animação e mantê-la em movimento, esta não é a ferramenta. (I & #39; prefiro dizer isso claramente do que deixá-lo descobrir depois de baixar)
Bloquear a proporção de aspecto significa "ajuste dentro", não "esticar para preencher". Se você inserir uma largura e uma altura com a proporção bloqueada, a imagem será dimensionada para se encaixar dentro essa caixa mantendo suas proporções Então uma foto 16:9 com um alvo 1000×1000 sai 1000×563, não 1000×1000. nunca irá distorcer sua imagem - mas também ganhou' t corte-a para preencher o quadrado Se você precisa de um quadrado exato de um retângulo, você precisa de uma colheita, não de um redimensionamento Essa distinção confunde as pessoas constantemente e ele' vale a pena ser preciso sobre.
Como as razões de aspecto realmente funcionam?
Uma proporção de aspecto é apenas largura ÷ altura, expressa como um par. A matemática é simples e você deve ser capaz de fazer isso em sua cabeça, pois evita o erro de redimensionamento mais comum: ato de esmagar.
Para encontrar o lado ausente, mantenha a razão constante:
new_height = new_width × (original_height ÷ original_width)
Uma foto de 4000×3000 (4:3) redimensionada para 1200 de largura torna-se 1200 × (3000/4000) = 900 alto. Digite 1200 e 800 em vez disso, e você e #39; esmagou uma imagem 4:3 em 3:2 - os rostos ficam mais estreitos, os círculos tornam-se ovais e todos podem distinguir algo e #39; está desligado mesmo que possa e #39; e diga o que. O calculadora de taxa de aspecto Faz isso por você e também reduz a proporção para você.
Aqui estão as razões que continuam chegando, com a matemática verificada em vez de copiada:
| proporção | decimal | Uso típico | Tamanho do exemplo |
|---|---|---|---|
| 1:1 | 1.000 | Postagens quadradas, imagens de perfil, logotipos | 1080×1080 |
| 4:5 | 0,800 | Postagens sociais do Portrait (espaço vertical máximo em um feed) | 1080×1350 |
| 9:16 | 0,563 | Histórias, bobinas, shorts, TikTok - vertical em tela cheia | 1080×1920 |
| 16:9 | 1.778 | Miniaturas de vídeo, imagens de heróis widescreen, slides | 1280×720 |
| ~1,91:1 | 1.911 | Cartões de visualização de links (a forma de OpenGraph) | 1200×628 |
| 3:1 | 3.000 | Banners de perfil amplo | 1500×500 |
| 4:1 | 4.000 | Banners de perfil extra amplo | 1584×396 |
Uma nota honesta sobre isso & quot;1.91:1" linha, já que me incomoda todas as vezes: 1200×628 não é realmente 1,91:1. Reduzido corretamente e #39; s 300:157 ou 1,911. A indústria arredonda e todos encolhem os ombros. Isso não importa na prática - mas se você e #39; já me perguntei por que 1200×628 não e #39; se divide em qualquer coisa limpa, isso e #39; por quê.
As especificações de pixel da plataforma mudam; as taxas quase nunca acontecem. Em vez de confiar em uma tabela de dimensões em uma postagem de blog (incluindo esta) para uma campanha que importa, verifique a especificação atual da plataforma e use a proporção acima para atingi-la. A forma é estável mesmo quando os números derivam.
Qual deve ser o tamanho das imagens da web?
Para um site que você controla - onde você e #39; estão otimizando para a Maior Tinta Contente em vez de outra pessoa e #39;s uploader - o raciocínio é diferente e melhor.
Comece na caixa CSS, não na imagem. Descubra o quão ampla a imagem realmente é renderizada em seu layout. Não o contêiner e a largura máxima do #39; s - o imagem Largura, no ponto de interrupção com o qual você se preocupa. Em seguida, dobre-o para retina. Esse é o seu tamanho de exportação. Tudo além disso são bytes que você está pagando para enviar e o usuário está pagando para fazer o download, para obter nenhum benefício visível.
Sirva mais de um tamanho. Um único arquivo de 2400px é um desperdício para um telefone que o renderizará em 380 css pixels. srcset Existe precisamente para isso:
<img
src="hero-1200.webp"
srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2400.webp 2400w"
sizes="(max-width: 768px) 100vw, 1200px"
width="1200" height="675"
alt="..."
/>
O navegador escolhe o menor arquivo que ainda parece nítido nesse dispositivo. e sempre defina width e height atributos - eles permitem que o navegador reserve o espaço antes que a imagem seja carregada, o que impede a página de pular e destruir sua pontuação Cumulative Layout Shift.
Redimensione primeiro, comprima o segundo. Esta é a ordem em que as pessoas obtêm para trás. Comprimir uma imagem de 4000px e então redimensioná-lo para 800px significa que você gastou esforço para otimizar pixels que estava prestes a jogar fora - e provavelmente colocou artefatos de compressão nos pixels que manteve. Corte as dimensões primeiro e comprima o que & #39; s restantes com o compressor de imagem. As dimensões são quase sempre a maior vitória de qualquer maneira: reduzir pela metade os dois lados de uma imagem remove 75% de seus pixels antes de um compressor tocá-lo. Eu vou mais fundo nisso no Guia de compressão de imagens.
Em seguida, escolha o formato certo. Aproximadamente: JPEG para fotografias, PNG Quando você precisa de transparência ou texto e linhas nítidos, WebP para basicamente tudo na web, porque bate ambos em qualidade equivalente. o conversor de formato de imagem lida com essa etapa e o Visão geral das ferramentas de imagem Cobre como as peças se encaixam.
Como redimensionar uma imagem no Toolz.dev?
- abra o Ferramenta de redimensionamento de imagem. Sem conta, nada para instalar.
- Coloque sua imagem. Ele carrega direto no navegador Assista a guia Rede se você quiser prova nada' s sendo enviado para qualquer lugar - that' s um cheque que vale a pena executar em qualquer ferramenta de imagem que você colar fotos privadas em.
- Insira suas dimensões de destino. Digite a largura; com a proporção bloqueada, a altura segue. Lembre-se de dobrar para retina se for para uma tela.
- Escolha o formato de saída- PNG, JPEG ou WebP.
- Baixe. gerado no seu navegador, diretamente para o disco.
Se você & #39; estiver produzindo a mesma imagem em vários tamanhos, trabalhe a partir do maior original de cada vez Don & #39; t redimensionar a exportação de 1200 px para baixo para 600 px - voltar para o original e exportar 600 a partir disso Cada re-codificação de um arquivo já com perdas agrava o dano, da mesma forma que uma fotocópia de uma fotocópia degrada It & #39; s uma pequena disciplina que aparece no resultado final.
Perguntas frequentes
Posso redimensionar uma imagem sem perder qualidade?
O downscaling perde quase nada perceptível - you're descartando dados de pixel que você não precisa mais, e o resultado na tela parece nítido O upscaling sempre perde qualidade, porque o software tem que interpolar pixels que nunca foram capturados, produzindo suavidade ou artefatos visíveis Sempre redimensionar do maior original que você tem, em vez de subir de um pequeno.
Qual o tamanho devo exportar imagens para telas de retina?
Exporte em 2× o tamanho em que a imagem é exibida. Se o seu layout renderizar uma imagem em uma caixa de 600×400, exporte-a em 1200×800 para que ele permaneça nítido em dispositivos com um devicePixelRatio de 2. Ir além de 2x raramente vale os bytes extras, pois o benefício visível é mínimo mesmo em 3x.
O redimensionamento de uma imagem remove os dados do EXIF?
Sim, quando o redimensionamento acontece através de uma tela HTML - como acontece no Toolz.dev - a ferramenta recodifica a imagem em um novo arquivo e os metadados EXIF não são transferidos. Isso significa que os detalhes da câmera, o tempo de captura e as coordenadas GPS são todos removidos. Para publicação, isso é um benefício para a privacidade; se você precisar do EXIF preservado, use uma ferramenta que o suporte explicitamente.
Posso redimensionar um gif animado e manter a animação?
Não com um resizer baseado em tela. O Canvas captura um único quadro, portanto, a saída é uma imagem estática nos formatos PNG, JPEG ou WebP. Redimensionar uma animação enquanto preserva todos os seus quadros requer uma ferramenta de processamento GIF dedicada.
Como redimensionar uma imagem para um tamanho de arquivo específico em KB?
O tamanho do ficheiro não é algo que defina directamente - cai fora das dimensões, formato e qualidade de compressão Trabalhe ao contrário: reduza as dimensões para aquilo em que a imagem é realmente apresentada, exporte como WebP ou JPEG em vez de PNG para fotografias, depois diminua a qualidade e volte a verificar o tamanho da saída Acertando num alvo difícil como o & quot; abaixo de 100 KB & quot; é normalmente duas ou três passagens desse loop, não uma.
Como redimensionar uma imagem sem cortá-la?
Mantenha a proporção bloqueada Quando a largura e a altura permanecem em sua proporção original, cada pixel do quadro é preservado e apenas a escala muda O corte só se torna inevitável quando a forma alvo difere da forma da fonte - encaixar uma foto 3:2 em um slot de avatar 1:1 significa colocar o espaço vazio em letterbox ou cortar parte da imagem.
Devo redimensionar ou compactar minhas imagens primeiro?
Redimensione primeiro e depois comprima A redução das dimensões remove os pixels completamente - reduzir pela metade a largura e a altura elimina 75% deles - o que é quase sempre uma vitória maior no tamanho do arquivo do que apenas a compactação. Comprimir antes de redimensionar desperdiça esforço em pixels que você está prestes a descartar e pode transformar artefatos naqueles que você mantém.
Qual é a diferença entre redimensionamento e corte?
Redimensionamento altera as dimensões de toda a imagem, mantendo todo o seu conteúdo O recorte corta parte da imagem para alterar seu enquadramento ou proporção Se você precisar de um quadrado de uma foto retangular, redimensionar com a proporção bloqueada caberá na imagem dentro do quadrado em vez de preenchê-la - você precisa de um recorte para preencher o quadro.
Existe um limite de tamanho de arquivo para redimensionar imagens no navegador?
Não há limite imposto pelo servidor, porque nada é carregado - o teto prático é o seu dispositivo' s memória disponível. fotos típicas, incluindo arquivos de câmera grandes, redimensionam instantaneamente Imagens extremamente grandes (varreduras de resolução muito alta, por exemplo) podem levar um momento ou, em um telefone com restrição de memória, não carregar.
Por que minha imagem ainda parece embaçada após o redimensionamento para as dimensões corretas?
Verifique três coisas em ordem: se você ampliou a partir de um original menor (infixável - encontrar uma fonte maior), se você contabilizou a proporção de pixels do dispositivo (um arquivo de 600 px em uma tela de 2× precisa ser 1200 px) e se a plataforma que você carregou para re-comprimiu a imagem depois O terceiro é comum nas mídias sociais e é melhor mitigado pelo upload na plataforma' dimensões recomendadas do s.
