Este documento fornece uma introdução sobre formatos e otimização de imagens para web, discutindo: 1) Imagens vetoriais versus rasterizadas; 2) Principais formatos de arquivo como JPEG, GIF, PNG, EPS; e 3) Novos formatos como SVG e WebP. O objetivo é fundamentar o uso adequado de imagens na web.
1. 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
2. DWEB - Design para Web / Carlos José
Contato
Carlos José
carlosjose.unibratec@gmail.com
www.carlosjose.net
twitter.com/carlosjoser2n
2 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
3. DWEB - Design para Web / Carlos José
Objetivo da Aula
n Fundamentar o uso de imagens na
web.
3 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
4. DWEB - Design para Web / Carlos José
Agenda
n Imagens vetoriais x imagens
rasterizadas
n Formatos de arquivos
n Otimizando imagens
4 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
5. DWEB - Design para Web / Carlos José
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.
5 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
6. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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).
î 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.
6 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
7. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Imagens vetoriais x imagens rasterizadas
A primeira bicicleta é uma imagem rasterizada e a segunda bicicleta é
uma imagem vetorial.
7 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
8. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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)
8 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
9. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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.
9 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
10. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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.
10 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
11. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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.
11 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
12. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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.
12 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
13. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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.
13 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
14. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Formatos de Arquivos
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.
14 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
15. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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 (???)
15 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
16. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Formatos de Arquivos inovadores
î SVG (Scalable Vector Graphics)
n Trata-sede 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.
16 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
17. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Formatos de Arquivos inovadores
î 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
17 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
18. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Formatos de Arquivos inovadores
î SVG (Scalable Vector Graphics)
http://www.openclipart.org
18 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
19. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Formatos de Arquivos inovadores
î SVG (Scalable Vector Graphics)
http://www.openclipart.org/image/800px/svg_to_png/1314193351.png
http://www.openclipart.org/people/gnokii/1314193351.svg
19 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
20. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Formatos de Arquivos inovadores
î SVG (Scalable Vector Graphics)
http://croczilla.com/bits_and_pieces/svg/samples/svgtetris
20 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
21. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
<!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>
21 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
22. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Formatos de Arquivos inovadores
î 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.
22 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
23. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Formatos de Arquivos inovadores
î Webp
23 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
24. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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/
24 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
25. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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.
25 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
26. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na 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.
26 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
27. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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?
27 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
28. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Otimizando imagens
î O que é otimização?
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.
28 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
29. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Otimizando imagens
î O que é otimização?
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.
29 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
30. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Otimizando imagens
î O que é otimização?
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 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.
30 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
31. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Otimizando imagens
î Tipos de otimização de imagens
n Os dois tipos básicos de compactação são:
î Lossy
î Nonlossy (ou lossless).
31 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
32. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Otimizando imagens
î Tipos de otimização de imagens
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”.
32 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
33. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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.
33 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
34. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Otimizando imagens
î Tipos de otimização de imagens
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.
34 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
35. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Otimizando imagens
î Tipos de otimização de imagens
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.
35 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
36. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Otimizando imagens
î Tipos de otimização de imagens
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
36 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
37. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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.
37 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
38. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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.
38 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
39. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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.
39 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
40. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Otimizando imagens com o Adobe Photoshop
î Otimizando uma imagem JPG
40 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
41. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
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.
41 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
42. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Otimizando imagens com o Adobe Photoshop
î Otimizando uma imagem GIF
42 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
43. DWEB - Design para Web / Carlos José
Fundamentos do uso de imagens na web
n Otimizando imagens com o Adobe Photoshop
î Otimizando uma imagem GIF
43 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
44. DWEB - Design para Web / Carlos José
Perguntas
?
44 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
45. DWEB - Design para Web / Carlos José
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.
45 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12