View
279
Download
1
Category
Preview:
Citation preview
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é
2 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Contato
Carlos José
carlosjose.unibratec@gmail.com www.carlosjose.net
twitter.com/carlosjoser2n
DWEB - Design para Web / Carlos José
3 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Objetivo da Aula
n Fundamentar o uso de imagens na web.
DWEB - Design para Web / Carlos José
4 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Agenda
n Imagens vetoriais x imagens rasterizadas
n Formatos de arquivos n Otimizando imagens
DWEB - Design para Web / Carlos José
5 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
6 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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).
î 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.
DWEB - Design para Web / Carlos José
7 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
8 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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)
DWEB - Design para Web / Carlos José
9 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
10 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
11 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
12 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
13 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
14 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Fundamentos do uso de imagens na web
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.
DWEB - Design para Web / Carlos José
15 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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 (???)
DWEB - Design para Web / Carlos José
16 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Fundamentos do uso de imagens na web
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.
DWEB - Design para Web / Carlos José
17 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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
DWEB - Design para Web / Carlos José
18 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Fundamentos do uso de imagens na web
n Formatos de Arquivos inovadores î SVG (Scalable Vector Graphics)
http://www.openclipart.org
DWEB - Design para Web / Carlos José
19 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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
DWEB - Design para Web / Carlos José
20 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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
DWEB - Design para Web / Carlos José
21 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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>
DWEB - Design para Web / Carlos José
22 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Fundamentos do uso de imagens na web
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.
DWEB - Design para Web / Carlos José
23 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Fundamentos do uso de imagens na web
n Formatos de Arquivos inovadores î Webp
DWEB - Design para Web / Carlos José
24 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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/
DWEB - Design para Web / Carlos José
25 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
26 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
27 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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?
DWEB - Design para Web / Carlos José
28 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
29 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
30 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Fundamentos do uso de imagens na web
n Otimizando imagens î O que é otimização?
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.
DWEB - Design para Web / Carlos José
31 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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).
DWEB - Design para Web / Carlos José
32 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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”.
DWEB - Design para Web / Carlos José
33 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
34 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
35 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
36 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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
DWEB - Design para Web / Carlos José
37 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
38 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
39 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
40 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Fundamentos do uso de imagens na web
n Otimizando imagens com o Adobe Photoshop î Otimizando uma imagem JPG
DWEB - Design para Web / Carlos José
41 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
DWEB - Design para Web / Carlos José
42 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Fundamentos do uso de imagens na web
n Otimizando imagens com o Adobe Photoshop î Otimizando uma imagem GIF
DWEB - Design para Web / Carlos José
43 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Fundamentos do uso de imagens na web
n Otimizando imagens com o Adobe Photoshop î Otimizando uma imagem GIF
DWEB - Design para Web / Carlos José
44 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
Perguntas
?
DWEB - Design para Web / Carlos José
45 Monday, 16 de April de 12 Capítulo 6 - Imagens – formatos e otimização
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.
Recommended