Este curso foi criado para desenvolvedores da Web de nível iniciante e avançado. Ele aborda desde os conceitos básicos de como garantir que as fontes de imagens sejam solicitadas e renderizadas de maneira eficiente até os detalhes de como os formatos comuns de imagem são comunicados do servidor para o cliente. Ao longo deste curso, você aprenderá como atingir o menor tamanho de transferência possível para suas imagens sem comprometer a qualidade delas, pelo menos de uma maneira que ninguém consiga ver.
Você pode ler a série do início ao fim para ter uma compreensão holística de como as imagens funcionam na Web moderna ou usá-la como uma referência para os conceitos específicos e padrões de marcação que você usará no seu trabalho diário.
Para iniciantes em desenvolvimento da Web, confira os cursos Aprender HTML sobre os conceitos básicos de marcação, os cursos Aprender CSS sobre os fundamentos de estilo e os cursos Aprenda sobre design responsivo para entender como as imagens serão renderizadas em layouts responsivos.
Você aprenderá a fazer o seguinte:
Uma breve história das imagens na Web
Uma história de imagens na Web, começando com o elemento image, em 1993
Principais problemas de desempenho
Aprenda maneiras de garantir que suas solicitações de imagem sejam as menores e tenham o máximo de desempenho possível.
Imagens vetoriais
Saiba mais sobre SVG, o formato de imagem vetorial usado na Web.
Imagens rasterizadas
Descubra imagens de varredura, como JPEG, GIF, PNG e WebP.
Formatos de imagem: GIF
Entenda o formato de imagem GIF, junto com uma explicação de como funciona a codificação de imagens.
Formatos de imagem: PNG
Descubra quando PNG é o melhor formato de imagem.
Formatos de imagem: JPEG
Saiba mais sobre o formato de imagem mais comum na Web.
Formatos de imagem: WebP
Saiba mais sobre o formato WebP e entenda a diferença entre este e outros formatos.
Formatos de imagem: AVIF
O formato de arquivo de imagem AV1 (AVIF) é uma codificação baseada no codec de vídeo de código aberto AV1.
Imagens responsivas
Uma análise detalhada das imagens responsivas.
Sintaxes descritivas
Usar srcset e tamanhos para fornecer ao navegador informações sobre origens de imagens e como elas serão usadas.
Sintaxes prescritivas
Saiba mais sobre o elemento picture.
Como automatizar a compactação e a codificação
Torne a geração de origens de imagens de alto desempenho uma parte ininterrupta do seu processo de desenvolvimento.
Geradores de sites, frameworks e CMSs
Descubra como CMSs como o WordPress e outros geradores de sites podem facilitar o uso de imagens responsivas.
Redes de fornecimento de conteúdo de imagem
Saiba como as CDNs de imagens conseguem transformar e otimizar o conteúdo de uma imagem.
Conclusão
Alguns recursos adicionais.
Tudo pronto para aprender sobre imagens?