Quais são os formatos para imagens na Web? - @Curso em Vídeo HTML5 e CSS3

Oi e aí você assistiu o vídeo anterior falando sobre direitos autorais é muito importante que você tenha visto até porque no final do vídeo a gente começou a baixar uma ferramenta que vai ser muito importante que eu vou começar a instalar agora que é o INPI então assistir o vídeo anterior se você não assistiu e a gente vai falar agora sobre formatos de imagem 1 [Aplausos] E aí [Música] o Olá tudo bem seja bem-vindo a mais uma aula aqui do seu curso de HTML e CSS estamos no capítulo 6 do derrame que tá lá no

seu repositório então já leu o capítulo 6 lá e nós vamos falar sobre formatos de imagem agora eu vou ter sempre ficar aqui durante a aula utilizando o guimp então basicamente que a gente vai fazer agora em instalar o INPI e daqui a pouco a gente fala sobre formatos de arquivos vamos nessa nosso recado mais uma vez aqui nessa aula é do estudo na alta e dessa vez eu vim falar sobre um curso muito maneiro que não precisa de conhecimento de programação e não é para criação de sites ele é um curso especial que te

ensina produção de vídeos você está assistindo esse curso desde o início você sabe que eu tô gravando esse curso dentro do meu apartamento daqui é um pequeno cômodo que eu uso como escritório e o transformei ele completamente no estúdio de gravação e dentro do Studio Nauta nós temos um curso nós temos vários módulos Na verdade até o em seis módulos lançados que vão te ensinar a produzir o seu conteúdo em vídeo nesse curso existem módulos que vão te ensinar a tratar a iluminação captação de som de vídeo vai te ensinar também a editar vídeos no

Premiere né fazer os cortes esses quatro que você vê acontecendo aí inclusive que acabou de acontecer um também vai aprender a fazer pequenas animações com After Effects e também a utilizar o Photoshop para criar sua Camp E para isso é só você se tornar aluno do estudo na alta e pagando o valor mensal pequenininho vai ter acesso a todos esses módulos EA muitos outros módulos de outros cursos que eu sempre vem apresentando aqui para você é só você acessar esse link que está aqui ó apontando a câmera do seu celular para esse QR Code e

lá você vai ter maiores informações inclusive um cadastro de reserva caso as nossas vagas tenham se encerrado temporariamente um grande abraço hoje tudo na alta Obrigado aí pelo Patrocínio e voltamos agora a nossa aula normal Então já baixei o link se você não A aula anterior a gente vai lá na nossa área de downloads que ele vai estar lá daqui alguém que 2.10 no momento em que eu tô gravando provavelmente já saiu outra versão aí quando você tá assistindo aí ele vai entrar no lugar perguntar se você vai querer instalar só para mim ou para

todos os usuários a gente tá todos os olhos ou se você preferir só para você você que manda e dizendo aqui que vai permitir que o aplicativo altere Eu já falei isso para você e tome cuidado com isso aqui então software livre é de uma organização é confiável Então pode confiar mas cuidado não clica nisso em tudo que você vê para instalar no seu computador não tá ele já vai sugerir aqui que você instale a versão em português brasileiro Ok Ele tá totalmente traduzido e aquele tá no gif 2 e eu vou clicar aqui em

instalar Pode ser que o processo seja um pouquinho ligeiramente diferente quando você baixar uma versão mais para frente aquela imagem seja um pouco diferente mas o processo é bem simples um link é uma ferramenta bem simples poderosa e aí muita gente fala assim a mais de Guanabara ele não é igual photoshop Não ele não é igual Photoshop não me chamaria e ele é mais limitado que o Photoshop sim mas ele é gratuito você pode utilizar sem problemas a gente vai poder redimensionar vai poder exportar arquivo no formato web a gente vai poder fazer as coisas

simples que o Photoshop faz às vezes cortar uma imagem fazer uma pequena montagem dá para fazer no link e se não é um curso de guinte eu vou te mostrar vou usar alguém para te demonstrar formatos de imagem e tamanhos de imagem que a ultrassom que a gente vai ver aqui também não basicamente pudim Tá instalando não me perguntou mais nada ele só tá estranho dos arquivos aqui você tá vendo o processo de instalação completo e deu uma travada agora a verdade não é travada na ele tá me provavelmente mexendo em alguma biblioteca e aquele

tá pegando um arquivo dll agora mas ele vai prosseguir e vai terminar vamos falar um pouco sobre formatos de arquivo encontre termina aqui a instalação basicamente para web existem vários no mundo existem vários formatos de arquivo para imagens mas para web basicamente a gente usa jotapeg e png tá em poucas versões a gente usa um GIF ou shift que é muito difícil crer muito pesado existe o arquivo svg também mas basicamente você vai conseguir se virar muito bem um J pegue e o png ele fala pow na moral Mas qual o melhor qual que eu

escolho a minha resposta simples depende Depende do que você quer Depende do que você precisa basicamente você deve ter visto aí no material que eu tô vendo agora o formato já tá pegue ele foi criado em 1983 cara 83 é muito antigo e ele basicamente consegue compactar uma imagem vou te explicar de forma Simples você tá vendo aqui meu braço eu tô com uma pulseira de relógio verde se eu vou tirar uma foto agora esse Verde daqui desse ponto é o mesmo verde do ponto do lado que é o mesmo verde do ponto do outro

então ele não salva todos os pontos uma imagem um conjunto de pontos né que vai dar desde o ponto zero zero que é aqui em cima se eu não me engano tá é porque o quando grava grava tudo hein é o ponto zero zero é esse Então vai pontos de coluna e aqui pontos de linha Então você tem vários pontos aqui o vídeo é um conjunto de pontos que vai mudando numa velocidade muito rápida de 30 quadros por segundo 24 quadros por segundo normalmente 30 ou esse que você está assistindo agora ele muda de 60

em 60 quadros então a cada segundo ele vai te mostrar 60 quais são várias imagens um vídeo assunto que não é vídeo é o assunto aqui ó ele já terminou gripe só para você dar uma olhada aqui eu vou só clicar em concluir tá Depois a gente continua nele três coisas que todo produtor de conteúdo sempre pede e comigo não vai ser diferente se você está gostando desse curso ou de qualquer outro curso ou um vídeo do canal do curso em vídeo não se esquece sempre de deixar o seu like deixa também um comentário de

incentivo ou até mesmo comentário de dúvida Isso facilita muito o algoritmo do YouTube saber que você tá gostando que te oferecer mais e mais conteúdos nossos e não se esquece também de se inscrever no canal e agora até o sistema de inscrição mudou um pouquinho lá o Sininho você tem que dizer que quer receber todas as notificações ajuda aí o canal do curso em vídeo A continuar relevante para galera de tecnologia e a gente continua daqui produzindo vídeos de qualidade não é então basicamente uma imagem um conjunto de pontos o jotapeg ele consegue guardar informação

de um ponto relativo a outro ele consegue compactar uma imagem da homenagem que ficaria no arquivo gigante ocupando muitos megabytes né E talvez você não esteja acostumado ainda com medidas de armazenamento né quilo kilobyte megabyte Gigabyte terabyte não quanto mais esse essa escala que eu montei quanto maior o arquivo mais difícil vai ser você carregar mais difícil você para você colocar na internet então internet não pode ter arquivos pesados por isso o já tá pega um formato com compactação assim é o melhor formato de compactação ele surgiu em 1983 já o png ele é mais

recente de surgiu 1996 A Criada pela world wide web consortium o w3c que a mesma empresa mesmo órgão que criou e que mantém a linguagem HTML que é o que a gente está estudando basicamente o formato png ele foi utilizado e foi criado a substituir o formato gif E na verdade a gente fala GIFE tá depois de muitos anos o criador da linguagem veio para a gente falou sinal certo de falando a gif agif mas aí já era tarde demais a gente já tá falando disso é muito tempo formato gif eu não formato muito antigo

que já voltou a moda aí por causa do WhatsApp né você consegue adicionar os gifs no WhatsApp no Instagram é ele é basicamente um formato com imagem horrorosa só que lhe permite duas coisas importantes transparência e Animação o png não permite animação mas o png permite transparência tão a vantagem do jpg alta compactação o png também é compactado Tá mas ele não tenha alta compactação do J tag só que lhe permite transparência Deu para entender como é que funciona o negócio e a entender basicamente isso quero botar uma foto no fundo da minha tela uma

foto gigante a foto vai ficar grandona melhor formato RJ Peg usam formato de compactação bem grande aí eu preciso de uma imagem que fica e flutuando por cima e com fundo transparente só vai servir o png Então essa é o dilema que você tem que prestar bastante atenção então assim formato de imagem você tem que tomar bastante cuidado para que a sua imagem e não Pese no seu site me imagem Às vezes você pega mais fácil Nossa mais assim a gente tá linda a qualidade dela tá top mas o arquivo ficou com sei lá 20m

por 20m pela internet dependendo da internet você tiver no celular é a morte você não consegue carregar o arquivo de 20mb com facilidade dentro de um site você tem que tomar bastante cuidado com isso também certo Então nesse vídeo que eu tô te mostrando aqui eu vou te mostrar o arquivo da tag eu vou te mostrar um arquivo png para você poder entender vamos direto para o computador lá vamos lá basicamente quando você entra no Google imagem João Luiz voltar lá no Google Imagens você vai pesquisar sei lá paisagem e para pôr paisagem normalmente essas

paisagens quando quando o arquivo é muito grande como é que você faz para pesquisar um arquivo grande no Google Imagens pode vir aqui em ferramentas posso vir aqui o direito de uso eu quero um direito total de uso e modificação que eu quero ter esse direito é uma paisagem e eu quero tamanho aqui ó grande só vai pesquisar imagem grande essa área aqui de ferramenta é muito útil para quem vai criar site tá então provavelmente essa imagem tá vendo aqui ó essa imagem aqui ela tá grande tá 5.184 3.456 a soma senhora imagem vamos ver

aqui ó provavelmente essa imagem está disponível para os gratuito tá vendo provavelmente essa imagem tá lá no Texas inclusive ela é muito grande e provavelmente ela está em formato J pegue perto então eu vou fazer o seguinte aqui ó eu vou clicar com o botão direito e vou mandar salvar imagem como certo vou salvar aqui na minha área de trabalho e depois eu vou apagar tá então vou vir aqui ó na área de trabalho e vou salvar o formato que ele me deu Aqui ó ele é uma imagem jpg então ele tem que compactação imagem

J pegue elas têm a extensão jpg canal não bota a extensão lajota pegue tipo html html mesmo então já tá pega e jpg Então vou salvar ela aqui vou botar Que paisagem não precisa botar a extensão que ele mesmo já vai colocar a outra coisa utilize só letras minúsculas em nome de seus arquivos já falei sobre isso né vou morar salvar ele vai aparecer aqui ó paisagem agora vou voltar lá no Google imagens e vou pesquisar por Sei lá cara eu quero logo da Faetec Faetec logo eu vou mudar aqui eu não quero grande eu

quero qualquer tamanho eu quero aqui ó a cor eu quero transparente aqui a algum ponto chave para você procurar arquivos png é você clicar aqui em transparente então acabei de achar aqui tá vendo ó livre para utilizar e transparente só vendeu duas opções uma do Governo do Estado do Rio de Janeiro e outra logo da Faetec essas eu posso usar Se você deixar aqui a provavelmente sem filtro ele vai aparecer mais coisa tá vendo eu tenho direito de usar essas imagens Combinado então vamos sempre prestar muita atenção nisso que eu botar aquilo quer utilizar só

tranquilo eu vou abrir E aí você já vai perceber ó tá vendo você viu o que aconteceu aqui eu vou tentar replicar vou voltar vou clicar de novo não agora já apareceu Ele não aparece transparência vendo que tem esses quadradinhos aqui atrás aqui não tá aparecendo aqui tá cuidado que as vezes as pessoas botam esses quadradinhos de propósito você acha que tá transparente vou clicar com o botão direito aqui vou mandar salvar a imagem como você vai ver aqui ó olha o formato que ele tá te pedindo aqui ele é o formato png perto então

aqui a Faetec Universal eu vou mudar o nome só para FAETEC Vou salvar ele também está aqui na área de trabalho vou abrir o meu gerenciador de arquivos vou vir para área de trabalho e vou colocar aqui em exibir a detalhes tá você vem aqui em exibir e depois bota detalhes para que para ele mostrar o nome do arquivo né não nome né ou formato e o tamanho Se você olhar aqui essa paisagem e ela tem um ponto 2 megabytes tá é porque ele tem 1836 kilobytes a conta não é bem essa não é só

não é tipo quilo de peso aquilo debate é vezes oito mas a redonda aí que tá de boa caça minha paisagem ela tá o arquivo bem grande e bem pesada né 1.8 Mega já aqui ó na FAETEC um arquivo pequenininho de 23 cartão vou abrir por exemplo aqui ó vou abrir o clique duas vezes no nome do arquivo da Faetec e tá me perguntando o que que eu quero abrir em que eu quero abrir inclusive ele tem a opção do cliente aqui ou abrindo fotos alá Você tá vendo que a Faetec a imagem da Faetec

que a logo da Faetec ela é transparente perto fundo tá exatamente o fundo dali eu posso vir aqui no Google imagem de novo e mandar procurar Faetec tirar o transparente eu quero qualquer cor eu vou fatalmente encontrar logos da Faetec como por exemplo essa daqui é só uma louca da Faetec também essa é mais antiga vou salvar ela é 1020 e por 289 Vou salvar a imagem como vamos ver se ele é jpg ou png e jpg então jpg não tem suporte a transparência a gente ela vai ver aqui ó eu vou salvar na área

de trabalho e vou salvar como é o nome que doido 4579 Enfim vou chamar de fé e Tec: já tá pego eu posso até botar vai até aqui mesmo porque eu voltei o faetec-rj pegue o faz até que png vou até deixar aqui salvar ele deixou agora eu tenho o seguinte ó vou voltar aqui eu tenho a Faetec no formato png e no formato jpg no formato png ele tem transparência já mostrei isso para você certo então ele tem lá a transparência já não formato jpg ó vou mandar abrir com fotos também ele Ó eu

posso fazer o que eu quiser aqui ó o fundo é escuro aqui branco então eu não poderia botar um papel de parede aqui atrás tão jotapeg não pensa essa possibilidade outra coisa o já tá Pegue seu aumento Vou tentar aumentar aqui é que o aumento e vai chegar o momento você tá vendo aquela começa a distorcer ela fica toda quadriculada tá vendo chega um momento em que ela tá tão compactada que você não consegue ver com tantos detalhes você não consegue ver os detalhes já o jotapeg se você vê aqui ó o pênis de perdão

já o png você pode dar zoom ele vai distorcer vai mas ele vai distorcer muito menos está vendo porque ele tem maior qualidade Tranquilo então acho que você entendeu aqui a questão dos formatos né png é sempre que eu quiser usar imagens com fundo transparente e com a qualidade um pouco melhor jpg é quando eu quiser usar imagens e a importância a compactação é algo muito importante para mim beleza o próximo vídeo a gente vai usar o guimp com essas imagens que a gente baixou aqui vai baixar até mais necessário fogo para a gente poder

entender sobre tamanho da imagem e tamanho em bytes para deixar o site cada vez mais leve que esse vai ser o nosso objetivo Então a gente tem encontro marcado no próximo um abraço e até já [Música] [Aplausos] E aí [Aplausos] [Música]