Optimizing css for a media query

Question

Good morning,

I have created a media query for my website. I have the feeling that it is slowing down my website, because it is not optimized. On mobile phones, I have a specific image. For tablets and desktops I have another image to be shown. The media query I have works just fine. But it is not optimized. Can anyone help me to get it optimized?

this is the query:

body, html {
    height : 100%;
    width: 100%;
    margin:0;
}

@media only screen and (min-width: 320px)  {

.Frontpage-image {
    background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100vh;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    .Frontpage-image {
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        height:100vh;
    }
}
    

@media screen and (min-width: 768px) {
    .Frontpage-image{
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        height: 100vh;
    }
}
@media screen and (min-width: 1025px) {
    .Frontpage-image {
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        height:100vh;
    }
}

Hi, do you mean shorter/neater code or runtime optimisation? — A Haworth, Oct 09 '21 at 08:34
Both actually, but runtime optimisation is more important for me — TML, Oct 09 '21 at 08:36
There is a code review stackexchange site for this at the bottom of this page. — Rob, Oct 09 '21 at 10:22

Sato Takeru · Accepted Answer · 2021-10-09T08:14:02.223

Please use this CSS code.
In media query, styles defined outside of query is inherited.
So my code works exactly like yours, but the code has been greatly reduced.

body, html {
    height : 100%;
    width: 100%;
    margin:0;
}
.Frontpage-image {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100vh;
}

@media only screen and (min-width: 320px)  {

.Frontpage-image {
    background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    .Frontpage-image {
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
    }
}
    

@media screen and (min-width: 768px) {
    .Frontpage-image{
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
    }
}
@media screen and (min-width: 1025px) {
    .Frontpage-image {
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
    }
}

You can check this answer.

Please could you give an explanation describing how the code works to optimise things, thanks. — A Haworth, Oct 09 '21 at 08:08
Thanks, the code is reduced but it always loads the first image, whether it's needed or not so there's a run time overhead (which is what I think the question is about). — A Haworth, Oct 09 '21 at 08:32

score -1 · Answer 2 · answered Oct 09 '21 at 08:04

-1

Here are some tips to optimize this

Use Low size images
Use Low size videos or embed them from YouTube or Vimeo
Compress this CSS code.

answered Oct 09 '21 at 08:04

Ahmad Sajid

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 09 '21 at 08:05

Optimizing css for a media query

2 Answers2