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

Unb 2012.1 - dweb - 06 - imagens otimizadas

on

  • 559 views

 

Statistics

Views

Total Views
559
Views on SlideShare
559
Embed Views
0

Actions

Likes
1
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Unb   2012.1 - dweb - 06 - imagens otimizadas Unb 2012.1 - dweb - 06 - imagens otimizadas Presentation Transcript

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • DWEB - Design para Web / Carlos José Perguntas ?44 Capítulo 6 - Imagens – formatos e otimização Monday, 16 de April de 12
  • 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