Unb   2012.1 - dweb - 06 - imagens otimizadas
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Unb 2012.1 - dweb - 06 - imagens otimizadas

  • 625 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
625
On Slideshare
625
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb 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:121 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/carlosjoser2n2 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
  • 3. DWEB - Design para Web / Carlos José Objetivo da Aulan 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é Agendan Imagens vetoriais x imagens rasterizadasn Formatos de arquivosn Otimizando imagens4 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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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.asp17 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 webn  Formatos de Arquivos inovadores î SVG (Scalable Vector Graphics) http://www.openclipart.org18 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 webn  Formatos de Arquivos inovadores î SVG (Scalable Vector Graphics) http://www.openclipart.org/image/800px/svg_to_png/1314193351.pnghttp://www.openclipart.org/people/gnokii/1314193351.svg19 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 webn  Formatos de Arquivos inovadores î SVG (Scalable Vector Graphics) http://croczilla.com/bits_and_pieces/svg/samples/svgtetris20 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 webn  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 webn  Formatos de Arquivos inovadores î Webp23 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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 webn  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 25636 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 webn  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 webn  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 webn  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 webn  Otimizando imagens com o Adobe Photoshop î Otimizando uma imagem JPG40 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 webn  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 webn  Otimizando imagens com o Adobe Photoshop î Otimizando uma imagem GIF42 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 webn  Otimizando imagens com o Adobe Photoshop î Otimizando uma imagem GIF43 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 FinaisFonte: ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª EdiçãoFAULKNER, Andrew. Official Adobe Electronic Publishing Guide. Editora Adobe Press. USA, 1º ediçãojaneiro 1999.45 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12