Introdução ao desempenho de imagens na web | Chris Dixon | Skillshare
Pesquisar

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Introdução ao desempenho de imagens na web

teacher avatar Chris Dixon, Web Developer & Online Teacher

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Boas-vindas ao curso!

      2:18

    • 2.

      Compartilhe seu trabalho em Skillshare!

      1:09

    • 3.

      Faça o download dos arquivos iniciais

      1:24

    • 4.

      Usando imagens com tamanho errado

      6:58

    • 5.

      Deixando o navegador decidir

      7:33

    • 6.

      Introdução à densidade de pixel

      6:29

    • 7.

      O elemento de imagem

      10:54

    • 8.

      Direção de arte

      4:26

    • 9.

      Tipos de imagem e compressão

      10:00

    • 10.

      Ferramentas de conversão e imagens de reserva

      6:22

    • 11.

      Usando um CDN

      9:37

    • 12.

      Carregamento preguiçoso

      9:03

    • 13.

      Projeto do curso

      1:27

    • 14.

      Siga-me na Skillshare!

      0:23

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

163

Estudantes

1

Projetos

Sobre este curso

Muitos de nós visitam sites em um pequeno dispositivo, como telefone ou tablet, mas você realmente quer esperar em uma imagem que baixe que foi destinada a um monitor grande?

Claro, não temos! Então, aqui está o problema…


Imagens de sites menores baixam mais rapidamente em dispositivos móveis e menores, mas ao escalar para o ecrã grande, elas podem parecer realmente esticadas e pixeladas.


E se começarmos com uma grande imagem, pode demorar muito para baixar, causando uma experiência de usuário ruim

Então, como adicionamos imagens de forma eficiente aos nossos sites para atender a todos os tamanhos de tela e dispositivos?

Neste curso, vamos descobrir algumas técnicas para ajudar você a carregar imagens de forma mais eficiente, com base no dispositivo do usuário, tamanho de tela, resolução, velocidade de conexão e muito mais.

Este curso é amigável para iniciantes, embora suponha que você tenha experiência básica em HTML.

Conheça seu professor

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a Web Developer from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others. 

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and I have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like wh... Visualizar o perfil completo

Habilidades relacionadas

Desenvolvimento Desenvolvimento web
Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Boas-vindas ao curso!: Quando ele estava agora navegando na Internet em um dispositivo, assim como este, o que você realmente quer pesar em uma grande imagem para ser baixado, que foi destinado a ser usado em um monitor grande. Claro, para esses, e aqui está o problema. Usando um site imagens menores significará que isso irá baixar muito mais rápido em um menor dispositivos de tamanho móvel. Ao aumentar a escala para a tela grande, ele pode parecer realmente esticado e pixelado. Se seguirmos o caminho oposto e começarmos com uma imagem grande, pode parecer bom em um monitor grande, mas pode demorar muito tempo para baixar em um dispositivo móvel, principalmente má experiência do usuário. Então, como adicionamos imagens de forma eficiente enquanto o site se adapta a todos os tamanhos de tela e dispositivos? Poderíamos tentar usar uma imagem que tenha algum tipo de meio termo no tamanho. Mas isso está se tornando muito mais difícil em telas, novamente maior, e também tem uma resolução mais alta também. Outra maneira de fazer isso é aproveitando os elementos de pitch HTML. Com a imagem, podemos ter vários tamanhos da mesma imagem, e o navegador irá carregar o correto com base no tamanho do dispositivo. Então vamos dar uma olhada nisso e várias outras técnicas. Também queremos ter certeza de que podemos carregar imagens diferentes com base na orientação do dispositivo, no tipo de formatos de imagem que o navegador suporta, e muito mais. Também vamos cobrir muito mais coisas úteis são solicitadas direção, diferentes tipos de imagem e como podemos convertê-los usando compressão nos diferentes métodos de compressão, usando imagens de fallback, redes de entrega de conteúdo, carregamento preguiçoso, e muito mais. Se você criar qualquer tipo de sites ou aplicativos HTML, então este curso é ideal para você. Você não precisa de muita experiência para fazer este curso. Ele é projetado para ser amigável para iniciantes. Embora alguma experiência HTML será benéfico desde que eu vou supor que você sabe como configurar uma página HTML básica. Espero que esteja interessado e animado para fazer este curso. Agora vamos pular para a primeira lição em que vamos descobrir as imagens de tamanho da festa guia efeito e metade sobre a experiência do usuário. 2. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para terminar outra palestra. Reserve um tempo para processar cada lição, revisar o código que você escreve e pensar em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder muito e se desviar da aula e pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu fora da aula. Lembre-se também de compartilhar seu projeto aqui no Skillshare e só vou dar uma olhada, mas também inspirará outros estudantes. Para obter mais informações sobre o projeto da turma, acesse a guia Projeto e Recursos, onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos de classe. Com isso em mente, espero ver o que você cria e carrega aqui no Skillshare. 3. Faça o download dos arquivos iniciais: Antes de entrarmos em nossa primeira lição, fornecido com este curso há alguns Arquivos Iniciais que você pode baixar e trabalhar à medida que avançamos neste curso. Cada uma das lições tem uma pasta correspondente, e dentro temos alguns Arquivos básicos de Iniciação, por exemplo, este tem uma página HTML básica, e também algumas imagens para que possamos pular direto para aprender sobre nossos tópicos. Para baixar isso para o curso, o que você precisa fazer é ir para github.com, e depois para o meu perfil que é chrisdixon161. Em seguida, o repositório é os arquivos iniciais do elemento de imagem. Uma vez que você está dentro do repositório, tudo que você precisa fazer é clicar neste botão “Código” e, em seguida, baixar este arquivo zip. Para fácil acesso, Eu coloquei o meu na área de trabalho apenas aqui, mas você pode colocá-lo em qualquer lugar que você preferir. Para trabalhar neste curso, usarei o editor de texto, que é o Visual Studio Code. Se você não tiver um, você pode baixá-lo através do seu sistema operacional aqui. É gratuito para download e uso gratuito para Mac, Windows e Linux. Depois de ter tudo isso configurado e instalado, tudo o que você precisa fazer é arrastar os Arquivos de Início para o Visual Studio Code. Vejo-te no próximo vídeo, onde vamos começar a trabalhar na nossa primeira lição. 4. Usando imagens com tamanho errado: Em vez de aceitar minha palavra, vamos agora dar uma olhada em alguns exemplos de como imagens de tamanho ruim podem realmente afetar seu projeto. Para isso, vá para o projeto inicial e nos arquivos, vá para a lição número 1. Dentro de nosso código do Visual Studio ou seu editor de texto vá para a primeira pasta do projeto, agora vou clicar com o botão direito do mouse na página Índice, Copiar caminho e Colar isso dentro do navegador. Você também pode clicar duas vezes na página Índice dentro da pasta do projeto para, isso será aberto dentro do seu navegador padrão. Para isso eu vou estar usando o Google Chrome, mas você pode usar Firefox, Safari ou qualquer navegador importante que você preferir. Para começar, vamos dar uma olhada nos tamanhos de arquivos de algumas imagens fornecidas e também ver o efeito que isso tem na velocidade de download. Vamos abrir a página Índice e, ao lado disso, temos uma pasta Imagens que tem a mesma imagem, mas em três tamanhos diferentes, temos o maior, que tem 5.311 pixels de largura e também podemos ver o tamanho abaixo em o fundo. Temos uma versão de 640 pixels de largura, e também uma pequena que é 320 pixels. Para a página de índice, tudo o que vamos fazer para isso é configurar três elementos de imagem separados, vinculá-los a todas essas três imagens. Vamos saltar para a pasta de imagens e a primeira, que é a mais pequena, e como este é um exemplo, vou deixar estes textos antigos como vazios. Duplicar isso mais duas vezes e a próxima é a versão 640 e teremos a maior, que é 5.311, salve isso e agora se atualizarmos, veremos todas as três imagens como esperado, e também como uma nota lateral, todas as imagens fornecidas para este curso foram baixadas do unsplash.com, então se você quiser alterá-las ou baixar as suas, este é um bom recurso para procurar. Clique com o botão direito do mouse e abra as ferramentas de desenvolvedor com Inspect. Todos os navegadores também têm o Developer Tools também, e eles estão geralmente disponíveis com o botão direito do mouse e o elemento Inspecionar ou Inspecionar. Aqui adicione na guia Rede e, em seguida, podemos atualizar o navegador para baixar todas essas três imagens. Se você fizer isso um pouco mais largo podemos ver o tamanho de cada uma dessas imagens. Como esperado, ele vai do menor para o maior e também provavelmente como esperado, podemos ver que a menor imagem é 27 milissegundos, vemos 29 para a do meio, depois 37 milissegundos para a maior. Vamos atualizar e tentar isso novamente. Isso é um pouco diferente cada vez que atualizamos a página, mas geralmente podemos ver que a imagem pequena será baixada em cerca de dois terços do tempo da imagem grande. Isso pode fazer uma diferença real se você tiver muitas imagens em nosso site, juntamente com o tempo de download, a qualidade da imagem também é uma grande consideração para, por isso é melhor podemos ter certeza de que todas as três de nossas imagens, eles têm o mesmo espaço disponível. Podemos fazer isso na seção de cabeça e, em seguida, ele irá adicionar alguns estilos e apenas ir para o elemento de imagem e, em seguida, selecionar a largura, em seguida, este dois-100 por cento. Agora, se voltarmos para o navegador e atualizarmos, todas as três imagens serão agora esticadas para 100 por cento da largura disponível. Podemos ver se olharmos para a imagem superior, vemos uma perda de qualidade, vez que esta foi esticada um pouco maior. No meio, a qualidade foi melhorada, na qualidade na terceira ou na maior imagem é muito melhor do que as duas anteriores. Também vemos nesta atualização particular que o tempo de download é muito mais lento para a imagem grande, isso também reforça o que dissemos no vídeo de introdução. As imagens grandes levam mais tempo para serem baixadas, o que pode causar uma experiência ruim do usuário e também potencialmente perder usuários de todos os sites. Há também muitas pesquisas e estatísticas lá fora que dizem que usa taxa de conversão diminui drasticamente cada segundo uma página leva a carga e também a taxa abundante sobe significativamente enquanto espera por muito tempo. Eu não vou lançar nenhuma estatística lá fora, já que muitas pesquisas mostram resultados diferentes, mas tenho certeza que todos nós já estivemos lá no passado. Quando uma página leva muito tempo para carregar, dentro dessas paciência e nossa atenção passa para outra coisa. Por outro lado, imagens que são muito pequenas, perderão uma quantidade significativa de qualidade à medida que aumentam a escala. Assim como podemos ver aqui com a primeira imagem, então, ao usar imagens em seu site, não basta baixar uma que parece ótima e, em seguida, simplesmente adicioná-la ao seu projeto, pense no tamanho da imagem primeiro. Nos últimos anos, a gama de tamanhos de dispositivo usa uma visualização de nossos sites em, ele está apenas ficando maior e aqui está apenas uma pequena amostra de tamanhos de tela que temos que permitir. Como você pode ver, temos uma enorme gama e alguns até mais de 7.000 pixels de largura, mesmo que algumas das maiores telas e mais comuns. Isso ainda pode deixar nossa escolha de tamanho de imagem realmente difícil. Ao tomar essas decisões, porém, também precisamos não apenas pensar sobre o tamanho dos dispositivos, mas também sobre como nosso site será colocado. Isso pode ter um grande impacto em nossas escolhas. Você pode estar tentado a pensar, “Ok, eu talvez devesse apenas apontar para o meio e ir para talvez 3.000 pixels de largura.” Fazer isso, porém, não significa que precisamos fazer todas as imagens tão amplas. Por exemplo, você pode planejar ter pré-imagens na mesma linha, assim como esta, e esta é uma situação comum para um site ou até mesmo uma exibição de galeria com várias linhas de imagens. De qualquer forma, o ponto é que agora nós subitamente dividimos a largura. Agora precisamos de nossas imagens em três, ainda menos se levarmos em conta o espaço em torno de cada uma dessas imagens. Agora estamos falando de nossas imagens que só precisam ter cerca de 800 pixels de largura, o que resultará em uma grande economia no tempo de download. O mesmo vale para duas imagens de largura, quatro imagens e assim por diante. Todas essas economias podem realmente somar se planejarmos o tamanho das imagens que precisamos primeiro, em vez de apenas downloads no primeiro tamanho de imagem que está disponível, jogado em nosso projeto, e esquecer isso. Às vezes, porém, é inevitável que precisemos usar uma imagem de largura total, como uma imagem de cabeçalho ou um carrossel de imagem e isso novamente nos retorna ao problema de sacrificar a qualidade da imagem ou a velocidade de download. Bem, felizmente, há uma maneira de começarmos a contornar isso, então não temos que nos comprometer e vamos dar uma olhada em como fazer isso no próximo vídeo. 5. Deixando o navegador decidir: Para ajudar a escolher a imagem de tamanho correto para o dispositivo ou navegador, o elemento de imagem tem um atributo embutido realmente útil chamado srcet. Srcet nos permitirá listar várias imagens que você deseja potencialmente usar, e vamos deixar o navegador decidir qual delas é a melhor. Dentro de nossa pasta Lição Dois, que é Deixando o Navegador Decidir, temos dois itens e um é a página de índice, que vamos usar. Podemos copiar o caminho. Isto está muito vazio. Nós vamos adicionar o conteúdo em apenas um momento, em seguida, colar isso dentro do navegador. Dentro da pasta de imagens temos seis versões da mesma imagem. Temos uma versão que tem 320 pixels de largura, temos 640, temos 1.500, e também algumas imagens com 1X, 2X e 4X também, que vamos dar uma olhada no que estes são muito em breve. Assim como fizemos anteriormente, dentro da seção do corpo vamos configurar um elemento de imagem HTML regular. Isso quer ir para a pasta de imagens e selecionar a imagem de estrada, que tem 320 pixels de largura. Salve e atualize. Como esperado, vemos esta pequena imagem carregada. Então isso é geralmente o que fazemos para carregar uma imagem dentro de um site. Mas ao invés de ficar preso com esta única imagem, podemos usar o que é chamado de atributo srcet. Ele fornece algumas imagens alternativas dependendo do tamanho do navegador. Para fazer isso, voltamos aos nossos elementos de imagem. Vamos apenas remover isso para este exemplo, e eu vou adicionar dentro aqui o atributo srcet. Este atributo nos permitirá adicionar várias imagens dentro de nossos elementos de imagem, que o navegador pode decidir qual delas é mais apropriada para o tamanho atual do navegador. O primeiro, novamente dentro da pasta de imagens, vamos para a estrada, traço, 640, e depois separados por uma vírgula, podemos adicionar várias imagens. Também temos uma imagem com 1.500 pixels de largura. Então estrada, traço, 1.500, ponto JPEG. O que está acontecendo aqui é que estamos usando os atributos de origem originais se o atributo de conjunto de origem não for suportado no navegador Chrome. Então esta é basicamente uma imagem de fallback. Se não podemos selecionar qualquer um destes, srcet é, de fato, muito bem suportado em todos os principais navegadores. Se você vai para caniuse.com e faz uma pesquisa por srcet, podemos ver que srcet é amplamente suportado em todos esses principais navegadores. O único problema é o Internet Explorer mais antigo. Mas isso foi substituído pelo navegador Edge mais recente, que tem suporte total. Então isso significa que srcet é muito bem suportado e estamos seguros para usá-lo em nossos projetos. Lá se vai o nosso projeto. Vamos tentar isto. Refresque. Vemos a estrada, traço, imagem 640, e se reduzirmos isto, ainda vemos o 640. Vamos fazer isso maior. Se conseguirmos isso acima de 1.500 pixels, que era o tamanho da imagem maior, ainda podemos ver dentro das ferramentas do desenvolvedor que ainda estamos baixando a versão de 640 pixels. Portanto, o navegador não está selecionando a imagem alternativa. Isso ocorre porque para o navegador descobrir qual deles vai escolher, nós também precisamos dizer a ele a largura da imagem. Ele não detecta automaticamente que este é 640 e este é 1.500, mas após o caminho do arquivo para a imagem, apenas fazer é adicionar à largura com a imagem em pixels, com um W logo depois. Isso tem 640 pixels de largura, isso tem 1.500 pixels de largura, e vamos tentar isso. Voltando para o navegador, eu vou reduzir isso para um tamanho pequeno, atualizar. Vemos a versão 640 pixels. Vamos fazer isso maior. Vemos em algum momento a versão de 1.500 pixels foi carregada. Vamos tentar de novo. 640. Quero ver o tamanho aqui. Então 300 pixels, ou, mina muda para a imagem grande em torno de 500 pixels. Como sabemos, está escolhendo isso com base na janela de visualização do navegador, que é a área visível do navegador. Também está escolhendo sob a suposição de que queremos que essas imagens sejam a largura total da viewport. No entanto, este nem sempre é o caso. Então, para controlar isso, podemos configurar o atributo de tamanhos após o nosso srcet. Vamos adicionar isso. Se deixarmos de fora este atributo de tamanhos, assume-se que queremos que as imagens sejam a largura total da viewport ou do navegador, ou no seu mais básico, podemos adicionar um tamanho para aplicar a todas as imagens. Por exemplo, se quisermos que todas as imagens tenham apenas 50 por cento da largura disponível, assim como no CSS, poderíamos adicionar a 50vw, definir isso para ser metade da largura da janela de exibição. Salve isso. Mesmo que nossa versão de 640 pixels tenha sido carregada, isso ocupou apenas 50% da largura do navegador. Se formos para a versão maior, o mesmo ainda se aplicará. Com telas pequenas, é comum ver imagens e conteúdo usando toda a largura disponível, assim como vemos à esquerda, e então talvez ele só ocupe 50% da largura em um tamanho de tela maior. Então, como você faria isso com o atributo de tamanhos? Fazemos isso combinando esses atributos de tamanho com consultas de mídia para personalizar as imagens para o tamanho do dispositivo. Usando nosso exemplo, uma vez que temos duas imagens diferentes para escolher, vamos adicionar dois valores diferentes separados por uma vírgula. Assim como no CSS normal, vou adicionar uma consulta de mídia e configurar a largura máxima para ser igual a 600 pixels. Então, abaixo de 600 pixels, queremos definir nossas imagens para 100 por cento da largura da janela de exibição. Caso contrário, deseja que estes sejam 50% ou metade da largura disponível. Portanto, esta é uma ótima maneira de controlar o tamanho das imagens com diferentes tamanhos de tela. Vamos tentar isto. Primeiro de tudo, precisamos ir até o tamanho menor e atualizar. Vemos a estrada, traço, 640 está sendo carregado como esperado, e que isso é 100% da largura da janela de visualização. Uma vez que configuramos isso em até 600 pixels se continuarmos, há nossa imagem grande agora baixada, e se tomarmos isso um pouco acima de 600 pixels, por causa do segundo valor, isso agora cai para 50vw. Algo que você deve ter notado está dentro do meu navegador. Ele está pulando para a imagem grande em cerca de 500 pixels. Você pode ter um valor diferente e veremos o porquê muito em breve. Mas você pode pensar que 500 pixels é um pouco pequeno demais para estar pulando para a imagem grande, considerando que não é nem mesmo maior do que a nossa primeira imagem. Certamente a versão 640 será mais adequada. Bem, esta é uma pergunta muito válida e algo que vamos responder a seguir. 6. Introdução à densidade de pixel: Este vídeo entra na lição 3 dos arquivos iniciais, abra a página de índice e também certifique-se de que temos o correto aberto dentro do navegador também. No último vídeo, discutimos anteriormente que as imagens podem não estar mudando nos momentos em que esperamos. Analisamos se reduzirmos o navegador para o menor tamanho dentro das ferramentas de desenvolvimento, vemos a imagem menor é carregada. Aumentando isso, vemos em torno da marca de 500 pixels que a imagem maior foi baixada. Você pode pensar que este salto para a imagem maior é um pouco cedo demais , já que ainda está abaixo da imagem de 640 pixels de largura. Bem, a razão pela qual isso acontece é porque não é apenas sobre a largura da imagem, é também sobre a densidade de pixels da tela também. Aqui eu estou usando uma tela de retina para que possamos apertar em mais pixels por polegada do que um dispositivo não retina. Isso resulta em uma imagem de qualidade mais nítida e nítida. Como é que isto tudo funciona? Bem, imagine que tínhamos uma tela com uma resolução de 1920 por 1080, 1920 sendo a largura da tela em pixels. Digamos que criamos um espaço de 300 por 300 pixels onde queríamos colocar uma imagem dentro. Muitos anos atrás, isso era simples. Criamos uma imagem que tinha 300 pixels de largura, 300 pixels de altura, e funcionou muito bem. Agora, embora com as demandas de maior qualidade, muitas telas são capazes de espremer mais pixels em um espaço, comumente chamado de pixels por polegada ou densidade de pixels. Isso significa que se você tiver uma tela 2x, você apertará duas vezes mais pixels no mesmo espaço. que significa que podemos usar uma imagem com o dobro do tamanho, no nosso caso , 600 por 600 pixels, e encaixaria no mesmo espaço disponível na tela. É por isso que a retina em dispositivos de maior densidade de pixels parece muito mais nítida. As telas também podem ir ainda mais alto, como 3 ou 4x. Tenho certeza que muito mais alto no futuro próximo também. Para ver um exemplo do mundo real, aqui à esquerda, a tela do meu laptop tem uma resolução de 3.072 pixels de largura por 1920 de altura. Você pode pensar que ele poderia acomodar imagens de até 3.072 pixels de largura. Na pasta Imagens, também temos essa mesma imagem de estrada chamada 1x, 2x, e também 4x também. A imagem 1x tem 640 pixels de largura, e isso não se destina a telas de retina. Isto destina-se a ser usado em monitores regulares que têm uma densidade de pixels regular, 2x, isto é duas vezes o tamanho e tem uma largura de 1280. Então 4x tem 2.560 pixels de largura. Vamos dar uma chance a isso. Se comentarmos essas imagens aqui. Bem, isso cria uma nova imagem elementos, e vamos configurar isso para exibir nossa imagem 1x. O que queremos fazer aqui é copiar e colar esta imagem em mais duas vezes. Salve isso e depois no navegador e feche as ferramentas do desenvolvedor. Se esticarmos o navegador para ser praticamente toda a largura da tela, podemos ver que só temos a largura para duas dessas imagens. Lembre-se que cada uma dessas imagens é a versão 1x, que tem 640 pixels de largura. Nós só temos a largura aqui para cerca de 1500 pixels, embora tenhamos visto que a resolução da tela tinha mais de 3.000 pixels de largura. Isso é porque acabei de mencionar que estou usando uma tela de retina. Uma tela de retina não significa que temos mais espaço para brincar. Isso só significa que podemos fornecer uma imagem de maior qualidade, e as imagens serão então espremidas no mesmo espaço disponível. Se pensarmos bem, isso faz todo o sentido. Queremos que o tamanho físico da imagem ocupe a mesma quantidade de espaço em cada tela. Ao criar um site, uma imagem que eu projetei para ser metade da largura da tela, ainda será metade da largura de uma tela regular ou retina. A única diferença é que uma tela retina pode usar uma imagem maior para encaixar no mesmo espaço disponível, resultando em uma imagem de maior qualidade. Também podemos usar esse conhecimento com os atributos do conjunto de origem. Para isso, precisamos apenas de um de nossos exemplos de imagem, então vamos mover dois desses. Isso também será contado como a versão 1x original para telas não retina. Depois disso, coloque no srcset e, em seguida, usando uma fonte, também podemos fornecer um 2x, e também um link para a nossa imagem 4x também. A diferença para o vídeo anterior, embora adicionamos o tamanho seguido pelo w. desta vez, o srcset também pode aceitar uma densidade de pixels. Para isso, estamos adicionando 2x e, em seguida, para a imagem grande, adicionamos 4x. Pouco antes de verificar isso, também podemos especificar o tamanho que queremos que a imagem exiba. Isso significa que independentemente da tela, queremos mostrar uma imagem de 640 pixels de largura. Isto é o que é chamado de pixels CSS. Então, se o navegador decidir que quer usar um maior, como o 2x ou o 4x, ele será então espremido no mesmo espaço. Vamos dar isso um salvamento e mais para o navegador, para as ferramentas do desenvolvedor, atualizar, para a rede. Agora, mesmo que tenhamos definido a imagem para 640 pixels de largura, o navegador detectou agora que meu monitor é uma tela de retina e escolheu aplicar a imagem 2x, que é 1280 de largura, e esta imagem é então espremida na mesma espaço disponível. Usar esses atributos de imagem extra é uma boa maneira de alternar entre tamanhos de imagem, dependendo da tela ou da densidade de pixels. Muitas vezes, não precisamos fazer nada mais complexo do que isso. Também estamos colocando muita confiança no navegador, ou seja, se quiséssemos mais controle manual ou opções ainda mais flexíveis. Em seguida, vamos dar uma olhada em como fazer isso com o elemento pitch. 7. O elemento de imagem: Esses atributos de imagem extras que analisamos são realmente úteis para selecionar o tipo correto de imagem com base na largura do navegador e também na densidade de pixels. Se isso é tudo o que precisamos, então tudo bem. No entanto, se quisermos um controle mais fino, podemos fazer uso do que é chamado de elemento de imagem. Bem, esta lição cabeça para o número 4 que é o elemento da imagem e, em seguida, abra a página index.html. Dentro do navegador, esta é apenas uma página HTML vazia e temos algumas imagens como sempre nesta lição que serão realmente úteis para verificar o que os elementos da imagem têm para oferecer. O elemento de imagem fornece mais flexibilidade, se necessário, dando-nos acesso a todo o poder das consultas de mídia para selecionar nossa imagem. Esta é a maneira manual de dizer ao navegador qual imagem deve usada em vez de deixar seu navegador decidir como fizemos em vídeos anteriores. O elemento de imagem é simplesmente um invólucro para várias imagens como esta. Dentro do corpo, criamos a imagem, abertura e fechamento tag. Este elemento não fornece nenhuma imagem por conta própria, em vez disso, precisamos colocar em algum conteúdo dentro deste elemento. Também assim como a fonte em que você olhou em vídeos anteriores, o elemento de imagem também é bem suportado. Temos suporte total em todos os principais navegadores e, como na maioria das coisas, temos um problema com o Internet Explorer, bom com os sistemas Microsoft. Isso foi substituído pelo navegador Edge, então não devemos ter muitos problemas com este elemento. Voltar para o editor de texto e dentro do elemento de imagem e eu vou adicionar nossa primeira imagem. Devo ir para a pasta de imagens e o lago que é 640 pixels wide.jpeg. Como seria de esperar, se salvarmos e atualizarmos isso, vemos agora que esta imagem foi carregada dentro do navegador. Com esta configuração, não estamos mais abaixo da linha do que estaríamos simplesmente usando um elemento de imagem regular. Mas o que podemos fazer ao usar esses elementos de imagem é também fornecer imagens alternativas dentro de um ou mais elementos de origem. Os elementos de origem têm apenas uma tag de abertura. Como adicionamos os dados como atributos, eles são usados para fornecer recursos de mídia não apenas para esses elementos de imagem, mas você também pode ver esse atributo de origem usado com o wrapper de áudio ou vídeo também. Ao usá-lo dentro dos elementos da imagem, assim como estamos, os atributos fonte serão ignorados. A razão para isso é que o atributo fonte não é necessário porque já temos uma imagem de fallback logo abaixo, mas o que podemos adicionar é o conjunto de fontes. Isto novamente, leva as imagens que queremos usar, seguido do tamanho. Primeiro adicionamos o caminho do arquivo para que o nosso esteja na pasta Imagens. Vamos para o sun-640.jpeg. O tamanho da imagem 640w. Em seguida, separados por uma vírgula, nossa segunda imagem que vamos permitir para a seleção é a versão maior do sol que é sun-1,280.jpeg. Então nós especificamos que esta imagem tem 1.280 pixels de largura e eu adicionei as duas imagens de sol dentro daqui que são diferentes da imagem de fallback apenas para que possamos ver claramente o que está acontecendo dentro do navegador. Assim como no vídeo anterior, também podemos usar a densidade de pixels em vez dessa largura. Aqui podemos adicionar 2x e 4x, por exemplo, então escolha qual opção melhor se adequa a você. Vamos salvar isso e abrir isso no navegador, atualizar. Vamos ver se reduzimos o navegador para o tamanho menor, mas o sun-640 vai inchá-lo. Nós não vemos o lago porque esta é apenas a imagem de fallback se a fonte não for suportada. Vamos fazer isso um pouco maior. Eu continuo e, em seguida, uma vez que atingimos pouco menos de 500 pixels, vemos a versão maior foi carregada. Agora isso nos deixa em uma posição bastante semelhante à que tivemos nos vídeos anteriores, onde tínhamos um elemento de imagem regular e, em seguida, adicionamos o conjunto de fontes. Mas a diferença aqui é que também podemos introduzir consultas de mídia. Isso significa que, em vez de deixar o navegador decidir qual imagem exibir, podemos servir algumas condições mais rigorosas nossas. Podemos usar qualquer media query que queremos assim como poderíamos fazer com CSS regular. Um comum é exibir apenas uma imagem se a viewport for uma largura mínima ou máxima. Nós adicionamos os atributos de mídia e, em seguida, configurar nossa consulta de mídia entre os colchetes. Este tinha a largura mínima igual a 640 pixels e vamos excluir nossa imagem maior. O que isso nos deixa com é um atributo fonte, que só vai exibir essa imagem quando o navegador for maior que 640 pixels. Se o navegador estiver abaixo de 640 pixels e essa condição de consulta de mídia não for atendida, a imagem de fallback será usada. Vamos verificar isso. Reduza isso para o menor tamanho e atualize. Nós vemos o lago que é a imagem de fallback e agora vamos esticar isso para ser 640 pixels ou acima. Isso agora mudará para a imagem do sol. Outra coisa útil que esta media query faz para nós é que também nos permite ajustar exatamente quando queremos que nossas imagens sejam alternadas. Mais cedo, quando o navegador estava decidindo, ele mudou minha imagem em pouco abaixo da marca de 500 pixels. Digamos apenas que pensamos que isso era muito cedo, queríamos mudar isso para 600 pixels, bem, esses atributos de mídia nos permitirão ajustar isso para qualquer tamanho que quisermos. Para fazer isso, vamos duplicar nossa fonte, podemos reintroduzir nossa imagem grande que era 1.280. Nós também precisamos fazer é definir a largura um aqui e desta vez, para a imagem menor, vamos definir a largura máxima para 599 pixels e, em seguida, queremos que o maior entre em vigor em 600 pixels. Você poderia até fazer isso mais alto se você quisesse, mas esta consulta de mídia agora nos dará controle total de exatamente quando mudarmos para nossa imagem grande. Vamos tentar isto. Se descermos para o tamanho menor, vemos o sol em 640, e então ele leva até 600 pixels e nossa imagem agora será substituída pela versão maior, bem como a largura mínima ou máxima que estamos usando aqui, qualquer consulta de mídia válida pode ser usada. Mesmo que tenhamos apenas uma única fonte de imagem para cada consulta de mídia, ainda podemos usar várias fontes que ainda se enquadram em uma única consulta de mídia. Um exemplo pode ser ao verificar a orientação do dispositivo. Isso é mais para dispositivos móveis e podemos verificar se o dispositivo é girado paisagem ou retrato. Para ver isso em ação, podemos alterar a largura máxima através da orientação, e esta será uma paisagem. Podemos então mudar o segundo para a orientação do retrato e agora vamos definir nossas imagens para se adequar a cada um. Como a paisagem é mais ampla, vamos para nossas duas imagens amplas, que são 1.280 e 2.400. Altere a fonte da imagem e também a largura. Vamos copiar isto, separado por vírgula o segundo que é de 2.400. Em seguida, a visualização retrato para que as imagens sejam mais estreitas e para isso temos uma versão 320 e 640. A primeira fonte de 320, em seguida, separados por uma vírgula, podemos adicionar na versão 640 pixels de largura. Agora, se testarmos isso no modo retrato, nossas duas imagens menores devem ser exibidas agora. Quando mudamos isso para paisagem, devemos então exibir nossas duas imagens grandes. Para simular isso, podemos ir para as ferramentas do desenvolvedor, e então se clicarmos na barra de ferramentas do dispositivo Alternar, isso nos permitirá selecionar entre uma visualização do desktop e um dispositivo móvel. Vamos para o iPhone 6, e se atualizarmos, vemos que esta pequena imagem de 640 pixels foi carregada. Este ícone apenas aqui irá alternar a orientação para paisagem, atualizar, e agora ele escolheu uma das imagens grandes para a visualização paisagem. Lembre-se que você pode adicionar quantos desses elementos de origem quiser, para ter certeza de que temos a melhor imagem para cada situação. Finalmente, também podemos fazer uso desses atributos de tamanho, assim como fizemos nos vídeos anteriores. Lembre-se de que se nenhum atributo de tamanhos for adicionado, ele assumiu que você deseja que todas essas imagens sejam a largura total para a janela de exibição. Por exemplo, ao usar uma orientação de paisagem, podemos querer restringir algumas das imagens maiores a apenas 50% da largura da tela. Embora assim como antes, defina os tamanhos. Isso é combinado com uma consulta de mídia onde vamos definir a largura máxima de 1.280 pixels. De zero a 1.280, queremos que as imagens tenham a largura total do dispositivo com 100vw e, em seguida, apenas 50% de largura nas telas maiores. Assim e vamos testar isso. Se esticarmos ainda mais o navegador, não veremos nenhuma diferença, já que o iPhone tem um tamanho fixo. Se selecionarmos algo maior, como um iPad Pro, quando selecionarmos isso pela primeira vez na exibição de retrato, a imagem terá a largura total da tela. Isso ocorre porque ele cai abaixo da largura máxima de 1.280 pixels, onde definimos a largura para ser 100 por cento. Alternativamente, se mudarmos isso para paisagem, ele agora deve mudar a imagem para baixo para 50 por cento. Vamos tentar isso, e tudo isso está funcionando como esperado. A chave takeaway é se você quiser que o navegador decida qual imagem selecionar, use a imagem combinada com o conjunto de fontes ou simplesmente assim se você quiser um controle muito mais flexível, o elemento de imagem é uma ótima opção. Outro grande uso para o elemento de imagem é também mudar a direção da arte das imagens e vamos cobrir como fazer isso no próximo vídeo. 8. Direção de arte: Os exemplos que analisámos até agora concentram-se principalmente na densidade de pixels e também na resolução. No entanto, embora o elemento pitch também tenha outro grande caso de uso, e isso é para ajustar a imagem, com base no que é chamado de direção da arte. Para isso, vamos para os nossos arquivos iniciais e para a lição Número Cinco. A partir daqui, a pasta Direção de arte, abra a página de índice, e vamos abrir isso, dentro do navegador, copiaremos o caminho do arquivo para isso, e então substituiremos o do último vídeo. Eu também vou apenas clicar na barra de ferramentas do dispositivo de alternância para restabelecer isso de volta para a exibição completa da área de trabalho. Todas as nossas imagens até agora têm tamanhos diferentes, e é ótimo ter uma versão menor e maior da mesma imagem, mas às vezes certas imagens podem não se adequar a um determinado tamanho de tela. Na pasta Imagens, dentro da lição cinco, primeiro, vamos dar uma olhada na versão paisagem. Aqui, vemos alguém pulando com um fundo amplo de paisagem, e isso ficará bem em um monitor grande, na minha opinião, onde você pode ver todos os detalhes de fundo. Podemos ver o sol, podemos ver as montanhas, podemos ver o chão, mas imagine isso em um pequeno dispositivo, como um telefone, vez que a pessoa saltando ocupa apenas uma pequena porcentagem da largura total da imagem, é ponto focado desta pessoa pode parecer muito pequeno. Para o dispositivo móvel, em vez de fornecer uma versão reduzida desta imagem, pode ser melhor fornecer uma versão cortada deste ponto de foco, assim como vemos na versão retrato. Aqui, vemos uma versão vertical que se concentra nessa pessoa, e também vemos menos do plano de fundo. Ou seja, essa pessoa ocupa uma porcentagem maior da largura total. Portanto, ele parecerá maior em um dispositivo móvel. Vamos tentar isto. Na página de índice, dentro da seção do corpo, temos apenas um começo em branco aqui. Mais uma vez, para fazer uso disso, vamos usar o elemento de imagem. Então, dentro daqui, nós vamos fornecer dois elementos fonte, que vai apontar para ambas as imagens. Sabemos que podemos adicionar uma consulta de mídia como um atributo, em seguida, dentro dos colchetes, o primeiro vamos configurar a largura máxima ser 799 pixels. Então, para essa exibição menor, vamos definir a imagem com os atributos srcset, então isso vai apontar para a pasta Imagens. Então a imagem que precisamos, já que este é o dispositivo menor, vamos usar a versão retrato. Isso tem uma extensão JPEG de ponto. Agora, podemos duplicar isso. Este vai disparar quando a largura mínima for de 800 pixels e acima. Depois deste, já que temos mais espaço, vamos mudar para a vista da paisagem. Alternar entre nossas duas imagens como esta quando uma é um nível de zoom específico ou uma é uma versão cortada da imagem, isso é o que é referido como a direção da arte. Como não temos vários tamanhos dessas imagens, vamos configurar alguns CSS na parte superior. Vamos simplesmente restringir a imagem para uma largura máxima de 100 por cento, e isso impedirá que as imagens se estendam muito. Além disso, fazendo este elemento pitch, precisamos adicionar um espaço reservado de imagem que vai agir como um padrão, e também os locais do elemento colocar essas imagens dentro. A fonte, isto vai ser para o fallback, seria apenas colocar na versão paisagem. Dê isso um salvamento, e certifique-se de que no navegador, estamos dentro da pasta número cinco. Primeiro de tudo, vamos reduzir isso para a menor visão. Porque estamos na visão menor, que está abaixo de 799 pixels, vamos ver uma versão retratar que está focada nesta pessoa saltando. Vamos dimensionar isso para mais de 800 pixels. Lá vamos nós. Em seguida, mais de 800 pixels, vemos a versão paisagem completa com mais do cenário de fundo. Esta direção artística realmente nos dá algo para pensar, para tentar colocar o foco em uma única parte da imagem. Ou como neste caso em que estamos tentando não tornar a parte chave muito pequena. Em seguida, focaremos nossa atenção nos diferentes tipos de imagem disponíveis. 9. Tipos de imagem e compressão: Outra parte extremamente importante da otimização de nossas imagens para a web é considerar o formato da imagem. Há muitos formatos de imagem disponíveis, e tenho certeza que você encontrou alguns deles, como JPEG, PNG, GIF ou GIF dependendo de como você pronunciá-lo, e também SVG para citar alguns. Estes são todos comuns e ao baixar uma imagem online, usando nossos projetos, nem sempre temos opção de qual formato a imagem vai estar. Há maneiras de mudar isso, que veremos em breve. Mas antes de mudarmos os formatos de imagem, primeiro precisamos entender quais são as principais diferenças e por que devemos até mesmo mudar os formatos. Existem várias razões principais pelas quais o formato é importante. O grande é que diferentes formatos têm tamanhos de arquivo diferentes. A mesma imagem em um formato diferente poderia reduzir o tamanho do arquivo, reduzindo o tempo de download para o usuário final. Essa economia de tempo pode ser pequena ou enorme dependendo de alguns dos fatores que vamos dar uma olhada em apenas um momento. Junto com o tamanho do arquivo, a qualidade da imagem real também pode ser diferente com diferentes formatos também. Há considerações como se a imagem pudesse suportar transparência e também o número de cores de suporte. Além disso, precisamos pensar se precisamos escalar a imagem para cima ou para baixo. Como vimos em outros vídeos, aumentar a escala de imagens JPEG pode reduzir a qualidade da imagem. Mas outros tipos de arquivos, como SVG, não serão afetados. Isso acontece porque tanto este SVG quanto JPEG se enquadram em duas categorias diferentes. Uma imagem raster é como uma fotografia tradicional. É feito de pequenos pixels. Dependendo do tamanho da imagem, pode haver milhões de pixels, e cada um representa uma cor. Como há tantos pixels em uma fotografia, eles geralmente são indetectáveis pelo olho humano, a menos que escalemos as imagens, e isso é quando eles começam a perder a qualidade e ficam pixelados, já que a tela está tentando se encaixar na mesma quantidade de pixels em uma área maior. Formato de imagem como JPEG e PNG se enquadram nesta categoria. Outra categoria é os gráficos vetoriais. Estes são criados em programas de computador e são feitos com coisas como curvas, linhas e formas. Eles podem ser dimensionados ou reduzidos em tamanho sem perda de qualidade. Também podemos editar gráficos vetoriais existentes. Programas como Adobe Illustrator, Sketch, Inkscape e Figma podem criá-los e podem ser salvos em formato como SVG. Outra diferença com um SVG é que ele também é representado no código também. Um arquivo SVG contém um código, que podemos adicionar diretamente em um documento HTML. Ou seja, nem sempre precisamos vincular a um arquivo de imagem se preferirmos essa abordagem. As distinções claras entre estes dois grupos facilitam a decisão do que precisamos de utilizar. Se você precisa de fotografias de alta qualidade, como um site, que é um portfólio de fotografia, imagens raster como JPEG são ideais. Bem, para gráficos, logotipos e ícones, um vetor geralmente será uma escolha melhor, especialmente ao dimensionar a imagem. Mesmo que tenhamos a categoria raster como uma melhor escolha de coisas como fotografias, isso não significa que estamos presos com o tamanho original do arquivo. Podemos aplicar compressão em nossas imagens para reduzir o tamanho do arquivo, que os tornará mais rápidos para uso na web. compactação pode ser aplicada em grupos chamados lossy e lossless. Estes se relacionam com a forma como comprimimos ou otimizamos nossas imagens para tentar reduzir o tamanho do arquivo e, portanto, a velocidade de download. A compactação com perdas, como parece, pode resultar em perda da qualidade da imagem original. Mas como é mais regressivo, também pode levar a maiores reduções de tamanho de arquivo. Isso não significa que nossas imagens parecem puras. Na verdade, você pode nem notar uma perda de qualidade em tudo em muitas ocasiões, dependendo do nível de perda que definimos. Uma vez que a compressão foi aplicada, algo que é realmente importante é que não há volta para a imagem original, ela está completamente perdida para sempre. Lossless é praticamente o oposto, e a qualidade da imagem original é mantida. O algoritmo de compactação pode reduzir o tamanho do arquivo e também reduzir quaisquer metadados armazenados dentro da imagem. Os metadados incluem itens salvos automaticamente pela câmera, como a data e o tipo de câmera, o nome do fotógrafo e assim por diante. Como sem perdas está mantendo a qualidade da imagem original, é compreensível que a economia de arquivos possa ser menor do que as versões com perdas. Então, com tudo isso, qual é o melhor para usar? Bem, vamos dar uma olhada em alguns dos formatos de imagem mais comuns. JPEG é uma ótima opção para exibição em fotografias de alta qualidade ou até mesmo obras de arte. No entanto, não é ótimo para exibir coisas como texto, especialmente se precisar ser ampliado. JPEG é um formato de imagem comum, portanto, não deve haver problemas com essa falta de suporte. É um formato de compactação com perdas, então também podemos salvar muito do tamanho do arquivo de imagem. Se estamos felizes com uma pequena perda de qualidade, poderíamos até ir mais longe com a compressão se quiséssemos uma versão menor, talvez como um anexo de e-mail ou apenas algo em seu site que não exija uma quantidade enorme de detalhes. PNG também é um formato de imagem web muito popular. Um dos benefícios é que ele também suporta transparências, o que é algo que um JPEG não suporta. Um JPEG deve ter uma cor de fundo sólida. Por exemplo, se você estiver usando ele em um cabeçalho de site, você precisa se certificar de que a cor de fundo da imagem corresponde à cor de fundo do cabeçalho. Se você precisa usar uma imagem ou um gráfico em um fundo transparente, um PNG é o caminho a seguir. Um PNG também tem compactação sem perdas, portanto, o arquivo original é mantido e também pode ser restaurado. No entanto, isso também pode significar uma redução menor do tamanho do arquivo. Às vezes, você encontrará imagens simples, ícones ou gráficos armazenados como um GIF. Eles são uma boa escolha para isso, vez que eles têm um tamanho de arquivo pequeno e também podem suportar transparências também. Então não temos um passado encobrindo as coisas. Um arquivo GIF também pode conter uma animação. Então esta é uma boa escolha se você precisa animar. Essas animações podem ser criadas com ferramentas como o Photoshop. Para os vetores, um SVG é uma escolha popular. Não o usamos para fotografias. Ou se você precisa de um gráfico baseado em computador, um logotipo ou um ícone, esta é uma ótima escolha porque ele é redimensionável sem qualquer perda de qualidade e também tem tamanhos de arquivos pequenos também. Algumas dessas tecnologias de imagem mencionadas até agora já há algum tempo e também têm algumas limitações. Por esta razão, alguns formatos de imagem de próxima geração mais recentes foram desenvolvidos, como JPEG 2000, JPEG XR e também WebP. Embora ainda não tão comumente adotado, eles podem oferecer grandes economias de tamanho de arquivo em formatos tradicionais como JPEG e PNG. Eu não vou entrar em todos os detalhes técnicos destes, mas JPEG 2000 oferece a escolha de compressão com perdas e também sem perdas. Podemos escolher qual é melhor para nossas imagens e geralmente tem uma imagem de maior qualidade para o mesmo tamanho de arquivo que um JPEG normal. O JPEG XR foi criado pela Microsoft e também oferece a opção de compactação com perdas e sem perdas para atender a uma gama mais ampla de situações. Ele pode ter níveis mais altos de compactação, então há um grande tamanho de arquivo salvando a ser feito. Temos também WebP, que foi desenvolvido pelo Google e, assim como os outros dois, também suportará compressão com perdas e sem perdas. Ele pode preservar transparências e geralmente tem um tamanho de arquivo muito menor do que os tipos de arquivo tradicionais. Outro benefício é que ele também suporta animações também, que significa que é uma ótima alternativa para arquivos GIF como você esperaria uma vez que esses tipos de arquivos são muito mais recentes. O problema está em torno do suporte em programas de imagem, dispositivos como câmeras e também navegadores da web. Para verificar o suporte do navegador, podemos ir para caniuse.com também. Vamos dar uma olhada em um WebP. Aqui vamos nós, o formato de imagem WebP. Podemos ver que isso é totalmente suportado na maioria dos principais navegadores. Como sempre, temos um problema com o Internet Explorer, que foi substituído pelo Edge. Também no Safari, temos apenas suporte parcial. Isso significa que ele só é compatível com o macOS, seu sistema operacional e acima. Isso é algo a ter em conta ao usar qualquer uma dessas imagens de próxima geração. Vamos dar uma olhada no JPEG 2000. Podemos ver que isso não é tão bem suportado quanto o WebP, então isso é algo para ter cuidado. Vamos verificar o WebXR. uma vez, isso tem muitos problemas com o suporte. Pode ser melhor ficar com um formato como WebP em vez desses dois formatos JPEG. SVG, vamos dar uma olhada nisso. Este é um dos tipos de vetor. Isso é muito bem suportado em todos os principais navegadores. Pode ser uma boa idéia ter um formato de imagem de próxima geração disponível se o navegador suportá-los e também reverter imagens como JPEG e PNG se houver suporte limitado ao navegador. Vamos dar uma olhada em como fazer isso em seguida, juntamente com algumas ferramentas que você pode usar para converter tipos de arquivos de imagem. 10. Ferramentas de conversão e imagens de reserva: Agora sabemos um pouco mais sobre os diferentes tipos de arquivos de imagem disponíveis. Agora vamos dar uma olhada em como podemos adicioná-los ao nosso projeto e também como podemos adicionar imagens de fallback se não houver suporte para navegador. Para esta lição, vá para o número 6, que é ferramentas de conversão e imagens de fallback. Abra como sempre a página Índice, e então podemos abrir isso dentro do navegador, colocar isso em uma nova guia. Vou começar com a nossa página HTML em branco. Aqui dentro, eu forneci uma lista de alguns dos tipos de imagem comuns, temos o WebP, temos o SVG, PNG, JPEG e também GIF. Novamente, para alternar entre diferentes tipos de imagem, os elementos de imagem que possui são cobertos por [inaudível] listam várias imagens com formatos diferentes. Ainda fornecer os elementos de origem como fizemos anteriormente, mas desta vez, em vez de trabalhar com o tamanho, declaramos que o tipo de arquivo, navegador ou dispositivo irá verificar se este tipo de arquivo é suportado, e se não, ele será ignorado. Usando esses formatos de imagem que temos aqui, vamos começar com o nosso exemplo. Podemos usar o elemento de imagem como nosso wrapper, para este exemplo mais em imagens temos um JPEG, e uma versão WebP da mesma imagem, então vamos adicioná-los em. Precisamos de uma fonte, então aqui dentro, adicionamos os atributos de tipo. Podemos então usar qualquer um desses usados para ambos, eu vou para a versão WebP, que é image/webp. Em seguida, adicionamos o ponto de fontes para a imagem WebP. Depois disso, também precisamos cuidar da nossa queda, que é o nosso bridge.jpg, adicione os elementos da imagem. Isso está nas imagens e no bridge.jpg. Se WebP for suportado, esta imagem será selecionada. Caso contrário, ele cairá facilmente dentro dos elementos da imagem. Vamos tentar isso, atualizar o navegador. Podemos ver dentro das ferramentas de desenvolvedor que meu navegador escolheu a versão WebP. Para mim, isso seria um benefício porque isso vai carregar mais rápido. Se dermos uma olhada no bridge.jpg, podemos ver na parte inferior, que isso é cerca de 134 kilobytes. Se formos para a versão WebP, isso é em torno de 1-10 kilobytes, então isso resultará em uma gravação de arquivo e minhas imagens serão baixadas mais rápido. Isso é muito útil, mas quando estamos procurando imagens para usar em nossos projetos, nem sempre temos a opção de baixar nossas imagens em diferentes formatos de arquivo. Isso é bom porque existem algumas ferramentas para nos ajudar a converter, e também comprimir nossas imagens. Estou usando uma marca, e isso tem algumas opções incorporadas ao abrir as imagens. Se entrarmos no número seis, onde estamos atualmente, insira imagens e clique duas vezes em qualquer uma dessas imagens. Isso será então aberto dentro da pré-visualização. Não se preocupe se você não estiver usando uma marca se você estiver usando Windows ou Linux, seu programa padrão que abre a imagem também pode ter algumas dessas opções incorporadas. Se não, vamos dar uma olhada em mais algumas opções em apenas um momento. Como mais símbolo, podemos entrar em ferramentas e ajustar o tamanho. Podemos reduzir o tamanho do arquivo se essa imagem específica for um pouco grande demais, e podemos ver o tamanho do arquivo resultante foi reduzido. O que muda para ser 300. Você pode ver que isso foi reduzido para 50 kilobytes, que muda para 300. Agora baixou para 30 kilobytes. É mais básico, podemos fazer algo assim para reduzir o tamanho do arquivo se o download inicial for muito grande. A maioria dos programas também nos permite exportar as imagens em diferentes formatos. Muitos deles geralmente têm uma função de exportação na qual podemos clicar e muitas vezes podemos mudar o formato da imagem, então vemos que o tamanho do arquivo é 157 aqui, que muda para 2.000. Este é 216 PNG, isso é um pouco maior, e também os tamanhos de arquivo que suportam compressão, também podemos ajustar a qualidade também. Como acontece com a maioria das coisas, há também muitas outras ferramentas que você pode baixar. Você pode encontrar uma enorme quantidade disponível se estiver pesquisando App Stores ou online. Uma ferramenta popular baixa é uma chamada ImageOptim. Isso está disponível em imageoptim.com. Este software em particular está disponível para Mac e Linux, que você pode baixar. Esta é uma coleção de ferramentas que combina para remover qualquer lixo desnecessário de nossas imagens. Aqui está uma lista de ferramentas que ele usa, e é tudo gratuito e de código aberto, então não há nenhum custo para usar isso. Ele também aplica técnicas de compressão, e há também uma versão on-line que podemos clicar apenas aqui. Eles cobram por este serviço em particular. E outro é tinypng.com. Ao contrário do ImageOptim, esta é uma ferramenta de compressão online gratuita. Você pode encontrar isso em tinypng.com. Apesar do nome, isso também aceita imagens JPEG também. Se pudermos simplesmente arrastar e soltar nesta seção apenas aqui, que outro serviço de arrastar e soltar baseado na web é compressor.io, juntamente com PNG e JPEG. Isso também aceita GIF, SVG e também os tipos WebP mais recentes. Você pode ver que na parte inferior aqui podemos aceitar tipos de compressão com perdas ou perdas. Também uma configuração do cliente onde podemos redimensionar e também definir a qualidade da imagem também. Outro otimizador e compressor é IMG2go, este está disponível em img2go.com. Esta ferramenta também permite converter o tipo de imagem para outro formato também. Funciona com PNG, GIFs, JPEGs e também vetores como SVG. Assim como os outros, também podemos arrastar e soltar e também temos algumas opções para vincular ao Dropbox ou Google Drive, um URL dedicado. Há também muitas opções para definir a qualidade e também o tamanho da imagem também. Estas são apenas algumas das muitas ferramentas disponíveis para download, e também algumas versões online também. Nunca devemos ficar presos com o tipo de imagem errado para o nosso projeto. 11. Usando um CDN: Toda essa manipulação de imagens e escolher as imagens corretas para o nosso projeto pode realmente ser muito trabalho extra, especialmente à medida que nossos aplicativos crescem. É por isso que neste vídeo vou mostrar-lhe um ótimo serviço que também é gratuito, que pode realmente ajudar com isso. Podemos fazer uso de serviços como Cloudinary, que está disponível em cloudinary.com. Isto vai permitir-nos cuidar de um monte de trabalho para nós. Cloudinary é usado para armazenar e hospedar nossas imagens e também vídeo, se necessário também. Uma vez carregado, obtemos um URL para o qual podemos vincular dentro do nosso HTML. Não só hospeda nossas fotos de imagens, mas também tem muitos outros benefícios também. Todos esses benefícios, é muito fácil usar CDN. CDN é uma rede de distribuição de conteúdo e é uma forma de ter o nosso conteúdo, que no nosso caso são as nossas imagens disponíveis em todo o mundo em vários servidores ou centros de dados. Ter esses vários data centers significa que nossas imagens se hospedaram mais perto do usuário, vez de apenas tê-las em um local central, todos no mundo. Isso pode realmente acelerar a entrega de nossas imagens. Além disso, se houver um problema com o servidor, ele pode ser facilmente mudado para um novo para evitar qualquer tempo de inatividade. Ele não só serve a imagem de um data center local, mas também pode fornecer uma versão otimizada. Só precisamos carregar uma única imagem para o Cloudinary e podemos convertê-la e enviá-la de volta em um formato de arquivo otimizado, incluindo coisas como WebP e JPEG 2000, claro, se o navegador suportar. O mesmo para tamanho e qualidade também, podemos configurar essas imagens para serem transformadas em certos tamanhos ou permitir que elas escolham fotos. Obviamente, precisamos primeiro fazer upload de uma imagem que é grande o suficiente. Nosso maior caso de uso, já que não queremos esticar uma imagem muito grande e perder qualquer qualidade. Se você não usou o Cloudinary antes, vá em frente e crie uma nova conta que é gratuita e tenha um enorme subsídio de uso de imagem gratuito. Há também uma versão paga também, mas a conta gratuita inclui armazenar milhares de imagens. Você não deve ter nenhuma preocupação a menos que seu projeto cresça a um nível enorme. Eu já tenho uma conta desde que eu uso isso com bastante regularidade. Vou abrir esta nova conta. Em seguida, levando-o para a área do painel do usuário para esta lição, vá para o número 7, que está usando uma CDN. Eu já tenho isso aberto e também aberto dentro de uma nova guia do navegador. Este é apenas um arquivo HTML vazio. Dentro da pasta de imagens, temos apenas esta única imagem, que é 5.311 pixels por três-cinco, quatro-cinco de largura. Significa que esta é uma imagem muito grande, mas desta vez não vamos ligá-la diretamente a esta imagem. Em vez disso, podemos carregar esta imagem para o Cloudinary e, em seguida, no link Cloudinary dentro do nosso índice. Para isso, vamos para a pasta do projeto, para o número 7 e para a pasta de imagens, e para o painel do Cloudinary, para o qual você será levado quando estiver conectado. Tudo o que precisamos fazer é clicar na biblioteca de mídia. Em seguida, podemos arrastar e soltar uma nova imagem que você deseja carregar. Largue isso aqui dentro, e dê alguns segundos para carregar. Lá vamos nós. Aí está a nossa nova imagem. Se passarmos o mouse sobre isso, podemos ver um URL que podemos copiar com este link apenas aqui. Se clicarmos duas vezes nesta imagem, seremos levados em detalhes onde podemos adicionar itens como tags. Podemos adicionar alguns metadados. Podemos ver qualquer histórico de revisão. Podemos ver os dados do arquivo, como o tipo de arquivo, o tamanho e também as dimensões. Então, no fundo, temos o que é chamado de transformações. Atualmente estamos no original e este é o URL para esta imagem em particular. Cloudinary adicionou automaticamente algumas transformações para melhorar nossa imagem, alterar o tamanho, transformar em uma miniatura. Podemos ter um banner, podemos ter uma versão com marca d'água. Cada vez que eu clicar em uma dessas imagens, temos um novo URL que podemos usar dentro de nossos projetos. Junto com esses padrões, também podemos criar nossas próprias transformações clicando neste botão de transformação. A partir daqui, podemos cortar e redimensionar nossas imagens. Podemos alterar o formato da imagem, temos uma opção para todas essas extensões diferentes. Podemos ajustar a qualidade com este menu suspenso e este controle deslizante. Podemos adicionar raios de canto, podemos girar, podemos adicionar muitos efeitos diferentes. Toda vez que fazemos uma alteração nesta imagem, recebemos uma nova URL que podemos copiar e usar dentro do nosso projeto. Cada vez que fizermos uma alteração nas nossas imagens, deixem-me fechá-la e voltar ao original. Cada vez que fazemos uma alteração em uma de nossas imagens, como clicar em uma dessas predefinições ou até mesmo nossas próprias transformações, recebemos uma nova URL que tem alguns parâmetros diferentes. Aqui podemos ver estes parâmetros laranja estão sendo adicionados e separados por vírgula. Se clicarmos no círculo. Podemos ver diferentes aqui e isso afetará coisas como o tamanho, o raio, a borda, a cor. Esta é a nossa maneira de dizer à Cloudinary qual imagem queremos buscar. Este ID de imagem é sempre o mesmo no final, mas vamos apenas adicionar esses parâmetros diferentes dentro da URL. Vamos ao nosso projecto e podemos experimentar isto. Primeiro de tudo, se clicarmos no original e, em seguida, podemos selecionar este URL. Copiaremos o que está aqui em nossos projetos. O que vamos primeiro fazer é definir a imagem para ser 100% da largura dos navegadores com as tags de estilo. Os elementos da imagem, largura máxima de 100 por cento. Em seguida, para baixo na seção do corpo, podemos criar uma imagem com este URL também. Desregulamentar fez qual era o link que acabamos de copiar. Tudo o que precisamos fazer é colar os atributos de origem, fechar a barra lateral, salvar isso, atualizar o navegador. Podemos ver, uma vez que esta é uma imagem bastante grande, levou algum tempo para baixar. Esta imagem é muito grande para o tamanho atual do navegador, mas veremos como ajustar isso em apenas um momento. Em seguida, podemos ajustar a rotação ou o ângulo desta imagem. Fazemos isso logo após esta seção de upload. Se dissermos barra para a frente, diga ângulo alfa sublinhado e, em seguida, 90 para 90 graus. Tudo isso vem antes do ID da imagem, que está no final e também o nome da imagem. Salve isso. Recarregar e agora devemos puxar uma versão de 90 graus de nossa imagem existente. Claro, isso é muito grande, vamos remover o ângulo e podemos definir um tamanho fixo em pixels com w, em seguida, sublinhado seguido pelos valores de pixel, como 200. Refresque. Agora isso puxa uma imagem que é realmente pequena e podemos ver que o tempo de download é muito mais rápido, mas como aprendemos em vídeos anteriores, um tamanho de pixel nem sempre é a melhor escolha. O que vamos fazer é definir a largura para ser igual, também, que permitirá que Cloudinary escolha o melhor tamanho de imagem para o navegador. Aqui vemos que escolheu uma versão de 3,4 megabytes. Se formos ao original. O original é de cerca de 4.2, por isso escolheu um tamanho menor que é adequado para este navegador. Também podemos alterar o formato padrão desta imagem usando f, em seguida, sublinhado e, em seguida, selecionando um dos formatos permitidos por Cloudinary. Eu vou para WebP e também para isso, podemos remover a extensão the.jpeg do navegador e atualizar. Agora vemos que o tipo de imagem é WebP. Assim como com o tamanho, também podemos permitir que a Cloudinary defina automaticamente o formato correto de fotos. Poderíamos fazer isso com f auto, e se fizermos isso, vemos que Cloudinary também escolhe um formato WebP fotos, vez que isso é suportado dentro do navegador Chrome. Há também muitas outras opções que podemos adicionar aqui dentro. Também podemos combiná-los, ou também podemos gerar esses URLs nós mesmos dentro do Cloudinary usando essas transformações. Esta é apenas uma visão geral de um uso básico com o Cloudinary. Mas tem muitos outros recursos, incluindo a adição de predefinições que configuram ou transformam automaticamente nossas imagens cada vez que carregamos novas imagens. Existe uma API de desenvolvedor para conectar seus projetos. Isso permitirá que você faça automaticamente coisas como adicionar carregamentos de notícias. Você pode incluir vídeo. Eu recomendaria olhar através de alguns desses recursos. Também a documentação também se você planeja usar o Cloudinary para um projeto. Eu também uso Cloudinary para meus próprios projetos também, e acho que é muito confiável. Além disso, mesmo que este exemplo apenas use os elementos básicos da imagem, também podemos combinar essas imagens hospedadas com [inaudível] e também o elemento jarro também. No próximo vídeo, descobriremos outra maneira de reduzir o tempo de carregamento da página configurando o carregamento lento. 12. Lazy loading: Temos uma página web que tem imagens. Às vezes, quando a página é carregada pela primeira vez, nem todas essas imagens são visíveis. Por exemplo, se tivermos algumas imagens na parte inferior da nossa página, não devemos esperar que o usuário espere que essas imagens sejam baixadas antes que a página seja carregada inicialmente. Para ajudar com isso, a técnica final que eu quero mostrar é chamada de carregamento preguiçoso. Esta é uma forma de atrasar ou adiar o carregamento de imagens que não é crítico. Muitas vezes, há imagens que o usuário não vê inicialmente e tem que rolar para baixo para mover para a exibição. Um exemplo disso é algo como Pinterest. Uma página pode ter milhares de imagens e carregar todas elas de uma só vez levaria muito tempo. Portanto, faz sentido carregar apenas o que o usuário pode ver inicialmente e, em seguida, carregar mais imagens à medida que o usuário rola. Podemos até adicionar conteúdo de espaço reservado simples ou leve enquanto essas imagens estão sendo baixadas. carregamento preguiçoso também não é apenas para imagens. Ele existe em outras partes do desenvolvimento web também. Podemos carregar praticamente qualquer tipo de conteúdo, dependendo de quais idiomas, bibliotecas ou frameworks estamos usando. Podemos carregar preguiçoso newsfeeds, artigos, feeds mídia social, e geralmente qualquer outro tipo de conteúdo que você deseja. Existem várias maneiras de fazer isso, incluindo o uso de JavaScript. Mas aqui, eu vou mostrar a vocês uma maneira muito fácil de adicionar carregamento preguiçoso nativamente através desta interação, passar para o número oito, e abrir a página de índice. Em seguida, cole isso em uma nova guia dentro do navegador. Podemos ver que temos algumas imagens de cães carregadas aqui e não temos nenhuma imagem armazenada dentro desta pasta do projeto. Em vez disso, todos eles se vinculam a imagens externas. Temos 10 imagens diferentes aqui. Como esperado, todas as 10 dessas imagens são carregadas ao mesmo tempo, mesmo que muitas delas não estejam em exibição quando carregamos a página pela primeira vez, eu tenho uma velocidade de conexão muito boa, mas muitos usuários não. Os usuários também poderiam estar em um dispositivo móvel mais lento e se houvesse muitas imagens como esta, ele pode realmente retardar as coisas. Para atrasar o carregamento de nossas imagens que estão fora da viewport ou da área visível, podemos adicioná-lo ao nosso elemento de imagem, um atributo de carregamento, e depois configurá-lo para ser preguiçoso. Atualmente, podemos ver cerca de três imagens dentro da vista. Assim, podemos deixar as três primeiras imagens carregadas imediatamente. Agora, se descermos para a imagem número quatro, podemos adicionar os atributos de carregamento e definir isso igual a preguiçoso. Copie isso e nós podemos colar isso em todas as nossas imagens logo abaixo. Certifique-se de que está na imagem número quatro até 10. Vamos ao navegador e ver o que acontece. Se atualizarmos, ainda podemos ver nossas três primeiras imagens, mas todas as imagens ainda estão sendo baixadas ao mesmo tempo. Não há alteração porque até que essas imagens sejam carregadas no navegador, o navegador não saberá a altura e a largura de cada imagem. Então, se ele não tem a altura e a largura, ele não pode dizer quais imagens vão estar em exibição e quais vão estar abaixo da dobra. A dobra é a parte inferior do navegador. Antes de precisarmos rolar para baixo. Para corrigir isso, podemos adicionar alguns CSS simples na seção de cabeça, coloque na seção de estilo. Para as imagens, vamos apenas configurar uma largura padrão para todos estes de 600 pixels e também a altura de 400 pixels também. Se você quiser, você também pode adicionar a largura e a altura de cada imagem individual também. Mas vou manter isto simples para este exemplo. Vamos tentar isto. Até o topo da página e atualize. Agora só vemos seis imagens carregando dentro das ferramentas de desenvolvimento em vez das 10 que tínhamos originalmente. Este é um salvamento de quatro imagens, mas por que estamos recebendo seis imagens baixadas quando só podemos ver cerca de três dentro da janela de exibição? Bem, isso é porque eu estou usando o Google Chrome e Chrome decidiu carregar algumas imagens extras que eu espero que nós vamos precisar muito em breve. Podemos ver como isso reage em diferentes navegadores copiando este link, eu vou abrir o Firefox. Cole isto. Vemos inicialmente o mesmo número de imagens. Abra as ferramentas de desenvolvedor, estamos a clicar com o botão direito do mouse e inspecionar elemento. Vemos as três primeiras imagens aqui. Se entrarmos na rede e atualizarmos, o Firefox escolherá apenas as quatro primeiras imagens, para que não pré-carregue com antecedência tantas imagens quanto o Chrome. Agora, se fecharmos o Firefox, e vamos voltar ao Chrome. Se começarmos a rolar para baixo, e agora podemos ver como rolamos para baixo a página que imagens extras estão sendo carregadas à medida que nos aproximamos de precisar delas. Como mencionei antes, isso ocorre porque o Chrome os buscará previamente para que estejam prontos para o usuário. Quão cedo depende da velocidade de conexão e também do tipo de imagem. Isso é o que vimos com o Firefox, ele também varia de acordo com o navegador e todas essas quatro imagens extras agora foram salvas do tempo inicial de carregamento da página, resultando em uma melhor experiência. Se houver uma imagem que você deseja carregar imediatamente, independentemente de estar abaixo da dobra de página ou não, podemos definir o carregamento para estar ansioso. Se descermos até a última imagem e definir isso para ansioso, até o topo da página e atualizar. Vemos que agora em vez das seis imagens iniciais, agora temos a sétima imagem carregada mesmo que não esteja à vista. Como você pode imaginar, esses atributos preguiçosos só podem ajudar as coisas ainda mais, pois temos mais imagens em nossas páginas e especialmente se o usuário precisa rolar para baixo para revelar mais conteúdo. Acabamos de ver que este atributo de carregamento funcionou perfeitamente na minha versão do Chrome e Firefox. Mas o suporte ainda tem um pouco de recuperação para fazer em alguns dos navegadores. Vamos fazer uma pesquisa em caniuse.com para os atributos de carregamento. Este é um que eu preciso que você veja, que é o atributo de carregamento preguiçoso para imagens e iframes. Então é encontrar Edge. Com o Firefox temos apenas suporte parcial e isso é apenas porque ele suporta apenas imagens em vez de iframes. É encontrar o Chrome ou o Safari. Isto não é algo que está habilitado por padrão, mas podemos habilitar isso dentro das configurações do navegador. Além disso, este atributo de carregamento também pode ser usado com o elemento jarro também e nós só precisamos adicioná-lo aos elementos de imagem de fallback em vez de todas as fontes para que ele tenha efeito. Então, se voltarmos para a pasta do nosso projeto e entrarmos em qualquer uma dessas páginas de índice, só precisamos adicionar os atributos de carregamento a este elemento de imagem em vez de cada uma dessas fontes. Com tudo isso em mente, agora temos um exemplo aqui onde rolamos para baixo e as imagens vão carregar preguiçoso. Mas o que acontece se rolarmos para baixo mais rápido do que as imagens podem ser baixadas? Não é um problema para este pequeno exemplo onde se tivéssemos milhares de imagens e uma velocidade de conexão muito lenta, podemos começar a rolar para baixo mais rápido do que as imagens podem ser baixadas. Para este problema, existem algumas abordagens diferentes que podemos tomar. Poderíamos também fornecer algumas imagens de espaço reservado de baixa qualidade, que vão baixar mais rápido e podemos configurar isso com o elemento de imagem. Também podemos ter uma única imagem de espaço reservado genérica, que usamos no lugar até que a imagem seja baixada. Ou até mesmo coisas como uma cor de fundo sólida usando algum CSS. Mas também é bibliotecas JavaScript para ajudar com isso também e também plug-ins se você estava usando WordPress ou qualquer outro sistema de gerenciamento de conteúdo. Um dos populares é chamado de tamanhos preguiçosos e isso nos permite fazer uso de JavaScript para aplicar carregamento lento rápido e desempenho. Ele também faz uso dos elementos de imagem e do conjunto de fontes para criar imagens responsivas. É SEO amigável e também carrega imagens de forma inteligente quando necessário com base no navegador, na posição de rolagem e também na conexão de rede. Então ele pode realmente lidar com um monte de trabalho duro para nós. Além disso, também nos permite usar imagens de baixa qualidade ou borradas como espaços reservados. Não vou entrar na configuração e instalação, mas é muito simples de começar. Deslocaremos para baixo até a seção de instruções. Tudo o que precisamos fazer é baixar o script e vinculá-lo dentro do nosso HTML. Ou também podemos instalar isso via NPM se você estiver usando em um projeto de nó. Não há nenhuma configuração necessária, tudo o que precisamos fazer é configurar nossas imagens, como os exemplos que você vê aqui se você estiver usando opções responsivas ou não responsivas. Também podemos usar isso com um iframe, se necessário. Espero que esta aula tenha lhe dado algo para pensar e também algumas técnicas úteis que você pode usar em seus projetos futuros ou existentes. Em seguida, vamos falar sobre um pequeno desafio para configurar para que possamos testar todas essas novas habilidades. 13. Projeto do curso: Quando estávamos aprendendo, a melhor maneira é colocar as coisas em prática. Se você já tem um projeto ao qual você pode aplicar essas técnicas, então isso é ótimo ou você pode ter um próximo projeto onde você pode experimentar as coisas. Eu também forneci um modelo básico de galeria de imagens com este curso. Isto está dentro da pasta número 9, e aqui dentro temos esta página de índice e também uma única imagem. Esta é apenas uma única imagem para você entrar e você precisará baixar mais algumas imagens para usar para este projeto. Algo como unsplash.com é ideal. Esta é apenas uma página de índice bastante básica. Tudo o que temos dentro da seção do corpo é uma única seção e, em seguida, vários elementos de imagem, e vamos configurar isso logo acima em uma seção de estilo será exibido como uma grade. Se abrirmos isso dentro do navegador, podemos ver nossa grade aqui. O que eu gostaria que você fizesse para este desafio é baixar algumas novas imagens para usar nesta galeria. Você pode então otimizar e experimentar todas as técnicas que você aprendeu para carregá-las eficientemente dentro do navegador. Não há maneira certa ou errada de fazer isso. A idéia é apenas experimentar coisas, otimizar imagens, que usam tamanhos de arquivos e geralmente tornam o carregamento das imagens mais eficiente. Você poderia fazê-lo em lotes, você poderia aplicar as alterações, registrar seus resultados e, em seguida, repetir até que você esteja satisfeito com os resultados. Boa sorte com este projeto. Mal posso esperar para ver o que você cria. 14. Siga-me na Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, certifique-se de conferir o resto das minhas aulas aqui no Skillshare, e também me siga para quaisquer atualizações, e também para ser informado de quaisquer novas aulas à medida que estiverem disponíveis. Então, obrigado mais uma vez. Boa sorte e espero vê-lo novamente em uma aula futura.