O tamanho das imagens importa para um site? - @Curso em Vídeo HTML5 e CSS3

Oi e aí você conseguiu entender os formatos das imagens que a gente viu na aula passada eu te ensinei com a diferença entre jpg png e quais são as vantagens e desvantagens de cada um E agora a gente vai falar sobre tamanho das imagens que a outra assunto bem importante a gente começar a colocar reflexivamente imagens no nosso site e [Aplausos] E aí [Música] o Olá tudo bem seja bem-vindo seja bem-vindo a mais uma aula aqui do seu curso de html agora a gente tá na reta final aqui do assunto formato tamanho direitos autorais a gente vai realmente acrescentar imagens no site pra gente precisa falar sobre isso que não adianta eu te entregar uma imagem já pronta e ele na hora de você vir trabalhar você tem que gerar suas próprias imagens E para isso a gente está loguint na aula passada já deixamos ele instalado e agora nós vamos usar para poder gerar vários formatos e tamanhos das nossas próprias imagens vem comigo vou dar uma pausa rapidinho na sua aula para contar uma história muito especial que a Record trouxe aqui para gente E como você sabe a Record tem iniciativas pelo Brasil inteiro com o objetivo de preparar a galera o mercado de trabalho e a história que eu trouxe hoje aqui para você é do Rafael Silva que é morador aqui do Rio de Janeiro na comunidade do Quitanda aqui em costa barros e ele participou de uma das grandes iniciativas da Record que a Record próprio ele foi um dos selecionados o completo de desenvolvimento fustec no fim de todo o processo ele foi contratado e hoje trabalha no setor de desenvolvimento de um grande Banco Nacional se você quiser conhecer a história toda do Rafael Silva é só você apontar a câmera do seu celular para esse código QR que tá aparecendo na sua tela e na nossa página especial que foi criada pela Record vai dar o vídeo completo que a gente mostrou só algumas cenas aqui e também vários links para você conhecer todas as iniciativas que a Record traz para você se você preferir o link que está aparecendo aqui também está na descrição do vídeo Obrigado repouso pelo patrocínio do curso e parabéns a toda equipe e principalmente pelo Rafael pela grande conquista então a Já estou aqui a gente salvou na aula anterior se você não viu veja porque a gente só vou te expliquei a diferença de formatos expliquei um monte de coisa então a gente tem lá que o arquivo de paisagem que o arquivo gigante vou abrir até aqui com o foro Se bem que não está tão grande não calma aí deixou a não é grande né Ele é gigante é um aqui ó provavelmente vai chegar no momento em que ela vai começar a distorcer né já que o formato J pegue ele faz isso tá vendo aqui ó ele vou até dar 11 Extra Olha isso ele começa a trabalhar ele começa a ter umas linhas então assim isso aqui é o algoritmo de compactação funcionando não sei se você consegue ver essa linha aqui vertical ele vai querendo blocos mas enfrentá-la o J pegue é um formato que fica bonito mas você nunca cara entendo o seguinte você não vai ter a perfeição tá se você quiser a perfeição perto de perfeição você vai ter um arquivo um site muito pesado um site que ocupa muito espaço Tá eu vou fazer o seguinte então nós vamos gerar desse arquivo vários tamanhos e você vai entender a coisa do arquivo leve o arquivo pesado né o formato ele tem essa essa esse dinamismo e você vai ter que saber isso no seu dia a dia então vamos lá eu vou fazer o seguinte eu vou criar uma pasta nova aqui o botão direito na área livre não pode ser em cima do ícone tem que ser nada livre vou criar aqui novo pasta e vou chamar de imagem o jogar todos é só rasteira quem fez um lacinho para os três vou arrastar os três para dentro da pasta tá a manteiga tudo organizadinho vou abrir essa pasta e aqui eu tenho os três imagens eu vou criar uma outra parte aqui chamada paisagens e vou jogar aqui paisagem aqui dentro tá só arrastei o arquivo para dentro tá aqui dentro dessa parte da paisagem a gente tem aqui a paisagem eu vou renomear este arquivo para renomear no Windows você pode clicar com o botão direito em cima do nome do arquivo e escolher renomear ou você clica uma vez espera um pouquinho clica uma segunda vez espera um pouquinho ele vai deixar você mudar o nome tá mas tem que esperar não é clicar duas vezes não são [ __ ] eu posso botar senhor paisagem traz UFO full significa que ele vai ser o tamanho completo tá uma imagem dessa paisagem full já tinha dito para você que já tava bem grande já tava com 1. 8 Mega o arquivo de quase 2m é muito pesado para né para compor um site então normalmente o que a gente faz eu vou fazer o seguinte eu vou clicar com o botão direito em cima dessa paisagem fu já que ele é uma imagem eu vou mandar abrir com O que foi o programa que a gente está louco na aula passada então clicar ele vai abrir o link na primeira vez que ele abre ele faz uma carga de um monte de biblioteca Ele demora um pouquinho mais mas você viu aqui ó que ele carregou mega rápido ele tá dizendo aqui que eu quero manter os eu quero trabalhar com um formato do link Eu Quero manter o formato dele tá então tá lá a paisagem gigantona esse arquivo está monstro está 3 mil até aqui ó você ver o tamanho dele é 3. 375 x2250 você vai falar assim poxa mas falta amanho certo para usar em site cara 1500 no máximo o tamanho no arquivo e 500 de largura ele tá aqui com 3.

375 1500 já é um arquivo que tamanho razoável então vamos fazer o seguinte eu vou gerar esse 3. 375 vou gerar ele em 1500 de largura claro que seu diminua largura tem que diminuir a altura proporcionalmente mas não precisa nem fazer conta o próprio gripe já se vira comigo que que eu vou fazer vou ver aqui ó em imagens e vai ficar aqui em cima imagem e tem uma opção que é a redimensionar em Ah tá aqui ó redimensionar imagem perto você vai clicar né se redimensiona imagem ele vai te perguntar Olha a largura atual como eu falei é 3. 375 de largura por 2.

250 de altura se você não tiver esse Elo de corrente fechado você quando você aumenta ou diminui vou diminuir aqui ó tá vendo ele tá diminuindo um e diminui o outro não só botar aqui 1500 que é o que a gente quer quando eu apertar a tecla abre do teclado você não sabe onde tá a tecla tabela faz duas teclas embaixo da essa é a primeira tecla do seu teclado duas teclas para baixo a tecla Tab tá apertei tarde ele já re calculou ele vai para 1. 500 de largura por mil pixels está vendo aqui ó ele tá aqui outra coisa que às vezes é alto demais é a sua resolução 72 é uma boa resolução resolução razoável às vezes está 100 150 200 pode botar aqui sem medo de ser feliz pode botar 72 pode botar um cinquentinha aqui tá não tem problema nenhum tá vai vai funcionar você pode clicar aqui em redimensionar ele vai redimensionar imagem para vocês bom então ele botou aqui a imagem um pouco menor mas menor olha só ele tá aqui embaixo se você ele tá com cinquenta por cento de visualização se eu botar 100% aqui ó ele mostrar o tamanho original vai falar 1500 e pouco olha o tamanho dessa imagem com 1. 500 ela com 3.

000 era gigante essa imagem desse tamanho tá ótimo 1500/1200 vou tá até 1. 200 vamos redimensionar de novo a imagem eu quero 1200 eu quero com 50 de resolução beleza vamos redimensionar ele já redimensionou perto e agora eu vou fazer o seguinte eu vou arquivo exportar como eu não vou sobre a escrever tá eu quero manter a imagem normal se você quiser apagar aquela versão de 3 mil e aquela versão full sobre a escrever ela não tem problema eu não recomendo Mantenha sempre as suas imagens full guardada no seu backup para você depois precisar gerar outros tamanhos aqui eu vou exportar como E aí ele vai perguntar aqui ó Eu quero um arquivo J pegue também eu vou colocar aqui em vez de paisagem fu eu vou botar aqui paisagem Mili em 1. 200 foi a largura que eu que eu fiz vou mandar exportar aí ele vai perguntar aqui a qualidade do meu do meu jotapeg vamos colocar oitenta por cento e setenta por cento e setenta por cento tá você pode arrastar também esse esse negocinho aqui ou botar setenta por cento você vai ver que vai de reduzir bastante a imagem pode deixar aqui tá ótimo feito isso você vai clicar aqui em exportar ele já exportou certo você continua tendo a imagem full lá de 3 mil e tantos de largura a gente tira uma versão de 1.

200 que é grande o suficiente ele vou fazer o seguinte eu vou redimensionar de novo a imagem imagem redimensionar imagem eu vou botar em vez de 1. 200 eu vou botar normalmente uma imagem para aparecer num site ela é 600 e 650 outra 650 ele já redimensionou vai ficar 650 por 433 é claro isso aqui na reta Você vai testar aí no seu projeto por isso é importante você manter a versão Full para você vou botar aqui cinquenta por cento de qualidade vou clicar em redimensionar tá vendo é uma imagem de tamanho razoável para usar no conteúdo de um site certo vamos exportar de novo portar como e nós vamos chamar aqui ó de paisagem Qual foi a largura que eu botei 650 650 vai ser um arquivo J pegue vou exportar vou manter a qualidade aqui em setenta por cento que já tinha feito e vamos exportar já exportou já fala para o Guanabara mas isso vai fazer diferença ele eu mandei fechar aqui tá perguntando se quer salvar você quer sobre a escrever o que é descartar eu vou querer de descartar certo eu quero manter o fundo do jeito que ele estava com quase dois Mega lá agora olha só eu vou fazer uma surpresa para você aqui eu tenho a fundo eu tenho a1200 estão tamanho Mega razoável que eu tenho a 650 que é um tamanho natural para colocar no meio no conteúdo de um site Olha só o tamanho disso Olha como diminuiu eu tinha um arquivo de 1. 8 Mega certo que era versão full eu tenho agora a versão mil duzentos que é um ótimo vai usar no fundo da página e tal 300 km E aí ele tinha 1800k eu reduzir por um tamanho muito satisfatório e ficou com 300 eu o reduzir um pouco a qualidade também e o 650 ótimo para usar durante o conteúdo 122k esses dois aqui tão bons a gente usar em sites de culpa Ficou claro para você que você não vai precisar da imagem no tamanho máximo se você quiser guardar tu imagem o teu backup a não no decatlo vou manter aqui o tamanho máximo se o cliente chegar para mim falar com essa imagem ficou meio feia aí você vai poder redimensionar o tamanho quiser mas sempre Gere utilizando aqui como eu acabei de te ensinar o tamanho da imagem do jeito que você quiser vou dar um outro exemplo aqui aquela logo da Faetec aluga da Faetec do formato png vamos ver se o pênis ele permite fazer isso também então é vou abrir aqui com o guimp abrir com gente mesma coisa clique com o botão direito na imagem no png abrir com Gimp está doendo o INPI ele vai perguntar provavelmente isso formato ciências quer utilizar coisa vou manter e tá Ah tá transparente você tá vendo aqui que ele ficou quadriculado que atrás e tudo mais ele tá com largura de 1.

187 por 246 aí vai imaginar que eu quero botar Faetec lá no Cantinho do site cara um arquivo de 1. 187 de largura é muita coisa que um site Claro você vai manter essa versão Full para você vai gerar a imagem do tamanho exato que você precisa aí eu preciso da largura 500 você bota lá na largura 500 no máximo que você vai poder porque assim Isso é se você vai poder aumentar e diminuir a imagem só que você não altera o tamanho do arquivo tão arquivos grandes pesam muito deixa um site lento sites lentos não aparecem no Google com tanta facilidade tá então fica meio atenta essa meio essa estrutura aqui você não pode deixar seu site lento nunca Então vamos gerar o arquivo menorzinho aqui de novo imagem é tamanho redimensionar imagem você tá vendo aquela mas o grip não faz as mesmas coisas Photoshop não faz tudo na cara a gente tá se virando Mega bem aqui vamos supor que a largura seja 400 ele já faz o cálculo aqui e por 83 a resolução aqui ó tá 11 encaixa na verdade a também não adianta o aumentar resolução Porque sem aumentar resolução não vai tornar a imagem melhor tá aí a resolução que ela vem é daqui para baixo nunca aumente que você não se vai ter um arquivo maior sem necessidade vamos redimensionar tá vendo ó tá só olha o tamanho então tamanho bom para botar no site até grande diminuir um pouquinho mais mas enfim largura 400 vou fazer o seguinte aqui ó vou arquivo exportar aí ele já vai exportar como png eu vou gerar aqui ó o nome do arquivo ele é 400 né foi 400 de largura foi 400 não vou gerar aqui o Etec 400/400 ponto. png no próximo passo provavelmente vai me perguntar se eu quero manter transparência deixa eu ver exportar ó aqui ó ele nem perguntou Photoshop pergunta você quer manter a transparência ou não é provavelmente isso aqui salvar cor de fundo preto.