Doubt about loading images in CSS

Question

Doubt about loading images in CSS

Navigation

#1 by (1 votes)

0

I would like to optimize the loading of images from my site according to the size of the device that accesses it.

My idea is to use media querys in css and depending on the resolution of the device load a worse quality image as background-image of a div.

There you have the doubt: all images referenced in a css file, for example: .class1 {background-image: url ('imagem.png')}, are loaded automatically, or only loaded if there is any element with .class1 in my html?

css

asked by anonymous 08.09.2016 / 23:12

1 answer

Access my application without the version number How does the controller know it was for it without passing the parameter in the 'echo open_form ()'?

score 1 · Accepted Answer

It depends on the browser.

Some browsers can find all the images, including those that were not used on the page.

This has a positive side, after all the desktop user can resize the window, for example, so the images are already cached.

Test:

@media all and (min-width: 1024px) {
    .teste {
        background-image:url('http://lorempixel.com/output/abstract-q-c-200-200-1.jpg');
        width:200px;
        height:200px;
    }
}

@media all and (max-width: 1024px) {
    .teste {
        background-image:url('http://lorempixel.com/output/abstract-q-c-200-200-2.jpg');
        width:200px;
        height:200px;
    }
}

Result:

Used Chrome 52 in Windows 10:

Justgotthesetby@mediaalland(min-width:1024px){.

UsedMicrosoftEdgeinWindows10:

Gotallimagesofboth@media.

UsedFirefoxinWindows10:

Justgotthesetby@mediaalland(min-width:1024px){.

UsedChrome(Mobile)52onAndroid6.0.1

Justgotthesetby@mediaalland(max-width:1024px){.

Allsituationsthesitehasbeenaccessedinamaximizedwindowwiththe@mediadefined,exceptinMobile,whichisexactlywheretheotherimageshouldbedisplayed!

Conclusion:

Eachbrowserworksinadifferentway,althoughingeneraltheytendtorespectwhatissetby@media,atleastinthelatestbrowsers!

Thesetestsweredonebyme,forthatreasonIhavenottestedinmorebrowsersorinmoresituations.However,somepeoplehavealreadymademorecompletetestsandmoresituations,youcanfindmoretests(mainlyfromoldbrowsers)in link .