Unb 2012.1 - dweb - 06 - imagens otimizadas

Curso Superior de Tecnologia em Design Gráfico

1 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização

DWEB - Design para Web

6 Imagens – formatos e otimização

“Ninguém despreze a tua mocidade; mas sê o exemplo dos fiéis, na palavra, no trato, no amor, no espírito, na fé, na pureza.” 1 Timóteo 4:12

DWEB - Design para Web / Carlos José


Contato

Carlos José

[email protected] www.carlosjose.net

twitter.com/carlosjoser2n



Objetivo da Aula

n Fundamentar o uso de imagens na web.



Agenda

n Imagens vetoriais x imagens rasterizadas

n Formatos de arquivos n Otimizando imagens



Fundamentos do uso de imagens na web

n  Imagens vetoriais x imagens rasterizadas î Imagens vetoriais

n  Programas baseados em vetores, como o Adobe Illustrator, CorelDRAW ou até mesmo o Adobe Flash, usam a matemática, ou vetores, para desenhar as imagens.

n  Os programas vetoriais são mais adequados para as ilustrações.




n  Imagens vetoriais x imagens rasterizadas î Imagens rasterizadas

n  O Adobe Photoshop é um programa baseado em pixels (também conhecido como programa de mapas de bits ou imagens raster).

î  Em outras palavras, ele utiliza pixels, ou pequenos pontos de luz, para descrever, armazenar e manipular imagens no computador.

n  A tarefa de converter uma imagem Vetorial em Pixel chama-se: Rasterizar.




n  Imagens vetoriais x imagens rasterizadas

A primeira bicicleta é uma imagem rasterizada e a segunda bicicleta é uma imagem vetorial.




n  Formatos de Arquivos î O Adobe Photoshop é capaz de ler e gravar

vários formatos de arquivos. î Hoje em dia dispomos de muitos formatos de

arquivos, mas gostaria de destacar os formatos que mais iremos trabalhar como web design: n  PSD (Photoshop Document) n  JPEG ou JPG (Joint Photographic Experts Group) n  GIF (Graphical Interchange Format) n  PNG (Portable Network Graphic) n  EPS (Encapsulated PostScript)




n  Formatos de Arquivos î PSD (Photoshop Document):

n  Salvar um arquivo no formato PSD preserva todas as layers (camadas), mask (máscaras), channels (canais) e seleções que você tiver criado.

n  Se você precisar retomar um trabalho finalizado anteriormente para atualizar qualquer coisa neste trabalho, o formato de arquivo PSD é o mais indicado neste caso.

n  A única desvantagem dos arquivos PSD é o tamanho de armazenamento.

Sempre guarde seus trabalhos realizados no Adobe Photoshop no formato PSD para garantir modificações futuras.




n  Formatos de Arquivos î JPEG ou JPG (Joint Photographic Experts

Group): n  As imagens JPEG de 8-bits possuem uma faixa de cor

de 16,7 milhões de cores. n  Devido à intensidade de cores disponível nesse

formato, trata-se de uma boa opção para fotografias e imagens com variações:

î  Sombras, degrades ou combinações suaves de cores. î  Infelizmente este formato não suporta transparência de

background (segundo plano) na imagem. O formato JPEG é um formato de imagem compacto, por desfazer-se de algumas das informações da imagem digital que são repetitivas, o formato JPEG é capaz de conseguir níveis notáveis de compactação de arquivo. Muito usado na Internet.




n  Formatos de Arquivos î GIF (Graphical Interchange Format):

n  É um formato de arquivo que foi desenvolvido, inicialmente, pelos membros da CompuServe, para possibilitar o envio de imagens on-line.

n  Esse antigo formato ainda é usado atualmente e foi alvo de novas atenções, devido à sua capacidade de armazenam vários quadros de imagens que podem ser apresentados um após o outro gerando assim animações, o que ouvimos falar de GIF animado.

î  Esse recurso fez do GIF um formato popular na Web. n  As imagens GIF de 8-bits possuem uma tabela de cor de

256 tons de cores, também tem a característica de transparência de background (segundo plano) da imagem.




n  Formatos de Arquivos î PNG (Portable Network Graphic):

n  É um formato bem interessante, pois ele tem as mesmas características dos formatos já apresentados JPG e GIF.

n  O formato PNG esta dividido em: î  PNG 8 formato com as mesmas características do GIF î  PNG 24 formato com as características do JPG.

Independente do tipo PNG 8 ou PNG 24, é possível salvar as imagens com o background (segundo plano) transparente.




n  Formatos de Arquivos î EPS (Encapsulated PostScript):

n  O formato EPS é uma boa opção para a transferência de arquivos entre o CoreIDRAW e o Photoshop.

n  O Photoshop não é capaz de ler arquivos CDR (o formato de arquivo nativo do CoreIDRAW), mas lê perfeitamente arquivos EPS.

î  Você poderá exportar um arquivo CDR no formato EPS e abrir no Photoshop.




n  Formatos de Arquivos Se sua imagem... Use... Porque... Tiver cores uniformes GIF ou JPG

de 8bits Eles se destacam na compactação de cor uniforme.

Uma fotografia ou tiver nuances de cores

JPG A otimização JPG funciona melhor em imagens com cor misturada. Como existe perda, ela geralmente resulta em tamanhos de arquivo menores do que o PNG de 24 bits.

For uma combinação de imagens uniformes e fotográfica

GIF ou PNG de 8bits

Os formatos de cor indexada são melhor na preservação e na otimização de áreas de cor uniforme. O pontilhado que aparece nas áreas fotográficas como resultado da redução a paleta de cor.

Exigir transparência GIF ou PNG Tanto o GIF como PNG permitem ativar/desativar transparência em imagens.

Exigir vários níveis de transparências

PNG PNG é o único formato que suporta transparência de canal alpha.

Exigir animação GIF GIF é o único formato que pode conter quadros de animação.




n  Formatos de Arquivos inovadores î Acabamos de ver formatos de arquivos que

dominam o mercado. î Na linha de formatos de arquivos inovadores

temos: n  SVG (Scalable Vector Graphics) n  Webp (???)




n  Formatos de Arquivos inovadores î SVG (Scalable Vector Graphics)

n  Trata-se de um formato aberto, desenvolvido pela W3C e que surgiu oficialmente em 2001.

n  Em vez de ser baseado em pixels, o SVG utiliza a linguagem XML para descrever como o arquivo deve ser.

î  O SVG consegue trabalhar bem tanto com figuras estáticas quanto com imagens animadas.

î  Imagens no formato podem ser ampliadas ou reduzidas sem causar perda de qualidade.

î  Os arquivos têm extensão .svg ou .svgz e suportam efeitos de transparência.





n  Software que geram imagens SVG: î  Adobe Ilustrator, Corel Draw

n  Navegadores que rodam de forma nativa (sem plugin) nos seguintes browsers:

î  Google Chrome 4 î  Apple Safari 5 î  Opera 10.6 î  Firefox 4 î  Internet Explorer 9

n  Curso de criação de imagens SVG î  http://www.argonavis.com.br/cursos/xml/x500/#tutorial î  http://www.w3schools.com/svg/default.asp





http://www.openclipart.org





http://www.openclipart.org/image/800px/svg_to_png/1314193351.png

http://www.openclipart.org/people/gnokii/1314193351.svg





http://croczilla.com/bits_and_pieces/svg/samples/svgtetris




<!DOCTYPE html> <html> <head> <meta charset=“utf-8” /> <title>Inserindo imagens SVG</title> </head> <body> <h1>Imagens SVG</h1> <img src="svg/1314193351.svg" alt=""/> <img src="svg/combi.svg" alt=""/> </body> </html>




n  Formatos de Arquivos inovadores î Webp (pronuncia-se “weppy”)

n  Trata-se de um formato de imagens apresentado pelo Google em outubro de 2010 que tem a proposta de permitir a geração de arquivos com tamanho reduzido e, ao mesmo, boa qualidade de imagem.

n  O padrão utiliza um esquema de compressão que faz com que a perda de qualidade seja a menor possível aos olhos humanos.

î  De acordo com o Google, esse método é capaz de gerar arquivos quase 40% menores do que o JPEG.

î  O problema é que o JPEG é um formato tão difundido que será uma tarefa difícil substituí-lo.




n  Formatos de Arquivos inovadores î Webp




n  Formatos de Arquivos inovadores î Webp

n  Navegadores que suportam: î  Google Chrome, î  Google Chrome Frame plug-in para o Internet Explorer î  Opera 11.10.

n  Conversor î  http://code.google.com/speed/webp/




n Otimizando imagens î Como o tamanho de arquivo é um fator

importante na publicação web, a otimização/compactação de arquivo e uma necessidade absoluta.

î O Adobe Photoshop permitem otimizar a exibição e o tamanho de arquivo das imagens para obter resultados satisfatórios na publicação Web.




n Otimizando imagens î Importante!

n  Em geral, o tamanho de uma imagem deve ser pequeno o bastante para permitir tempos de download razoáveis de um servidor Web,

n  mas grande o suficiente para representar as cores e os detalhes desejados na imagem.




n Otimizando imagens î O que é otimização?

n  Compactar um arquivo você já fez na vida, por exemplo, pegar um arquivo do Microsoft Word e com o auxilio de um software de compactação “zipou” o arquivo e ele ficou pequenino.

n  Com certeza você fez a mesma coisa com uma foto e... o resultado não foi o mesmo, o arquivo diminuiu quase nada, porque?





n  Resposta: î  Os softwares como Winzip, Winrar e outros que utilizamos

para compactar fazem o que chamamos de compactação sem perda, ou seja, uma vez compactado o arquivo do tipo texto, eu posso recuperar o arquivo original fazendo o processo inverso.





n  Resposta: î  Os softwares como Winzip, Winrar e outros que utilizamos

para compactar fazem o que chamamos de compactação sem perda, ou seja, uma vez compactado o arquivo do tipo texto, eu posso recuperar o arquivo original fazendo o processo inverso. §  Quando fazemos isso com uma foto, não funciona

porque os softwares como Winzip, Winrar a principio não foram criados para compactar este formato de arquivo.





n  Por isso chamamos de otimizar, pois este processo nas imagens gera uma perda de informação que não tem volta, e isto ocorre para poder diminuir a quantidade de informação redundante na foto e assim reduzir o tamanho final do arquivo.

î  Os arquivos não-otimizados: possuem informações redundantes.

î  Por exemplo, vamos pegar como base apenas uma linha de uma imagem qualquer com 35 pixels brancos. Um arquivo não-otimizado repete a informação “pixel branco” 35 vezes.




n Otimizando imagens î Tipos de otimização de imagens

n  Os dois tipos básicos de compactação são: î  Lossy î  Nonlossy (ou lossless).





n  Lossy î  A compactação lossy elimina informações redundantes para

tornar o arquivo menor. î  Por exemplo, se existirem 30 pixels brancos seguidos de um

pixel cinza e mais quatro pixels brancos pós o pixel cinza, uma compactação lossy converte o pixel cinza em um pixel branco e escreve uma única informação “35 pixels brancos aqui”.




n  Otimizando imagens î Tipos de otimização de imagens

n  Lossy î  Apenas o formato de arquivo JPG suporta compactação lossy e

permite escolher o nível de otimização para que você possa equilibrar a fidelidade da imagem contra o tamanho de armazenamento do arquivo.

î  Níveis §  Uma otimização JPEG baixa resulta em arquivos que são

quase idênticos ao original. §  Uma otimização JPEG média elimina detalhes que podem

ou não ser visíveis na tela. §  Uma otimização JPEG alta costuma embaçar as imagens e

prejudicar um pouco do detalhe, mas, em muitas imagens, o resultado ainda é perfeitamente satisfatório.





n  Nonlossy (lossless) î  A compactação nonlossy nunca elimina totalmente as

informações redundantes, mas procura meios mais eficientes de definir a otimização de uma imagem.

î  Tomando como base o exemplo que utilizamos anteriormente, se existirem 30 pixels brancos seguidos de um pixel cinza e mais quatro pixels brancos pós o pixel cinza, uma compactação nonlossy deixa a imagem final assim: 30 pixels brancos aqui, um pixel cinza em seguida, 4 pixels brancos.





n  Nonlossy (lossless)

Apenas o formato de arquivo GIF suporta compactação nolossy e permite escolher o a quantidade de cores de acordo com a tabela de cor da imagem para que você possa equilibrar a fidelidade da imagem contra o tamanho de armazenamento do arquivo.





n  Nonlossy (lossless)

O GIF também é conhecido como um arquivo de cores indexadas que significa que as cores são armazenas em uma tabela de cor ou mapa de cor. As variações de cores podem ser: 2, 4, 8, 16, 32, 64, 128 e 256




n Otimizando imagens î Importante!

n  A otimização não diminui a dimensão de uma imagem, por exemplo, uma imagem com 640x480 pixels não muda absolutamente nada, apenas torna o arquivo menor para armazenamento.

n  A otimização nunca substitui a prática de manter a resolução ao máximo necessário.




n  Otimizando imagens com o Adobe Photoshop î Adobe Photoshop pode nos ajudar a otimizar as

imagens que utilizaremos em um website. î Estas imagens podem ser:

n  Uma galeria de fotos; n  Fotos dos produtos de uma empresa; n  E as imagens que compõem o layout do website.




n  Otimizando imagens com o Adobe Photoshop î Otimizando uma imagem JPG

n  Abaixo segue um roteiro para que você possa entender o recurso de otimização utilizado pelo Adobe Photoshop:

1- Inicie o Adobe Photoshop. 2- Menu > File > Open... abra o arquivo 14start1.psd, localizado na pasta Otimizando imagens para web que você já fez o download no ambiente. 3- Menu > File > Save for Web & Devices... 4- Clique na guia 4-Up da janela de diálogo Save for Web & Devices. 5- Usando o menu pop-up Zoom Level no canto inferior esquerdo, mude a porcentagem de ampliação para 200% ou um valor que permita visualizar mais detalhes da imagem. 6- Posicione o mouse sobre a imagem ativa, o ponteiro do mouse muda para uma mão podendo assim arrastar a imagem até o texto 'Tropical Rainforest'. 7- No menu pop-up Preset, escolha JPEG Low.




n  Otimizando imagens com o Adobe Photoshop î Otimizando uma imagem JPG




n  Otimizando imagens com o Adobe Photoshop î Otimizando uma imagem GIF

n  Abaixo segue um roteiro para que você possa entender o recurso de otimização utilizado pelo Adobe Photoshop:

1 - Menu > File > Open e abra o arquivo 14start2.psd, localizado na pasta Otimizando imagens para web. Essa imagem foi criada no Adobe Illustrator, observe as muitas áreas de cor sólida ou chapada. 3- Menu > File > Save for Web & Devices... 4 - Clique na guia 2-Up da janela de diálogo Save for Web & Devices. 5 – No menu pop-up Preset > escolha GIF 128 No Dither. 6 - Escolha Percentual no menu pop-up Color Reduction Algorithm.











Perguntas

?



Considerações Finais

Fonte: ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição FAULKNER, Andrew. Official Adobe Electronic Publishing Guide. Editora Adobe Press. USA, 1º edição janeiro 1999.

Documents

Unb 2012.1 - dweb - 06 - imagens otimizadas