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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 21
Prefixed
Full support 21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge ? Firefox No support No
Notes
No support No
Notes
Notes See bug 1107646.
IE ? Opera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Partial support 6
Prefixed Notes
Partial support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support for url images only and x is the only supported resolution unit. See bug 160934.
WebView Android Full support 4.4
Prefixed
Full support 4.4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile ? Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1107646.
Opera Android Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Partial support 6
Prefixed Notes
Partial support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Support for url images only and x is the only supported resolution unit. See bug 160934.
Samsung Internet Android Full support 4.0
Prefixed
Full support 4.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: mdnwebdocs-bot, leandroruel
Última atualização por: mdnwebdocs-bot,