px: essência, pixels físicos no desenvolvimento mobile

O que é px?

px (pixel, picture element) — o menor elemento endereçável de uma imagem raster ou display. Cada pixel armazena informações de cor no modelo RGB (vermelho, verde, azul) com profundidade de cor de 8 a 10 bits por canal. Os displays de dispositivos móveis modernos contêm milhões de pixels: iPhone 15 Pro — 3 milhões, iPad Pro 12.9" — 5,6 milhões de pixels.

O tamanho físico de um pixel depende da densidade do display (PPI). Em um dispositivo com 326 PPI (iPhone 11), um pixel tem aproximadamente 0,078 mm. Em um display com 460 PPI (iPhone 15 Pro) — 0,055 mm. Quanto menor o tamanho físico do pixel, maior a nitidez da imagem. Ao mesmo tempo, a densidade de pixels afeta diretamente o desempenho da renderização: mais pixels = mais trabalho para a GPU.

De acordo com a Apple, a resolução do display do iPhone 15 Pro é 1179 × 2556 px a 460 PPI. Para comparação, o iPhone SE (3ª geração) — 750 × 1334 px a 326 PPI. A diferença no número total de pixels é de quase 3 vezes, o que explica os maiores requisitos de GPU nos modelos Pro.

Resolução de tela em pixels

Resolução de tela — o número de pixels físicos horizontal e verticalmente. É escrita no formato largura × altura, por exemplo 1179 × 2556 px. A resolução é uma característica fundamental do display que não pode ser alterada programaticamente — é fixada no nível de hardware e matriz.

A resolução em pixels não deve ser confundida com o tamanho lógico da tela (em pt para iOS ou dp para Android). Por exemplo, o iPhone 14 tem um tamanho lógico de 390 × 844 pt, mas uma resolução física de 1170 × 2532 px — exatamente 3 vezes maior, pois o fator de escala é 3.

PPI e densidade de pixels

PPI (pixels per inch) — o número de pixels por polegada do display. Calculado pela fórmula: PPI = √(largura² + altura²) / diagonal. Quanto maior o PPI, menores são os pixels individuais e mais suave a imagem parece. A Apple considera um display Retina aquele com PPI acima de 300 a uma distância de visualização típica.

Diferentes categorias de dispositivos têm diferentes densidades: Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Dispositivos Android classificam a densidade através de Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Esses buckets determinam qual recurso (imagem, dimens) será carregado para o dispositivo.

Impacto do PPI no desenvolvimento: quanto maior a densidade, mais memória é necessária para armazenar texturas e imagens. Um pixel em um display de 500 PPI requer 2,5 vezes mais memória GPU do que em um display de 320 PPI para o mesmo tamanho de elemento lógico. Otimizar assets para buckets de densidade específicos é uma prática padrão no desenvolvimento Android.

px vs unidades lógicas: pt, dp, sp

Os pixels físicos (px) diferem das unidades lógicas (pt, dp, sp) por estarem vinculados à resolução do hardware e não escalarem. As unidades lógicas, ao contrário, abstraem o desenvolvedor do display específico, permitindo que um único valor de 100 pt seja exibido com o mesmo tamanho físico em dispositivos diferentes.

Fórmulas de conversão: para iOS — px = pt × scale (onde scale = 1, 2 ou 3). Para Android — px = dp × (dpi / 160). O uso direto de px no código significa que a interface parecerá diferente em dispositivos com densidades diferentes: em uma tela com PPI alto, o elemento será muito pequeno, e em uma com PPI baixo — muito grande.

Por que px não é usado no código

Usar px no código-fonte de um aplicativo mobile é um antipadrão que leva à exibição incorreta da interface em dispositivos com diferentes densidades de pixels. Frameworks modernos (UIKit, SwiftUI, Jetpack Compose, XML Layouts) proíbem ou não recomendam especificar tamanhos em pixels.

• iOS UIKit — todos os frame, bounds e constraint constants são definidos em pt. Pixels aparecem apenas no estágio de rasterização através de UIGraphicsImageRenderer
• SwiftUI — não há API para definir tamanhos em px. Todos os valores são em pt via Font, frame, padding
• Android XML — se você especificar px em dimens.xml, o Android Studio mostra um aviso lint: "Use `sp` instead of `px` for text sizes"
• Jetpack Compose — TextUnit para texto, Dp para elementos. O compilador não permite misturar tipos

O único uso legítimo de px no código é trabalhar com rasters: carregar Bitmap, criar Canvas para renderização de imagens, trabalhar com Metal ou OpenGL. Nesses casos, px são os pixels físicos do buffer de destino e devem ser considerados para renderização correta. Em todos os outros casos, unidades lógicas são usadas.

Pixels em imagens e assets

Imagens e ícones são armazenados em pixels, mas versões diferentes são fornecidas para cada tipo de tela. iOS usa os sufixos @1x, @2x, @3x em Assets.xcassets. Android usa as pastas drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). O sistema seleciona automaticamente o arquivo correto com base na densidade da tela.

Regra de entrega de assets: crie a imagem em formato vetorial (PDF, SVG) e exporte para cópias raster dos tamanhos necessários. Assets vetoriais escalam sem perda de qualidade e ocupam menos espaço no repositório. No Android, recursos vetoriais podem ser usados diretamente através de VectorDrawable, eliminando a necessidade de múltiplas cópias raster.