Unb 2012.1 - dweb - 06 - imagens otimizadas

Curso Superior de Tecnologia em Design Gráfico

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

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

DWEB - Design para Web / Carlos José

Contato

Carlos José

carlosjose.unibratec@gmail.com
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.




î Imagens rasterizadas
n  O Adobe Photoshop é um programa baseado em
pixels (também conhecido como programa de mapas
de bits ou imagens raster).
î  Emoutras palavras, ele utiliza pixels, ou pequenos pontos
de luz, para descrever, armazenar e manipular imagens no
computador.
n  Atarefa de converter uma imagem Vetorial em Pixel
chama-se: Rasterizar.





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)




î 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 ﬁnalizado
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.




î 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 fotograﬁas
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.




î  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.




î 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.




î 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.




Se sua imagem...
Use...
Porque...

Tiver cores uniformes
GIF ou JPG Eles se destacam na compactação de cor uniforme.

de 8bits

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

For uma combinação de GIF ou PNG Os formatos de cor indexada são melhor na preservação e na
imagens uniformes e de 8bits
otimização de áreas de cor uniforme. O pontilhado que
fotográfica
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 PNG
PNG é o único formato que suporta transparência de canal
transparências
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 (???)




î SVG (Scalable Vector Graphics)
n  Trata-sede um formato aberto, desenvolvido pela
W3C e que surgiu oﬁcialmente 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 ﬁguras 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.




î  SVG (Scalable Vector Graphics)
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>




î Webp (pronuncia-se “weppy”)
n  Trata-sede 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.




î Webp




î 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.




î 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 suﬁciente para representar as cores e
os detalhes desejados na imagem.




î 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 ﬁcou 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:
î  Ossoftwares 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  Porisso 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 ﬁnal 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.




î 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”.




î  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 ﬁdelidade 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.





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.





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




î 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.




î 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.




î Otimizando uma imagem JPG




î 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.


Unb 2012.1 - dweb - 06 - imagens otimizadas

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (19)

Semelhante a Unb 2012.1 - dweb - 06 - imagens otimizadas

Semelhante a Unb 2012.1 - dweb - 06 - imagens otimizadas (20)

Mais de Claudenio Alberto

Mais de Claudenio Alberto (20)

Unb 2012.1 - dweb - 06 - imagens otimizadas