CODEWITHSUNDEEP
cssimagespritecss-spritessprite-sheet
Mike Timms
Mike Timms

Reputation: 13

CSS Sprite Images and Responsive Design. Does it load both the full size and responsive size?

I am in the process of optimizing images and reducing number of requests to my server for my website and am therefore reducing the number of images by creating image CSS Sprites.

As one would expect, most of the images are smaller for the Tablet/Mobile layouts of the design of the site.

Due to this I am planning on creating an image sprite for the mobile/tablet sizes of the icons and images contained within the sprite and switching it out with @media queries so I am not downloading images much larger than they actually need to be for mobile.

My question is probably a fairly simple one, I have my desktop sprite image referenced outside of any @media queries, and the Mobile/Tablet versions in an @media query. If someone accesses the website from Mobile, would it request both the desktop (not required due to my mobile @media query coming into effect) and the mobile/tablet versions of the sprite? or is it smart enough to only request the mobile/tablet version as that is the size that is required by the @media query?

Thanks in advance

Upvotes: 0

Views: 210

Answers (1)

woolm110
woolm110

Reputation: 1204

Yes it will download both the image assets. The easiest way to check this is to open up the developer tools and check the network panel for image requests, you should see that on mobile it will make a request to the desktop asset as well as the mobile asset.

You could expand your media queries so you have one targeting desktop which will download the desktop asset and one targeting mobile that will download the mobile asset.

Upvotes: 1

Related Questions