Práticas recomendadas para imagens de navegador de largura total?

Quais são as melhores práticas que as pessoas seguem em relação a imagens em viewports maiores?

Qual navegador de tamanho devemos criar? Ou seja, como lidamos com monitores de alta resolução e qual% dos usuários tem telas grandes?

Como podemos lidar melhor com a altura das imagens de heróis, pois realmente precisamos decidir com qual resolução de tela usar?

Obviamente, tudo isso é mantido na filosofia da grade de 12 colunas;)

Asprilla,

Embora os comentários acima apresentem pontos técnicos muito bons, sugiro adaptar seu trabalho a um cliente específico, que começa analisando o Google Analytics do site atual - Relatórios / Tecnologia / Navegador e SO / Resolução de tela. Dessa forma, você gastará seu tempo e o orçamento de seu cliente com sabedoria, atendendo às necessidades específicas de seu cliente, em vez de implementar diretrizes gerais. Na verdade, tivemos que aconselhar nossos clientes de vez em quando contra o design totalmente responsivo, simplesmente porque o tráfego que não é de desktop não justificaria a despesa.

Lembre-se de várias coisas ao exibir imagens para os espectadores.

1. Mantenha a proporção da imagem igual às dimensões originais

Fazemos isso para evitar que a imagem fique distorcida e para que as imagens fiquem embaçadas. Podemos manter a proporção da dimensão igual ou cortar as peças que não se encaixam.

Ao usar um <img>elemento ou algo semelhante, isso é bastante direto, requer apenas o uso de um conjunto widthou heightOR conjunto max-widthou max-height.

No entanto, no caso de uma imagem com largura total da janela de exibição, isso é um pouco mais complexo. Existem várias maneiras CSS de fazer isso , sendo a melhor delas background-size:covero primeiro exemplo vinculado no artigo e o programa de respostas da Talkingrock .

Além disso, agora temos a capacidade de usar os recursos encontrados na especificação de imagens responsivas incluindo srcsete o <picture>elemento, que são bastante úteis. Eu falo sobre isso mais adiante nesta resposta.

2. Dê aos espectadores apenas as imagens necessárias

Para ter um carregamento mais rápido da página e impedir que os usuários precisem transferir mais dados, é de vital importância atender ao usuário final apenas as imagens que eles precisam, quando precisam. Isso significa que exibimos uma imagem do mesmo tamanho ou um pouco maior que a que a viewport está usando e aguardando o carregamento de imagens que não serão vistas imediatamente até após o carregamento inicial da página.

Podemos exibir uma imagem de tamanho mais apropriado usando CSS usando @mediaconsultas quando estivermos usando imagens de plano de fundo. As imagens que não estão na consulta de mídia em uso não são carregadas . Eu recomendo o uso de pelo menos três tamanhos de foto (o que significa pelo menos três consultas de mídia), mas ter mais algumas pode ser uma ótima performance. A seguir, é um exemplo, mas geralmente deve coincidir com alguns pontos de interrupção gerais para o layout do seu site.

@media (max-width: 320px) { /* For phones (this breakpoint is the one I'm least sure about) */
    ... background-image(imageURLforPhones.png); ...
}
@media (min-width:501px) and (max-width: 1024px) { /* For tablets and such */
    ... background-image(imageURLforTablets.png); ...
}
@media (min-width: 1025px) { /* For large screens */
    ... background-image(imageURLforLargeScreens.png); ...
}

Mas, vamos ser sinceros: não somos bons em escolher pontos de interrupção nem somos perfeitos em escolher as dimensões da imagem, considerando um determinado tamanho de tela. Não seria ótimo se pudéssemos deixar que algo fizesse isso 'magicamente' por nós?

A grande novidade é que agora podemos !

Com a especificação de imagens responsivas, podemos deixar o navegador decidir tudo isso por nós, desde que o ajudemos um pouco. A srcsetpropriedade sempre tão útil pode ser usada com um <img>ou um <picture>elemento. Para mudar de resolução como estamos fazendo aqui, devemos usar um <img>elemento.

A seguir, é apresentado um exemplo do HTML necessário para permitir srcsetsua execução. Para mais, você pode ler o excelente artigo de Yoav Weiss sobre o assunto. O exemplo é retirado dele.

<img src="cat_500px.jpg"
     srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
     width="500" alt="lolcat">

_{Nota lateral: se você precisar exibir a mesma imagem com dimensões diferentes em determinados tamanhos de janela de exibição, poderá usar o sizesatributo}

Eu não estou dizendo que usar srcseté necessariamente melhor do que usar uma imagem de plano de fundo CSS, eu não tenho trabalhado o suficiente para dizer isso com certeza, mas é potencialmente uma maneira melhor.

Além disso, para ajudar no desempenho, podemos "carregar preguiçosamente" imagens que não serão visíveis inicialmente. Isso significa que impedimos que eles carreguem inicialmente, mas começamos a carregá-los assim que a página inicial terminar de carregar. Dessa forma, podemos fazer com que o visualizador veja a página o mais rápido possível e preencha alguns detalhes mais tarde. Aqui está uma maneira de fazer isso: não entrarei em muitos detalhes agora.

3. Verifique se o conteúdo da imagem que você deseja exibir é mostrado

Se temos as dimensões corretas e um ótimo desempenho, isso é incrível, mas se o espectador não vê o que queremos que ele veja, não faz sentido. Se estivermos mostrando a imagem completamente o tempo todo, isso não é um problema, mas se tivermos que cortar a imagem, isso pode ser um problema.

Podemos cortar background-images usando CSS usando background-sizee background-position(e meio que usando clip, mas isso geralmente é usado para formas mais artísticas e complexas). Os detalhes exatos disso variarão de imagem para imagem, dependendo de como está sendo implementado.

A segunda opção é usar o <picture>elemento Usamos isso quando queremos apenas parte da imagem exibida, como visto aqui , mas aqui está um exemplo simples na prática (extraído do excelente artigo de Jason Grigsby sobre esse assunto).

<picture>
    <source media="(min-width: 45em)" srcset="large.jpg">
    <source media="(min-width: 32em)" srcset="med.jpg">
    <img src="small.jpg" alt="The president giving an award.">
</picture>

Quero reiterar que, se você precisar apenas mudar de resolução , não use o <picture>elemento , basta usá-lo <img>com srcset. O único momento em que precisamos do <picture>elemento é para essa direção de arte, ou seja, recorte, etc.

Há também a possibilidade de cortar o lado do servidor, usar uma máscara SVG ou fazer algumas coisas com o Canvas, mas isso está um pouco fora do escopo desta resposta.

Algumas outras notas

Pontos de interrupção específicos não são tão importantes. Como em todo design responsivo, é importante fazer o melhor possível para todas as viewports, mas não há consultas de mídia perfeitas para todos os sites.

O tempo de carregamento da página é muito importante e as imagens podem diminuir muito o tempo de carregamento inicial. Certifique-se de carregar imagens que serão vistas imediatamente primeiro e depois outras. Tente impedir que imagens (como JPEGs) mostrem parte da imagem enquanto ela carrega o restante. Otimize também todas as suas imagens para que tenham o menor tamanho de arquivo possível e ainda tenham a quantidade de qualidade necessária.

É importante lembrar que as imagens, na maioria dos casos, devem ser um acessório, não uma necessidade. Eu recomendo sempre testar a aparência de uma página da Web sem imagens para garantir que seja utilizável.

Nota : Podemos usar um polyfill chamado Picturefill para atender navegadores mais antigos que não suportam a especificação de imagens responsivas.

Diretrizes para escolher as dimensões da imagem do navegador de largura total

Aprendi isso através de pesquisas durante o ano passado e experimentações nos últimos dias para este caso de uso específico.

• Escolha uma imagem com um único ponto focal ou nenhum ponto focal.

• Seu arquivo de imagem de origem precisará ser grande (mínimo de 5000 x 5000) se você desejar exibir muitas imagens dependentes da resolução.

• Para a versão retrato, você deve usar uma proporção de 9w:16h.

• Para a versão paisagem, você deve usar uma proporção de 4w:3h.

• Nas duas imagens, existe uma área segura de conteúdo, na qual você pode garantir que uma parte da imagem seja vista ou esteja acima da dobra, como dizem no Klingon.

• As áreas seguras de conteúdo para ambas as imagens, com base nesses cinco formatos: 3:2, 4:3, 5:3, 16:10e 16:9, é mais ou menos os três primeiros trimestres de ambas as imagens.

  

• srcseté o Santo Graal da implementação de imagens responsivas. <picture>provavelmente será ainda melhor no futuro, mas srcseté rei por enquanto. Verifique a resposta de Zach Saucier para obter mais informações sobre isso.

Aqui está um exemplo que eu criei após extensas experiências.

Essas imagens devem cobrir quase qualquer tela. Redimensione o painel de visualização para ver as diferentes imagens. O fallback deve ser para uma das imagens de médio alcance, mas vinculei à página em que obtive a imagem, como uma espécie de atribuição menor.

Tentei manter esta resposta breve (reescrita 3 vezes), mesmo que eu possa fornecer as justificativas para minhas afirmações, não o fiz, porque isso incharia muito essa resposta. Espero que você possa inferir as justificativas da imagem acima e ver as evidências do meu exemplo jsFiddle.

Em uma 4:3tela:

Em uma tela super ampla:

Em um celular retrato:

Aqui estão algumas informações adicionais que você pode achar úteis.

Estatísticas de tamanho de tela

Os tamanhos de tela populares variam, então, aqui estão alguns sites estatísticos que listam o uso do tamanho da tela por porcentagem, tendências do navegador, sistemas operacionais e muito mais.

1. http://www.w3schools.com/browsers/browsers_display.asp
2. http://www.netmarketshare.com/

Herói e imagens grandes

Existe uma solução CSS excelente e fácil para o Hero e outras imagens grandes. É background-size:cover. É útil porque cobre toda a div sem distorcer a imagem em diferentes tamanhos de tela ou se a div principal muda de forma (mais / menos texto ...). Ele funciona cortando bits da imagem para manter proporções adequadas, e você também pode posicionar o fundo para que as partes importantes sempre sejam exibidas (centro central, parte inferior direita ...).

Outra vantagem é que ela exibe a imagem como plano de fundo, para que texto e outras informações possam ser facilmente adicionados à div. Também funciona como plano de fundo em tamanho normal. Aqui está um exemplo do JSFiddle para brincar que usa o tamanho de fundo: cover como fundo de tela cheia e outro que usa uma div Hero . Redimensione a janela do JSFiddle e edite o posicionamento do CSS para vê-lo funcionar.

background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;

O suporte do navegador para o tamanho do plano de fundo (CanIUse.com) é muito bom e aqui está uma correção para o IE7 e IE8 .

Uma solução popular para todos os tamanhos de exibição de dispositivos variados (desktop / tablet / computador de mão) é criar um site responsivo que se reposicione para se ajustar aos vários tamanhos de tela da TV de tela grande ao computador de mão. Se você estiver interessado nisso, aqui está um bom tutorial de nível intermediário: http://www.elated.com/articles/responsive-web-design-demystified/ .

Os designs responsivos funcionam com layouts de grade e, se o site é baseado em pixels, existe uma fórmula que converte os tamanhos de pixel no equivalente em porcentagem. Uma pesquisa rápida usando os termos "grade de 12 colunas responsivas" e "calculadora de grade de colunas responsivas" gerou muitos recursos úteis, como wireframes responsivos de 12 colunas, calculadoras e muito mais. Aqui está um exemplo: http://onepcssgrid.mattimling.com/

A versão curta

Tente projetar para compatibilidade com a menor resolução da janela de exibição:

Desktops: 800x600 / 1024x768 (em pixels)

telefones celulares mais antigos: 320x480 (em pixels)

tablets: 800x1280 (em pixels)

Ao escolher a resolução mais baixa, você garante que o design funcione para pessoas com resoluções menores e resoluções maiores.

A versão longa

Parece-me que vocês dois estão interessados ​​nas janelas de exibição para dispositivos diferentes, e não no tamanho do navegador.

O navegador é a janela completa usada para navegação visual na web. Esta área inclui as entradas, guias e barras de ferramentas do URL de navegação.

A janela de visualização é a área do navegador que mostra um site renderizado. Isso geralmente está abaixo das barras de ferramentas e do URL. Essa é a área na qual os designers normalmente estão mais interessados.

Quanto à decisão sobre a resolução da tela, primeiro você deve se perguntar: em que ela será vista principalmente? Se for para uso interno em uma empresa, podemos supor que provavelmente será usado em um laptop ou desktop. Se ele deveria ser usado em movimento, podemos supor que será usado principalmente em dispositivos móveis.

A tendência atual para web design é "Mobile First". É aqui que um site é projetado para dispositivos móveis antes de ser responsivo a outras plataformas. Isso ocorre porque mais e mais pessoas estão usando dispositivos móveis para acesso à Internet, em vez de desktops ou laptops.

Você pode achar os tamanhos da viewport muito úteis para aprender sobre as dimensões da viewport. Este site fornece a janela de visualização para muitos dispositivos móveis e alguns desktops. Deve permitir que você explore a variedade de tamanhos de viewport.