Textos sobre imagens
Seis textos sobre por que uma imagem pesa o que pesa e o que fazer a respeito: a diferença real entre PNG, JPG e WebP, a largura que uma página web realmente precisa, quais tamanhos de favicon ainda importam e o que uma foto conta a um estranho sobre onde foi tirada.
Imagens
Por que seu favicon fica borrado na aba do navegador
O ícone de uma aba tem cerca de 16 pixels, então o detalhe que aparece numa prancha de design vira borrão. O que simplificar, por que uma forma vence uma marca escrita e como testar no tamanho real.
Ler
Imagens
Checklist de favicon: o que colocar no head
Três ou quatro tags link no head cobrem todos os navegadores em uso real. Quais são, o que a ordem faz, quais tags antigas dá para tirar e como conferir uma página publicada.
Ler
Imagens
O que significa DPI em uma tela (quase nada)
O número de DPI de um arquivo de imagem é um recado para a impressora. O navegador não o lê, então 72 DPI não é uma configuração web. O que define o tamanho na página e quando o número conta.
Ler
Imagens
Por que um logo deve ser um SVG
Um SVG é um conjunto de instruções de desenho e um PNG é uma grade de pixels medida uma única vez. Essa diferença decide como um logo aparece num celular 3x, num e-mail e na aba do navegador.
Ler
Imagens
O que são os dados EXIF e o que eles revelam
Cada foto carrega um bloco oculto de ajustes da câmera, marcações de data e hora e, muitas vezes, o ponto exato onde você estava.
Ler
Imagens
Como reduzir o tamanho de uma imagem sem perder qualidade
A maioria das imagens que pesam demais pesa por um motivo chato, e resolver isso leva uns trinta segundos.
Ler
Imagens
PNG vs JPG vs WebP: qual você deve usar?
Uma regra só resolve noventa por cento dos casos, e vale conhecer as exceções porque errar sai caro.
Ler
Imagens
Que tamanho devem ter as imagens de um site?
Larguras em pixels e pesos concretos para cada espaço comum, e por que a resposta retina não é «dobrar tudo».
Ler
Imagens
Como recortar uma imagem em uma proporção exata
O retângulo que você precisa está a uma divisão de distância. Aqui estão a fórmula, os deslocamentos de um recorte centralizado e quanto da imagem cada proporção comum custa.
Ler
Imagens
Quais tamanhos de favicon você realmente precisa?
Cinco tamanhos cobrem todos os navegadores e celulares em uso real. Os outros quinze arquivos que as colas antigas mandavam gerar são para plataformas que ninguém mais usa.
LerPor onde começar
A maioria chega aqui com um de dois problemas: um arquivo pesado demais, ou um arquivo que está feio. Para o primeiro, como reduzir o peso de uma imagem e a largura certa para a web cobrem o assunto entre os dois, e o segundo deles costuma mudar o jeito de trabalhar de quem lê. Para o segundo problema, PNG contra JPG contra WebP explica por que um logo salvo como JPG desenvolve um halo cinza e por que uma fotografia salva como PNG pesa dez vezes o que deveria.
O que estes textos têm em comum
Um arquivo de imagem é um conjunto de concessões que alguém já tomou por você, quase sempre sem avisar. Um formato decidiu se ao encolher seria sacrificada a cor ou a nitidez. Uma câmera decidiu quantos pixels registrar e o que escrever ao lado deles. Uma página decidiu em que largura o resultado seria exibido, que raramente é a largura em que foi salvo.
O que se escreve aqui serve para enxergar essas decisões e poder tomá-las de propósito. Isso inclui as que não têm nada a ver com qualidade: o que os dados EXIF revelam fala das coordenadas, dos horários e dos números de série que viajam junto com uma foto que você publica, e o que DPI significa numa tela fala de um número que quase todo mundo aprendeu a respeitar e que os navegadores ignoram por completo.
Perguntas frequentes
Os 72 DPI importam para imagens de um site?
Não. O campo de DPI dentro de um arquivo de imagem é um recado para uma impressora sobre tamanho físico, e todos os navegadores web o ignoram. O que determina o tamanho com que uma imagem aparece numa página são suas dimensões em pixels e o CSS aplicado a ela. Uma imagem a 72 DPI e a mesma imagem a 300 DPI aparecem idênticas num navegador.
Por que meu logo fica borrado ou manchado como JPG?
A compressão JPG foi feita para fotografias, onde a cor muda aos poucos. Um logo tem bordas duras entre cores chapadas, que é justamente o padrão que o formato lida pior, então ele produz um chuviscado visível em volta das bordas. PNG ou SVG mantêm essas bordas limpas, e um SVG fica nítido em qualquer tamanho.
Publicar uma foto revela onde ela foi tirada?
Depende da plataforma. As fotos costumam carregar metadados EXIF que incluem coordenadas de GPS, o horário exato e o número de série da câmera. A maioria das redes sociais grandes apaga isso no upload, mas compartilhar o arquivo direto, mandá-lo anexado por e-mail e muitos sites menores deixam intacto. Verificar é mais rápido que confiar.
Todas as categorias
PDF 10Texto 14Design 11Segurança 8Calculadoras 13Desenvolvimento 20Dia a dia 4Tempo 7