Como usar uma câmera digital para adicionar imagens para o html5 e css3 páginas web baseadas

Video: TEKPIX i-DV12 [Análise de Produto] - Tecmundo

câmeras digitais e scanners são surpreendentes nos dias de hoje. Você pode usá-los para adicionar imagens para suas páginas web HTML5 e CSS3. Mesmo câmeras com preços moderados podem agora abordar a resolução de câmeras analógicas old-school. Scanners também são capazes de tomar imagens tradicionais e convertê-los em formatos digitais que os computadores usam.

Em ambos os casos, porém, a imagem padrão pode estar em um formato que causa problemas. As imagens digitais são armazenados como uma série de pontos, ou píxeis. Na impressão, os pontos são muito próximos, mas ecrãs de computador têm pontos maiores. Esta imagem é diretamente da câmera digital.

Esta imagem (tomada em uma câmera digital mais antiga) registra em 6 megapixels (MP). Isso é uma boa resolução, mas modernas câmeras digitais são muito mais elevados. Se você imprimir a foto em papel, todos os pontos são muito pequenos, e você terá uma bela imagem. Se você tentar mostrar a mesma imagem na tela do computador, você vê apenas um canto.

Esta imagem real saiu em 2.816 pixels de largura por 2.112 pixels de altura. Você só vê um pequeno canto da imagem, porque as telas são tomadas em 1024 × 768 pixels. Menos de um quarto da imagem é visível.

Quando você olha para uma imagem grande na maioria dos navegadores, é automaticamente redimensionada para caber na página. O cursor geralmente se transforma em uma espécie de lupa, e se você clicar na imagem, você pode vê-lo em seu tamanho total ou o tamanho menor.

Alguns visualizadores de imagem ter imagens muito grandes e redimensioná-las automaticamente para que possam caber na tela. (Este é o comportamento padrão do visualizador de imagens padrão do Windows ea maioria dos navegadores.) A imagem pode parecer ser de um tamanho razoável por causa desta característica, mas vai ser enorme e difícil de baixar em uma página web real. Verifique se você sabe o tamanho real de uma imagem antes de usá-lo.

Embora encolhendo uma imagem de modo que ele pode ser visto em sua totalidade é, obviamente, benéfico, há uma razão ainda mais convincente para fazê-lo. Cada pixel na tela requer 3 bytes de memória do computador. (UMA byte é a unidade básica de memória em um computador.) Para fins de comparação, um caractere de texto requer cerca de 1 byte.

A imagem não comprimido do navio pesa um colossal 17 megabytes (MB). Se você pensar em uma palavra como cinco caracteres, uma imagem diretamente da câmera digital ocupa a mesma quantidade de espaço de armazenamento e tempo de transmissão de cerca de 3.400.000 palavras. Esta imagem requer cerca de três minutos para baixar em um modem de 56K!

Em uma página da web, imagens pequenas são frequentemente mostrado em cerca de 320 × 240 pixels, e imagens maiores são muitas vezes 640 × 480 pixels. Se você usar o software para resample a imagem para o tamanho que você realmente precisa e usar um algoritmo de compressão apropriada, você pode obter a imagem para olhar direito.

A nova versão da imagem é o formato de tamanho e de arquivo que é necessário, ele parece tão bom, e isso pesa muito mais razoável 88 kilobytes. Isso é de 2 por cento do tamanho da imagem original.

Embora esta imagem é muito menor do que a imagem original, ele ainda ocupa muito mais memória do que o texto. Mesmo essa imagem menor ocupa tanto tempo de transmissão e espaço de armazenamento de 1.600 palavras! Ele ainda leva 10 segundos para baixar sem uma conexão de banda larga. Use imagens com sabedoria.

Imagens são grandes, mas manter algumas coisas em mente quando você usá-los:

• Certifique-se as imagens valem a pena exibindo. Não use uma imagem sem alguma boa razão, porque cada imagem torna a sua página dramaticamente mais lento para acesso.

• Use software para redimensionar a imagem. Você ainda pode usar software livre para mudar a imagem exatamente o tamanho que você precisa.

  Video: Curso de HTML5 - Aula 05 - Imagens

• Use um formato compactado. As imagens são quase nunca usado em seu formato nativo na web, porque eles são muito grandes. Vários formatos surgiram que são úteis para trabalhar com vários tipos de imagens.