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

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 <picture> e como implementá-lo de forma mais eficaz com o imgix.

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 ajustar a resolução da imagem ao dispositivo (alternância de resolução).

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 <picture> é 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.

Nesse caso, você deseja comandar o navegador diretamente, apesar do possível impacto no desempenho.

Usando imgix e <picture> para direção de arte

imgix tem dois benefícios principais ao usar o elemento <picture> . 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.

Em segundo lugar, ajuda a minimizar o impacto no desempenho otimizando a imagem e armazenando em cache todas as diferentes versões solicitadas.

Observação: o elemento <picture> não está disponível para alguns navegadores legados. Você pode usar Picturefill para adicionar suporte para esses clientes.

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 <picture> , 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.

No entanto, com algumas adições a esse código, é possível tornar <picture> uma ferramenta poderosa para automatizar a direção de arte em todo o conjunto de imagens, não apenas em uma única foto isolada.

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 crop do imgix para ajustar programaticamente onde o corte começa, sem ter que produzir versões pré-cortadas manualmente para diferentes proporções.

imgix oferece dois modos que recortam com base no conteúdo da imagem: crop=faces e crop=entropy . Eles funcionam de forma semelhante avaliando a imagem e detectando rostos ou áreas de alto contraste e, em seguida, cortando com aqueles no centro.

Há mais detalhes sobre como usar esses modos em nossos guias sobre criação de avatares e corte de pontos de interesse .

Vamos ver como usar <picture> 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.

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 <picture> normalmente pode causar.

corte

Veja exemplos de corte de faces/entropia no CodePen

Veja o Pen Picture Element & Art Direction com imgix por imgix ( @imgix ) no 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 crop=faces , crop=entropy , alinhamento de corte ( crop=top , etc.) e às vezes rect para aumentar o zoom em uma parte da imagem em tamanhos menores.

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 <picture> para fazer direção de arte de forma ainda mais dramática.

Veja exemplos de marca d'água/mistura no CodePen

Adicionando Suporte DPR

Se você deseja oferecer suporte a várias resoluções de pixel em <picture> , pode fazê-lo adicionando variações de DPR a cada srcset . Por exemplo, se quiséssemos dar suporte a um dispositivo de maior densidade para nosso exemplo original, o código ficaria assim:

 <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 dpr ao URL e rotular cada um com o descritor de densidade de pixel apropriado ( 1x , 2x , etc.).

Sua imagem original é tudo o que é necessário para criar variações infinitas conforme suas necessidades e designs mudam.

Resumo

O imgix é 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.

Também apoiamos abordagens com visão de futuro, como Client Hints , que tentam simplificar o design e a implementação responsivos.

Crie uma conta gratuita hoje para aproveitar as vantagens do imgix.

Parâmetros imgix relevantes

• crop | Modo de corte
• dpr | Proporção de pixels do dispositivo
• fit | Redimensionar modo de ajuste
• rect | Região Retângulo de Origem

Outros recursos

• Consultas de mídia : seleção com curadoria de sites projetados responsivamente usando consultas de mídia. Útil para olhar para diferentes abordagens de direção de arte.

• Responsive Images 101 : 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

• Corte de ponto focal para direção de arte responsiva : aprenda a usar <picture> com os parâmetros de corte de ponto focal do imgix para tornar suas imagens atraentes em qualquer tamanho.