Change banner according to screen size?

Question

Aiming for the best performance in the load time of my site I wanted to make the input page banner smarter.

For screens of up to 1600px would have to be loaded a banner simpler, of lower quality and smaller side size since it doesn’t have to be bigger, but for larger screens that this I would bring a banner with more details and better resolution.

Supposing I had one <img id="banner"> how to make this move to change the src dynamically?

It’s common for that to happen on websites these days?

Answer 1

yes quite normal. Voce can handle in css or js layers. Nowadays js offers a lot of screen resize support, with components in jquery ui. if you need to change size, bg and component layout, I suggest you use the CSS as follows:

#div{
   width: 600px;
   position: relative;
   margin: 10px auto;
}
@media (max-width:960px){
#div{
     width: 450px;
     margin: 0; 
    }
 }
 @media (min-width:480px){
#div{
     width: 100%;
     margin: 0; 
    }
 }

so you can make "if" species inside the css for each maximum or minimum screen size. overwriting only what will change from the pardrão css. Tools like Bootstrap help you manipulate screen elements with already written base css and quite responsive to standard screen sizes.

Answer 2

If you want to do in javascript:

// convém estar no onload da janela
window.onload = function()
{

  // primeiro tens de sacar a dimensão da janela
  // neste caso a área visível do browser
  var largura = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

  // depois é brincar com if's e colocar o banner que queiras:

  if(largura>=1600)
  {
    // mete o banner com mais detalhe
  } else {
    // mete o banner com menos detalhe
  }
} // fim do window.onload