Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Does an image or any file set in media query also loads parent files?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #186780
    Ayanize
    Participant

    Hi,

    Re-posting the question; not sure why it was not published yesterday.

    Anyway, I have a question regarding media query. In one of my pages, I have used a big background image. However, I do not wish to show the same to mobile devices. So, I used another background image, a small one this time and set it under the media query like

    @media only screen and (max-width: 767px) {
    .custom_class{
    background-image: url(small-image-url-here);
    }}

    Now my question is – does the page load both the images – both the big (which is meant to be visible on larger screens only) and the small one (for the mobile devices only)? Am I only making the big image invisible using CSS media query but in reality the browser calls both the big and small images?

    I am unsure if this topic has already been discussed / answered or not, but will be glad if my doubts are cleared.

    Many thanks

    #186781
    __
    Participant

    This article might interest you. Test #4 addresses your specific question.

    As for the author’s conclusions, keep in mind that these tests were done over two years ago and Android 2 has a much less dominant position now (though I haven’t seen results for similar tests on the Android 4 browser, I would suspect it handles things better).

    #186784
    Ayanize
    Participant

    Thanks for your reply, as I can see in that article, some mobile browsers do request both the images. For the parent image, I applied display:none; and for the mobile image I applied display:block!important; Will this make any difference or it’s a good thing to avoid this practice altogether?

    Thanks by the way.

    #186786
    Paulie_D
    Member

    Re-posting the question; not sure why it was not published yesterday.

    It got caught in a Spam trap..not sure why..probably it parsed the link oddly.

    #186790
    Ayanize
    Participant

    It’s okay @Paulie_D. I understood that later. Hope I get some clue about my questions. Else, I have to scrap the idea of using two background images for desktop and mobile versions..

    #186828
    __
    Participant

    as I can see in that article, some mobile browsers do request both the images.

    Yes, but, like I said, Android is the main problem, and usage of version 2 has declined since then. A quick search shows usage around 22% (of android users, not of “everyone”), and those are mostly going to be smaller, less web-capable phones anyway. Version 4 (which works correctly, according to the article) is well over 3/4 of android users, and that proportion will only grow. I’m not saying that you should ignore the v2 users, but they are probably accustomed to mediocre web experiences already and so it may not be as big a drawback as you might imagine. I think this should be a question of demographics: do you expect any significant number of android 2 users to visit your site?

    #186830
    Ayanize
    Participant

    Thank you very much for the clarification. Well, not sure from where my visitors might land at my sites but with the current plan (using two images for desktop and mobile version) I can let it go. So, you actually support my idea of using two different background images – one for the mobile version and another for larger screens. If so, then this will be awesome since I can use a small lightweight background image then.

    Thank you very much for all your efforts.

    #187032
    Ayanize
    Participant

    Well, just replying again.. the post is resolved but still I think the answer is still vague in this case. Shall we use this method or avoid this? Anyway, I will keep looking for solutions and do some testing and surely update this thread.

    Thanks

    #187054
    __
    Participant

    the post is resolved but still I think the answer is still vague in this case. Shall we use this method or avoid this?

    As I said, the answer is dependent on your needs. If android 2 users are a significant concern for you, you might want to try harder to solve this problem. If they’re not, then it might not be a problem at all. I cannot answer this point; only you can.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.