Estatística na Web

Em um post sobre A importância da performance das páginas na experiência do usuário (https://medium.com/user-experience-design-1/47becab48b98), mostrou dados estatísticos sobre como a lentidão da web irrita o usuário.

Segue alguma:

Ou seja, fazer sites bem feitos tem um ganho para o usuário e para o desenvolvimento.

A mágica vetorial

Os dois principais tipos de imagens digitais são: bitmap e vetorial.

A bitmap como o nome diz é um mapa de bits, cada pixel possui uma cor, e quando se aumenta ou diminui a imagem os pixeis são duplicados ou fundidos. Distorcendo a imagens.

O outro tipo é vetorial, e nele a imagem é definida por equações de reta ligando pontos. O resultado é a imagem muito mais suave.

Achei um software muito legal que transforma imagens bitmap em vetorial. O Vector Magic (http://vectormagic.com) não faz milagre mas consegue ter um bom acerto, bastando fazer pequenos ajustes.

Olhar da retina

A Apple lançou no mercado as telas de retina. Basicamente a tela de retina tem uma resolução grande, podendo chegar a 2880 X 1800.

O grande diferencial dessas telas está na medida de pixeis por polegada (ppi) que nestas telas fica em torno no 286 ppi. Essa alta densidade pode causar alguns problemas caso as imagens do site sejam em qualidade inferior. Lembrando que maior qualidade nas imagens aumenta o seu tamanho.

No post http://www.sitepoint.com/css-techniques-for-retina-displays/ é apresentado 4 técnicas para apresentar corretamente as imagens de acordo com tipo de tela:

Transformando imagens em algo mais

Utilizar imagens em base64 é uma boa técnica de diminuir a quantidade de requisições no carregamento da página. Como tudo possui partes ruins e partes boas, de bate pronto a parte ruim é que o CSS ou HTML vai ficar maior.

Através do site http://webcodertools.com/imagetobase64converter/Create é possível realizar o upload de uma imagem e será gerado o base64 tanto para ser utilizado no HTML e/ou no CSS.

Alterando imagens durante o vôo

Esses dias me deparei com algo bem interessante o Image Resizing. Sabem aquela situação que precisamos mostrar uma miniatura de uma imagem muito grande e temos duas escolhas, ou criar uma nova imagem menor, ou apenas apresentar a mesma image de 3 MB reduzida ?

O melhor é ter uma imagem menor para apresentar mais rápido e não prejudicar  o carregamento da página Web, mas alguma vezes o trabalho é grande. O Image Resizing serve justamente para isso.

Através de parâmetros passados na URL é possível redimensionar uma imagem, transformar um PNG em JPEG, fazer um corte em uma região da imagem, além de outras coisa mais avançadas como alterar brilho, contraste e muitas outras opções.

Ele pode ser configurado em uma aplicação .net ou diretamente no IIS, bem simples e fácil.