image-set()

A notação de função CSS image-set() é um método de deixar o navegador escolher a imagem CSS mais apropriada de um dado conjunto, principalmente para telas de alta densidade de pixels.

Resolução e largura de banda diferem por dispositivo e acesso à rede. A função image-set() oferece a resolução de imagem mais apropriada para o dispositivo de um usuário, fornecendo um conjunto de opções de imagem — cada uma com uma declaração de resolução associada — da qual o navegador escolhe o mais apropriado para o dispositivo e as configurações. A resolução pode ser usada como um proxy para o tamanho do arquivo — um agente de usuário em uma conexão móvel lenta, com uma tela de alta resolução, pode preferir receber imagens de baixa resolução em vez de aguardar uma imagem de alta resolução carregar.

image-set() permite que o autor forneça opções em vez de determinar o que cada usuário individual precisa.

Sintaxe

image-set() = image-set( <image-set-option># )
where <image-set-option> = [ <image> | <string> ] <resolution> and
      <string> is an <url>

Valores

Mais comumente, você verá um valor de  url() <string>, mas o <image> pode ser qualquer tipo de imagem, exceto para um conjunto de imagens. A função image-set() não pode ser aninhada dentro de outra função image-set().

unidades <resolution> incluem x ou ddpx, para pontos por unidade de pixel, dpi, para pontos por polegada, e dpcm para pontos per centímetro. Toda imagem dentro de image-set() deve ter uma única resolução.

Exemplos

background-image: image-set( "cat.png" 1x,
                             "cat-2x.png" 2x);

Este exemplo mostra como usar image-set() para fornecer duas opções alternativas background-image (en-US), escolhidas dependendo da resolução necessária: uma versão normal e uma versão de alta-resolução.

Preocupações de Acessibilidade

Tecnologia assistiva não pode analisar imagens de fundo. Se a imagem contiver informações críticas para entender a finalidade geral da página, é melhor descrevê-la semanticamente no documento.

Especificações

Especificação Status Comentário
CSS Images Module Level 4
The definition of 'The image-set() notation' in that specification.
Rascunho atual  

Compatibilidade entre navegadores

BCD tables only load in the browser

Veja também