DMM Technology

Section 6 Lecture 62 - Using HTML

Resumo/Informações

Imagens responsivas podem ser utilizadas para definir o tamanho (kb) de uma imagem que será enviada para um desktop, mobile, etc. Com isso, economiza-se tráfego de dados.

Density Switching:
a) Utiliza Pixel Density, que é a quantidade de pixels encontrados em um inch ou centímetro.
b) Existem low resolution screens, chamadas de @1x screen. Geralmente são os monitores normais de PCs. Essas utilizam 1 pixel para mostrar 1 pixel do nosso design, portanto uma imagem definida para ter 100px, irá ocupar 100 pixels da tela.
c) High resolution screens, chamadas de @2x screen. Geralmente são as de smartphones e PCs como MacBooks (tela retina). Essas utilizam 2 pixels para mostrar 1 pixel do nosso design. Então nossa imagem de 100px, ocupará 200px em uma tela física.
d) Com isso, para que a imagem fique boa em uma @2x, precisamos fornecer uma imagem com o dobro de pixels da imagem original.
Portanto, Density Switching is for serving one image to a high-resolution screen and another one if the screen is low resolution.

Art Direction: possuir uma imagem diferente para uma resolução menor.
a) Como na imagem abaixo, onde os objetos não mudaram seu tamanho, mesmo que a imagem ficou menor.
b) Também poderia ter substituído a imagem com uma outra completamente diferente.

Implementation

Resolution Switching

On this method, we allow the browser to choose the image for the current view port and pixel density situation.
Sintaxe
<img srcset="img/nat-1.jpg 300w, img/nat-1-large.jpg 1000w"
   sizes="(max-width: 65.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
   alt="Photo 1"
   class="composition__photo composition__photo--p1"
   src="img/nat-1-large.jpg">
** 37.5em = 600px (600/16), 56.25em = 900px (900/16).
Width Descriptor: são o 300w (300px) e 1000w (1000px), que informam ao browser o width das imagens, para que não seja necessário baixa-las para descobrir seus widths.
sizes: informa ao browser o breakpoint que deve ativar essa imagem e sobre o width aproximado da imagem em diferentes vw (view port width).
a) (width que será aplicado essas informações) width da imagem na página/width da resolução.
b) em uma resolução de 900px, quero que essa imagem tenha 171px, ou seja, 171/900 = 20vw, 20% do view port width.
c) em uma resolução de 600px, quero que essa imagem tenha 171px, ou seja, 171/600 = 28vw, 28% do view port width.
Portanto, com a informação do 300w e sizes, o browser pode descobrir qual será a melhor imagem para usar no current view port e display resolution.
d) caso nenhuma das condições aplicar, será utilizado o valor de 300px definido no sizes.
e) adicionado o alt, class e src. O src foi adicionado para caso não haja suporte ao srcset e sizes no browser utilizado.
Resumindo:

Density Switching

Antes
<img src="img/logo-green-2x.png" alt="Full logo" class="footer__logo">
Depois
<img srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" alt="Full logo" class="footer__logo">
a) utilizado srcset.
b) definido caminho da imagem para low resolution (1x).
c) definido caminho da imagem para high resolution (2x).

Art Direction

Sintaxe:
<picture class="footer__logo">
<source srcset="img/logo-green-small-1x.png 1x, img/logo-green-small-2x.png 2x" media="(max-width: 37.5em)">
<img srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" alt="Full logo" class="footer__logo">
</picture>
<picture> tag principal utilizada.
<source> utilizado para indicar as imagens que serão utilizadas, nas resoluções @1x e @2x e a partir de qual width essa srcset se aplicará. Nesse caso, até o max-width de 600px.
Pode-se definir mais de uma source.
Caso o browser esteja com um width maior do que 600px, será utilizado o próximo srcset, ou seja, a linha de baixo.