Removing HTML element on mobile view?

Question

I am not using jquery mobile.

I built a template in WordPress and have a full width background that can be set to a different one for each page: Background_1.jpg = Home, Background_1.jpg = About, ens....

This is what is loaded in the front end:

<div id="bg">
    <img id="background" src="images/Background_1.jpg" alt="background">
</div>

So my problem is the following:

When i get to the fluid grid layouts i would like to remove this element completely to speed up the load time.

I also dont want to hide it, i want to remove the html when the window size is smaller than 600px.

Has anyone done this before?

Triviality

What do you mean by getting to the fluid grid layouts? By the time you could remove the element with JavaScript, the element has already been loaded in the DOM and possibly rendered. – Robyn

Answer 1

Many years later and lots of testing as well as training and general experience.

There are different solutions that I have found works best for instances like this:

1. Optimize your images with a PHP image library which can easily be done within WordPress, that will make the images web friendly and load faster on all devices.
2. Detect the screen size on the Apache request with PHP and load the template file with hooks. Like the AMP plugin loads a different theme for mobile.
3. Detect screen size with PHP and optimize/generate images according to the size.

I used PHP Image Library along side my WordPress to generate and load the images in the size and quality I want and allows me to change size on the fly.

For the screen/user-agent detection I use Mobile-Detect.

You can also combine both of these solutions for best results.

Triviality

Answer 2

Use a media query in your css. Something like this:

@media (max-width: 767px) {
    .styleName {
        display:none;
    }
}

This hides the css element if the window size is less than 767px. You do need the right markup in your html:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

To hide a div on a mobile view, you need the right window size. This is about right from the bootstrap framework:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

To implement this into your code, you would use:

<div id="bg" class="styleName">
CODE
</div>

Read up more here: Mobile Device Trick

Halloo

Hi, i know how to do what you explaining but i think you misunderstood. I want to remove the html when the screen size is lower than say 480px. – Triviality

Okay, I understand.. I am inclined to agree with @Robyn though. By the time the browser has acknowledged, read and implemented the code hack to remove the bg div, the div would have rendered anyway in the browser if you had the above hack. I suppose its down to the filesize of your bg, why don't you change the bg image if that is slowing you down to a very small block color, 1px x 1px. That will render in no time and speed load times. Just replace the display:none with the new background: url(img/block.jpg); I hope I have helped.. – Halloo

Yes true. I will ponder on this some more and go from there, since i cant down the size of the background images more than i have already and i cant change the code since i need a custom background on each page (fussy client), i will have to think of something else. – Triviality

Answer 3

You were ahead of your time in 2013 and thankfully in 2022 things are starting to catch up :P

The top answer only tells half the story (using display:none with media queries) because even though the image is not displayed it will still be loaded (causing a performance hit).

If the image isn't at the top of the page (for desktop) then you're in luck and can just add lazy loading for the image.

If you are using the image as your background, I suggest you rather look into using CSS - specifically background-image: image-source coupled with a media query to exclude the image on mobile.

.bg {
  background-image: -webkit-image-set(
    url("images/Background_1.jpg") 1x,
    url("images/Background_2.jpg") 2x);
  background-image: image-set(
    url("images/Background_1.jpg") 1x,
    url("images/Background_2.jpg") 2x);
}
@media (max-width: 600px) {
    .bg {
        background-image:none;
    }
}

Unfortunately it's hard to go all the way with the optimisations at the moment because you may also wish to use different file formats (e.g. webp or avif) - and these aren't well supported at all. There are some workarounds, which are described in this answer: https://mcmap.net/q/651614/-how-to-detect-if-webp-images-are-supported-via-css

I would be very interested to find out what solution you came up with in 2013.

Hokkaido

Its been quite some time since I wrote this and luckily no longer work with front-end clients that often. But this issue still comes up now and again on some projects. I still use a the Mobile-Detect library since its been kept up to date all these years, lazy load as you mentioned and newer file formats which are much more optimized as well as caching and a good CDN. – Triviality