O design responsivo requer um equilíbrio entre desempenho e flexibilidade — fornecer uma imagem otimizada e dimensionada corretamente para todos os dispositivos possíveis não deve significar um tempo de carregamento lento.  Dada a variedade de métodos para implementar o design responsivo, é importante entender quais funcionam melhor para diferentes casos de uso.  Neste tutorial, veremos quando usar o elemento   e como implementá-lo de forma mais eficaz com o imgix. <picture>  Direção de arte x alternância de resolução  As imagens responsivas geralmente são usadas para resolver um de dois problemas: a necessidade de modificar a imagem para ajustá-la a um design que muda dependendo do dispositivo (direção de arte) ou a necessidade de   (alternância de resolução). ajustar a resolução da imagem ao dispositivo  Em termos de implementação, é uma escolha entre fornecer ao navegador informações suficientes para decidir qual versão da imagem usar ou comandá-la diretamente.  O elemento   é melhor usado para o caso de uso de direção de arte porque as alterações necessárias provavelmente incluirão a alteração das proporções, corte diferente da imagem e outros aspectos de design que são mais complexos do que apenas exibir uma imagem de resolução mais alta. <picture>  Nesse caso, você deseja comandar o navegador diretamente, apesar do possível impacto no desempenho.  Usando imgix e   para direção de arte <picture>  imgix tem dois benefícios principais ao usar o elemento   . Primeiro, elimina a necessidade de manter cópias separadas e pré-processadas da imagem para cada tamanho de viewport. Aplique quaisquer parâmetros conforme necessário para ajustar o tamanho, o corte e a proporção de pixels do dispositivo. <picture>  Em segundo lugar, ajuda a minimizar o impacto no desempenho otimizando a imagem e armazenando em cache todas as diferentes versões solicitadas.    o elemento     para alguns navegadores legados. Você pode usar   para adicionar suporte para esses clientes. Observação: <picture> não está disponível Picturefill  Vamos ver como tudo isso se encaixa. Começaremos com uma imagem na orientação paisagem e, em seguida, forneceremos diferentes parâmetros para mostrar a parte mais significativa da imagem para diferentes dispositivos que podem ter outras orientações.     Clique na imagem para ver as alterações da viewport em tamanho real   <picture> <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280" media="(min-width: 1280px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop" media="(min-width: 768px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop" media="(min-width: 480px)" > <img src="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop"> </picture>  Mesmo que eles não sejam dimensionados exatamente para o dispositivo (dada a grande variedade de tamanhos de tela disponíveis), definir alguns pontos de interrupção simples da janela de exibição e aplicar alguns parâmetros pode levá-lo ao máximo com muito menos sobrecarga do que gerar diferentes imagens originais para cada tamanho.  Você pode continuar a expandir o número de pontos de interrupção conforme necessário, dependendo do que você sabe sobre os dispositivos de seus usuários.  Mesmo com essa implementação simples de   , cobrimos o básico, ajustando uma única imagem conforme necessário para fornecer a versão mais atraente da imagem para cada tamanho de destino. <picture>  No entanto, com algumas adições a esse código, é possível tornar   uma ferramenta poderosa para automatizar a direção de arte em todo o conjunto de imagens, não apenas em uma única foto isolada. <picture>  Direção de arte automatizada  Nos exemplos acima, o recorte foi direto porque o conteúdo significativo estava no meio (que é o padrão para   ). fit=crop  No entanto, se a parte mais relevante da imagem não estiver centralizada, você ainda pode usar os modos   do imgix para ajustar programaticamente onde o corte começa, sem ter que produzir versões pré-cortadas manualmente para diferentes proporções. crop  imgix oferece dois modos que recortam com base no conteúdo da imagem:   e   . Eles funcionam de forma semelhante avaliando a imagem e detectando rostos ou áreas de alto contraste e, em seguida, cortando com aqueles no centro. crop=faces crop=entropy  Há mais detalhes sobre como usar esses modos em nossos guias sobre   e   . criação de avatares corte de pontos de interesse  Vamos ver como usar   e os principais recursos do imgix, como sobreposições de texto e marcas d'água, pode criar um conjunto de imagens com marca completa que corta e muda para caber na tela de qualquer dispositivo. <picture>  Cada versão dessas imagens está sendo criada a partir de um arquivo de imagem de origem em tempo real em resposta ao tamanho da janela de visualização e armazenada em cache, o que minimiza bastante o armazenamento de imagem e qualquer impacto no desempenho que   normalmente pode causar. <picture>  corte    Veja exemplos de corte de faces/entropia no CodePen   https://codepen.io/imgix/pen/ZQVXBY?embedable=true  Veja o Pen   por imgix (   ) no   . Picture Element & Art Direction com imgix @imgix CodePen  No exemplo do CodePen, as imagens se ajustam à janela de visualização em tamanho e proporção, e o estilo de corte varia com base no que é necessário nessas dimensões para manter o presidente Obama centralizado.  Dependendo da variação da imagem, isso é feito com   ,   , alinhamento de corte (   , etc.) e às vezes   para aumentar o zoom em uma parte da imagem em tamanhos menores. crop=faces crop=entropy crop=top rect  A marca d'água do logotipo e o crédito da foto também são ajustados para tamanho e preenchimento para se adequar às alterações da janela de visualização e alterar a posição para evitar a sobreposição do assunto.  Redimensionando texto e marcas d'água  Quaisquer sobreposições de texto, misturas ou marcas d'água que você adicionar às suas imagens podem ser dimensionadas e ajustadas junto com a imagem. Aqui está um exemplo que aproveita   para fazer direção de arte de forma ainda mais dramática.  <picture>   Veja exemplos de marca d'água/mistura no CodePen   https://codepen.io/imgix/pen/NxoadL?embedable=true  Adicionando Suporte DPR  Se você deseja oferecer suporte a várias resoluções de pixel em   , pode fazê-lo adicionando variações   a cada   . Por exemplo, se quiséssemos dar suporte a um dispositivo de maior densidade para nosso exemplo original, o código ficaria assim: <picture> de DPR srcset   <picture> <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=5 5x" media="(min-width: 1280px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=5 5x" media="(min-width: 768px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=5 5x" media="(min-width: 480px)" > <img srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=5 5x"> </picture>  Observe novamente que não há necessidade de criar novas versões da imagem - basta criar uma cópia da fonte, adicionar um parâmetro   ao URL e rotular cada um com o descritor de densidade de pixel apropriado (   ,   , etc.). dpr 1x 2x  Sua imagem original é tudo o que é necessário para criar variações infinitas conforme suas necessidades e designs mudam.  Resumo    é um aliado poderoso para abordar a complexidade das imagens responsivas em designs que mudam rapidamente. Com alterações simples de parâmetros, você pode abordar novos contêineres de design, dispositivos e resoluções de dispositivo programaticamente, em vez de reprocessar todo o catálogo de imagens. O imgix  Também apoiamos abordagens com visão de futuro, como   , que tentam simplificar o design e a implementação responsivos. Client Hints    para aproveitar as vantagens do imgix. Crie uma conta gratuita hoje  Parâmetros imgix relevantes    | Modo de corte crop    | Proporção de pixels do dispositivo dpr    | Redimensionar modo de ajuste fit    | Região Retângulo de Origem rect  Outros recursos    seleção com curadoria de sites projetados responsivamente usando consultas de mídia. Útil para olhar para diferentes abordagens de direção de arte.  : Consultas de mídia    Série introdutória da Cloud Four Design abrangendo todos os métodos de criação de imagens responsivas e suas compensações e casos de uso  : Responsive Images 101    aprenda a usar   com os parâmetros de corte de ponto focal do imgix para tornar suas imagens atraentes em qualquer tamanho.  : Corte de ponto focal para direção de arte responsiva <picture>

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

Usar<picture> para renderizar imagens dinamicamente para diferentes ambientes de usuário

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Valhalla de Floki se junta como patrocinador associado da viagem da Índia ao Sri Lanka

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Valhalla de Floki se junta como patrocinador associado da viagem da Índia ao Sri Lanka

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps