CODEWITHSUNDEEP
htmlcssimageperformanceweb
George Welder
George Welder

Reputation: 4045

Different images according to screen size to improve performance / loading time? (Webdesign)

I have a large picture which I want to display on my website, as a sort of background picture. It is quite large and takes a lot of loading time, so on smaller screens I want to display a smaller picture to minimize the loading time, since the picture that is actually being shown on smaller screens will be small anyways, so it would be a waste to load the big picture.

My question however is: How do I do this? What sort of options do I have? Will I have different pictures for different screen resolutions? And how do I know who is viewing my website (that is, how do I know the screen size)?

Upvotes: 0

Views: 41

Answers (1)

user3569377
user3569377

Reputation: 21

You can use media queries, this will allow the background image to changes as per the width of the device the website is being view on 

#body {      
background: url('images/your_bg_small.png') repeat-x;
 } 

@media (min-width: 601px) {
 #body { 
   background: url('images/your_bg.png') repeat-x;
 }

}

Upvotes: 1

Related Questions