Pixel

RODR I G O ZOL L I M A S SI NI
Pixel
Pixel é o menor parte de uma imagem digital e
cada um destes pontos contém informações que
determinam as suas características, como a cor.
De uma forma mais simples, um pixel é o menor
ponto que forma uma imagem digital, sendo que
um conjunto de pixels com várias cores formam a
imagem inteira. O pixel é usado como unidade de
medida para descrever a dimensão geométrica
de uma imagem, quanto mais pixels por
polegada tiver uma imagem melhor será a
qualidade.
Pixel , PPI e DPI
O ppi significa “pixels por polegada” (pixels per inch) e o dpi significa “pontos
por polegada” (dots per inch). Ambos servem pra denominar a “resolução” de
uma imagem, indicando quantos pixels ou pontos existem em uma polegada,
mas sem especificar proporções ou dimensões.
As medidas “pixels por polegada” (ppi) e “pontos por polegada” (dpi) às vezes
são utilizadas de forma indiscriminada, mas têm significados distintos,
especialmente para dispositivos de impressão, pois o ppi é uma medida de
densidade da colocação dos pontos de uma impressora no papel (tais como jato
de tinta). Por exemplo, uma imagem de alta qualidade fotográfica pode ser
impressa com seiscentos ppi em uma impressora jato de tinta de 1200 dpi.
Quando tratamos de impressão de imagens, são os pontos que importam,
enquanto os pixels ficam somente no ambiente virtual.
PPI x DPI

O PPI se refere a
dispositivos que
apresentam displays, ou
seja, presentes no
ambiente virtual. Já o
DPI é válido quando
falamos de impressão,
em ambiente físico.
Cores
A cor é definida como
uma sensação na
percepção humana.
Mais especificamente,
do ponto de vista da
Física, a cor é o
resultado da
incidência de uma
onda eletromagnética
na retina. Esta tem um
comprimento de onda
entre 400 a 700nm.
Cores Primarias e Secundárias
Cores primárias: São as cores puras, ou
seja, que não podem ser criadas a partir
da combinação de outras cores. As cores
primárias são: o verde, o vermelho e o
azul. No entanto, a partir da combinação
das cores primárias é possível gerar
outras tonalidades de cores.
Cores Secundárias: É a união de duas
cores primárias, por exemplo, amarelo
(azul e verde), laranja (verde e vermelho)
e roxo ou violeta (vermelho e azul).
Pixel e as Cores
Em um monitor colorido, cada pixel é
composto por um conjunto de 3 pontos:
verde, vermelho e azul. Nos monitores, cada
um desses pontos é capaz de exibir 256
tonalidades diferentes (o equivalente a 8
bits) e combinando tonalidades dos três
pontos é então possível exibir pouco mais de
16.7 milhões de cores diferentes
(exatamente 16.777.216).
Pixel e as Cores
Compreensão de imagens
As técnicas de compressão
trabalham com o fato da
imagem apresentar
redundância de informação,
onde i é um pixel na imagem
e seus vizinhos tem
intensidade luminosas muito
próximas. Estes algoritmos
trabalham em duas etapas
uma para a codificação e
outra para a decodificação.

Esta técnica busca sequencias de pixels com o mesmo valor e os codifica em pares. Quanto maior
for esta sequencia melhor será a eficiência do algoritmo e menor será o arquivo final. Este algoritmo
não apresenta perda da informação presente na imagem.
Compreensão de imagens
Podemos imaginar por
exemplo um algoritmo que
antes de trabalhar na
codificação da imagem
efetue algum tipo de
transformação (perda) e
aumente ainda mais a
redundância entre os pixels
na imagem.

Alguns FORMATOS DE IMAGENS (GIF, PCX, TIF e JPG) usam algoritmos de compressão
que exploram a características de redundância de intensidade luminosas na imagem.
  Tamanho dos arquivos
 Bits e Bytes
 Em um bit pode-se armazenar 2 valores diferentes -> 0 e
1

Arquivo de  Em dois bits pode-se armazenar 4 valores diferentes ->

00, 01, 10 e 11
Imagem  Em oito bits (1 byte) pode-se armazenar 256 valores
diferentes
 Uma imagem com 512x512 pixels (256k pixels)
 256 tons de cinza
 x 1 byte/pixel -> 256 kBytes
 Tons de cinza de alta qualidade (exemplo: densitometria)
 x 2 byte/pixel -> 512 kBytes
 Fotografia ou “True Color”
 x 3 byte/pixel -> 750 kBytes
 Pixels Reais (processamento/simulação)
 x 4 (8) byte/pixel -> 1 (2) Mbytes
 Pixels Complexos (transformadas de Fourier)
 x 8 (16) byte/pixel -> 2 (4) MBytes
  TIFF (Tagged Image File Format)
 Robusto, flexível, genérico, multi-plataforma
 PCX
Formatos  Padrão para PC : antigo e “problemático”
 BMP (bitmap)
de Arquivos  Formato mais comum dentro do windows

de Imagens  GIF
 Muito comum para transmissão em rede. (Limitado em 256
cores).

 Outros: Raw, TGA, formatos próprios

(ex. Photoshop)
 Formatos com compressão
 Com perdas (lossy): JPEG - não utilizar em análise quantitativa
 Sem perdas (lossless): RLE (PCX, BMP, TGA), LZW (TIFF, GIF),
Huffman
Resolução da tela
Resolução de tela é o número
de pixels em Largura x Altura.
1920 X 1080 significa que a
largura é de 1.920 pixels e a
altura é de 1.080 pixels.

HD (720p): 1280 x 720 pixels;

Full HD (1080p): 1920 x 1080 pixels;
4K: 3840 x 2160 pixels;
Resolução da tela
Normalmente, quanto maior
o monitor, maior a resolução
ou densidade dos pontos com
que se pode configurá-lo.
De qualquer forma, quanto
maior o número de pontos
(bits), mais definidas
aparecem as imagens.
Tamanho e Resolução
Os formatos dos dispositivos
digitais estão ficando cada
vez mais heterogêneos,
variando entre as grandes
telas para uso de PCs
desktop e as telas menores
para uso em movimento.
Tamanho e Resolução
O espaço de publicação de conteúdo de sites e plataformas web
precisa considerar o aumento das diferenças entre largura máxima e
mínima das telas de PCs, que variam entre 320 a 2560 pixels ou mais
(quando os usuários usam mais de um monitor).
O layout das interfaces web precisa também considerar a proporção
entre a largura e a altura dos monitores, que apresenta grandes
variações. Esta vai desde 4:3, padrão dos aparelhos de TV e PCs,
comum nas larguras de 1024 a 1280dpi, até a proporção dos
monitores de HDTV, wide screen (16:9, resolução 1280×720 ou
16:10, resolução 1280×800, chegando a 1680×1050 e 2560x 1600).
Tipos de layout
A web pode ser dividida em quatro
tipos de layout: o fixo, fluido,
adaptivo e responsivo. Cada um
possui características e formas de
desenvolvimento diferente, além
de preocupações específicas
durante a etapa de concepção e
deficiências que devem ser levadas
em consideração.
 Layout Fixo
Como diz o nome, o layout fixo tem um tamanho
definido pelo web designer. Esse tamanho se
mantem independente do dispositivo usado para
acessá-lo. O tamanho mais importante no layout
fixo é a largura da página, pois temos um costume
maior de aceitar rolar a página de cima para baixo
do que da esquerda para a direita - tanto é que
sites com navegação horizontal não são populares.
Layout Fixo
Desenvolver com largura fixa é mais fácil, pois existe menos preocupação
em adaptar mudanças para resoluções diversas e dispositivos diversos e é
rápido de ser montado.
Mas nem tudo são flores no layout fixo. Layouts fixos também podem
causar problemas, especialmente em monitores com resoluções muito
baixas ou muito altas.
Layout Fluido
Ao contrário do layout fixo, o fluido (ou “layout líquido”) visa fazer o
conteúdo ocupar toda a tela do navegador, independente da
resolução da tela, permitindo ao designer mostrar mais conteúdo
em monitores maiores mas ainda se manter visível em telas
menores.
Pense no layout fluido como um líquido em um recipiente; ele ocupa
todo o espaço, independente da forma.
Layout Fluido
Layout líquido que aparenta problemas ao diminuir muito (veja a
barra horizontal na última imagem). Fonte: No-fun)
Layout Adaptativo
Um site com esse tipo de layout tem a facilidade de alterar de acordo
com cada resolução nova. É similar a ter várias páginas estáticas para
dispositivos diferentes, mas com apenas uma página de conteúdo.
Isto é feito através do CSS.
A vantagem deste é que a experiência do usuário pode ser adaptada
de acordo com cada dispositivo ou resolução de tela sem ter que
mexer no conteúdo.
Layout Adaptativo
Site visualizado no desktop (esq) e visualizado no smartphone (dir).
Layout Responsivo
Por melhor que o web design responsivo seja nos dias de hoje, ainda
assim existem as desvantagens: um preparo muito maior é
necessário durante o processo inicial de design pois o layout precisa
ser desenhado pensando em como ele vai agir em resoluções
pequenas e grandes. Isto quer dizer que é mais demorado
desenvolver o layout assim, mas compensa ao ter a melhor
experiência de usuário nos dispositivos variados.
Se você acessar um site responsivo, verá que ele reage diferente de
acordo com a resolução que você tem.
Layout Responsivo