O problema com a exibição de imagens surgiu desde o advento da adaptabilidade na Internet. Queremos que o site tenha uma boa aparência em qualquer tablet, telefone, na orientação retrato ou paisagem da tela, bem como em telas 5K super grandes. Também estão no mercado os displays Retina com uma alta densidade de pixels (DPI), onde as imagens comuns parecem embaçadas. A participação do tráfego móvel está crescendo e grandes recursos visam o carregamento econômico de imagens. Vamos ver como eles resolvem esses problemas nos sites da Apple, Tilda e na plataforma de blogs Medium.
Apple: usuário avançado de imagem de fundo
A Apple depende do design de seus produtos, com um forte foco na pesquisa de exibição de imagens. No site da Apple - no momento em que este artigo foi escrito - a otimização da imagem é fornecida pelos recursos CSS, mais precisamente, pela imagem de fundo. O princípio principal dessa abordagem é uma largura fixa da imagem entre os pontos de interrupção, ou seja, a rejeição das imagens "de borracha". Considere o exemplo de uma das imagens do site
www.apple.com/mac<figure class="imac-image" data-progressive-image=""></figure>
.section-imac .imac-image { width:939px; height:631px; background-size:939px 631px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large_2x.jpg") } } @media only screen and (max-width: 1068px) { .section-imac .imac-image { width:795px; height:536px; background-size:795px 536px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium.jpg") } } @media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium_2x.jpg") } } @media only screen and (max-width: 735px) { .section-imac .imac-image { width:365px; height:246px; background-size:365px 246px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small.jpg") } } @media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small_2x.jpg") } }
Para compatibilidade entre navegadores, três métodos são usados imediatamente para definir a densidade de pixels da tela:
-webkit-min-device-pixel-ratio: 1.5
resolução mínima: 1.5dppx
resolução mínima: 144dpi
Quais são os prós e os contras dessa abordagem?
Prós
- Facilidade de implementação. Esta é talvez a maneira mais compreensível de alterar a imagem para um determinado tamanho e densidade da tela.
- Cobertura de todos os problemas: a questão do tamanho da tela e da densidade de pixels está sendo abordada.
- Sem layout de salto graças aos tamanhos pré-fixados.
- Você pode usar os recursos CSS embutidos para trabalhar com planos de fundo (modo de mesclagem para efeitos, posição - corte a imagem, se necessário).
Contras
- Você não pode tirar uma foto "de borracha". Os tamanhos fixos determinam a proporção da imagem; portanto, quando você tenta comprimir ou esticar, recortamos a imagem ou há um espaço vazio na parte inferior. Sim, você pode usar a parte inferior do preenchimento em porcentagem em vez do tamanho, mas isso já é uma solução alternativa, um corte de CSS que complica o conceito básico.
- Muito código CSS. Sim, é fácil ler o CSS, mas com um grande número de pontos de interrupção e imagens, o tamanho do CSS pode aumentar indefinidamente (veja abaixo "pré-processadores CSS para o resgate").
- Não há controle sobre o download de imagens. Se você usar essa abordagem em sua forma pura, carregará todas as imagens da página ao mesmo tempo. E o CSS, diferentemente do img, não possui retornos de chamada onload que permitem controlar se as imagens são carregadas ou não.
- Requer precisão meticulosa. Você terá que definir as dimensões para todas as imagens. E não menos importante, ao substituir uma imagem por outra, você precisará editar o CSS para as novas dimensões.
Pré-processadores CSS para o resgate
Provavelmente, você já está usando um dos pré-processadores CSS, como SCSS, LESS, PostCSS ou Stylus - e eles podem simplificar bastante sua vida. Vamos tentar otimizar o código no site da Apple usando o SCSS. Para expressões de mídia, pegue o
mixin de mídia e escreva nosso mixin para a foto:
@mixin image($width, $height, $url) { width: $width; height: $height; background-size: $width $height; background-repeat:no-repeat; background-image:url($url); }
Vamos definir as variáveis:
$breakpoints: ( 'phone': 735px, 'tablet': 1068px ); $media-expressions: ( 'screen': 'only screen', 'retina': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi)' );
Temos um SCSS que compila individualmente no CSS da Apple:
.section-imac .imac-image { @include image(939px, 631px, "image_large.jpg"); } @include media('screen', 'retina') { .section-imac .imac-image { @include image(939px, 631px, "image_large2x.jpg"); } } @include media('screen', '<=tablet') { .section-imac .imac-image { @include image(795px, 536px, "image_medium.jpg"); } } @include media('screen', '<=tablet', 'retina') { .section-imac .imac-image { @include image(795px, 536px, "image_medium_2x.jpg"); } } @include media('screen', '<=phone') { .section-imac .imac-image { @include image(365px, 246px, "image_small.jpg"); } } @include media('screen', '<=phone', 'retina') { .section-imac .imac-image { @include image(365px, 246px, "image_small_2x.jpg"); } }
Sumário
Essa é uma ótima maneira de conviver, se você não tiver muitas fotos ou elas raramente mudam.
Tilda: imagem de fundo com efeito de desfoque
Tilda é um construtor de sites que fornece vários componentes para exibir imagens. Considere a maneira mais fácil de carregar fotos "preguiçosamente". Como é o html antes de carregar uma imagem:
<div data-original="https://static.tildacdn.com/image.jpg" style="background: rgba(0, 0, 0, 0) url(https://static.tildacdn.com/image-small.jpg) no-repeat scroll center center / cover;"> </div>
O efeito de desfoque é alcançado devido ao fato de a visualização ter um tamanho pequeno (20x20 pixels), mas com a ajuda da propriedade css da capa, a imagem é esticada em toda a largura e altura. Menos: esse embaçado não parece muito bom, mas é muito simples e não sobrecarrega o processador.
Após o carregamento, a imagem em tamanho real é simplesmente substituída no estilo embutido.
Prós
- Carregamento preguiçoso.
- Fácil de manter.
Contras
- A mesma imagem para qualquer dispositivo. A adaptabilidade é implementada apenas dentro dos limites da estilização (a imagem é simplesmente cortada de maneiras diferentes).
- Efeito de desfoque feio.
- Não há transição entre desfoque e resolução total.
Sumário
Este é um método de trabalho se você precisar de um componente simples e não quiser se preocupar com seis ou mais fotos para diferentes resoluções de tela. Bom para sites com muitas fotos.
Médio: borrão de lona
A plataforma de blog medium.com fez uma grande diferença no mundo das imagens da web devido ao belo efeito de desfoque de imagens com carga insuficiente. Esse efeito é alcançado usando a biblioteca stackblur-canvas.
O HTML parece um sanduíche:
<img src="placeholder.jpg"> <canvas> <img src="full-size.jpg">
Isso permite que você perceba o efeito de uma transição suave. Para uma imagem em tamanho real, inicialmente opacity: 0 passa pela transição de css para opacity: 1.
Blur Battle: CSS vs SVG vs Canvas
Portanto, se não somos a Apple, provavelmente será mais conveniente usar o carregamento lento de fotos e o efeito de desfoque. No momento, existem pelo menos três maneiras de criar um efeito blair (e outra opção de Tilda, mas não o consideraremos, pois esse não é um blair "real").
Por que vale a pena usar o stackblur-canvas para desfocar se você já possui um filtro para desfoque incorporado no navegador css?
- Os problemas Os filtros CSS e SVG, por padrão, desfocam as bordas da imagem. Existe uma solução especial para o filtro svg, para o filtro interno: blur (), você precisa usar o recorte.
- Desempenho O Stackblur-canvas funciona muito rápido, os filtros css funcionam ainda mais rápido; portanto, com um grande número de imagens tremidas, a escolha é definitivamente para filtros css.
- Beleza Aqui, subjetivamente, mas na minha opinião o stackblur parece mais bonito. Um filtro svg possui artefatos feios.
Picture tag - o pináculo da evolução
No início, descrevemos o método Apple e descobrimos que o css possui expressões de mídia para o tamanho da tela e a densidade de pixels. E eles podem ser usados simultaneamente para selecionar uma imagem específica para exibição. Uma desvantagem significativa é que a imagem em segundo plano não "conhece" sua proporção, não pode ser "borracha". Além disso, do ponto de vista da semântica da web, o uso do plano de fundo é incorreto para exibir todas as imagens em uma linha.
A tag img pode ter um atributo srcset, mas você deve escolher um tamanho de tela ou densidade de pixels - não é possível combinar esses parâmetros.
A tag picture está livre dessa desvantagem e, como img, “conhece” sua proporção. Já é suportado por
92% dos navegadores. Essa tag é adequada para quem pode não se adaptar ao IE.
API do Intersection Observer
Finalmente, vamos falar sobre a implementação de imagens de carregamento lento. A abordagem clássica é usar uma combinação de rolagem, redimensionamento e eventos de mudança de orientação e calcular a posição de uma imagem específica em relação à área visível da tela.
Em 2019, você pode substituir o conjunto de muletas por uma API especial do navegador -
observador de interseção . É suportado por todos os navegadores modernos. Para iOS e IE mais antigos, você deve usar o
polyfill w3c oficial.
Um olhar para o futuro: o que mais falta para a felicidade completa
Portanto, já temos uma tag de imagem, que oferece bom suporte ao navegador, mas o problema do carregamento lento permanece. Ainda precisamos confiar em nossas próprias implementações baseadas no observador de interseção ou em uma combinação de eventos JS. Quando os navegadores oferecerão uma solução nativa? Por exemplo, a versão 75 do Chrome promete fornecer suporte para a propriedade loading para as tags img e iframe. Você pode atualizar seus componentes para suporte nativo a carregamento lento, verificando a presença de uma propriedade no protótipo da imagem: se for bem-sucedido, poderá abandonar seu próprio código de carregamento lento, pois tudo será feito pelo navegador para você!
if ('loading' in HTMLImageElement.prototype)
CMS e conteúdo do usuário
Qual é a melhor maneira de exibir imagens carregadas pelos usuários? Como regra, vale a pena fazer tudo da maneira mais simples possível, sem forçá-lo a fazer upload de fotos separadamente para o telefone, tablet e desktop. Portanto, temos apenas uma imagem para todos os dispositivos. Para tal situação, a abordagem Tilda (para máxima simplicidade) ou Média é perfeita - se você deseja criar um efeito de desfoque real, talvez substituindo stackblur-canvas pelo padrão css: blur () para obter melhor desempenho.
Sumário
Ainda não existe uma maneira única e "mais correta" de exibir imagens. Se você precisar oferecer suporte a navegadores mais antigos e ao IE, sua escolha será uma imagem de plano de fundo com expressões de mídia e img para casos simples. Para novos projetos, pode ser mais conveniente substituir imagem de fundo por imagem. Se você deseja fazer uma bela carga lenta, tente stackblur-canvas, e se o desempenho for importante para você, então filtros de css ou imagens esticadas em um plano de fundo no estilo til.