Divi<\/a><\/li><\/ul>\n\n\n\nWhat's the principle behind preventing the downloading of a hidden image on mobile?<\/h2>\n\n\n\n Ordinarily, we bring in images using the <img> tag. Even if the display is set to \"none\", the browser will still try to download the image.<\/p>\n\n\n\n
Instead, we create a box and set the image as the background.<\/p>\n\n\n\n
If you set a parent<\/em> of that box to display: none;<\/em> then the browser won't try to load the image.<\/p>\n\n\n\nIt's a bit hacky, but it's the best we've got in the circumstances.<\/p>\n\n\n\n
If you're doing this without a page builder, you're probably better off setting a class on the box, then responsively setting the background-image<\/em> to \"none\".<\/p>\n\n\n\nThat's what we'll have to do in the example with Divi.<\/p>\n\n\n\n
The other page builders on this page have the responsive hiding attached to a parent of the box, but Divi attaches it to the box itself. A little annoying, but I'll show how to get it done.<\/p>\n\n\n\n
How to stop Elementor loading a hidden image on mobile<\/h2>\n\n\n\n First we need to create an area to hold the image.<\/p>\n\n\n\n
Maybe a little counterintuitively, we're not going to use the image<\/em> widget for this.<\/p>\n\n\n\nWe're going to use the spacer, so we can control the height of the image.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nSet the height to 300px, or whatever height you want the image to be.<\/p>\n\n\n\n
We're actually adjusting the height of a blank container for now. The image will be the background of this container.<\/p>\n\n\n\n
With this method, we lose the ability to easily keep the width from being too wide for the height. This will make more sense in a couple of steps.<\/p>\n\n\n\n
If the image ends up not looking right, come back to this step and adjust the height.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nSwitch to the Advanced<\/em> tab, open the Background<\/em> accordion and click the paintbrush icon.<\/p>\n\n\n\nThis will open the Image<\/em> block. Click that.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nChoose your image for the background.<\/p>\n\n\n\n
You'll return to something looking like this.<\/p>\n\n\n\n
Notice the image is zoomed all the way in on the right? We'll fix that next.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nSet Position<\/em> to \"Centre Centre\", Repeat<\/em> to \"No-Repeat\" and Size<\/em> to \"Contain\".<\/p>\n\n\n\nContain will automatically change the image to be displayed completely inside the spacer, instead of being zoomed in. You may have to play with sizes to get it to look the way you want.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nIf you want a left-aligned image, change the Position<\/em> to \"Centre Left\". Change it to \"Centre Right\" for a right-aligned image.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nThe last step is to open the Responsive<\/em> accordion and choose \"Hide On Mobile\". Then click \"Update\" to save.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nOn the front end, our image still loads the way we want on desktop.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nWhen we switch the size to mobile and reload the page, the image is hidden from the content.<\/p>\n\n\n\n
If you look at the bottom of the graphic, you can see that the image is no longer loaded by the browser.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nIt still looks the way we want on a Tablet, and is still being loaded.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nHow to stop Beaver Builder loading a hidden image on mobile<\/h2>\n\n\n\n It's even easier to stop Beaver Builder loading a hidden image on mobile that we did with Elementor.<\/p>\n\n\n\n
This is because Beaver Builder has the ability to easily set the column height.<\/p>\n\n\n\n
Let's load up our columns.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nHover over the column where you want the image.<\/p>\n\n\n\n
Click Edit Column<\/em>, then Column Settings<\/em>.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nSet the height to 300px or whatever height you want the image to be.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nScrolling down, set the Background Type<\/em> to \"Photo\".<\/p>\n\n\n\nClick \"Select Photo\" to choose the image.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nYou can set a different size (I did Medium<\/em> for this) if it works better.<\/p>\n\n\n\nChange the Scale<\/em> to \"Fit\". This is the same as \"Contain\" in Elementor.<\/p>\n\n\n\nThe other settings you can leave as default.<\/p>\n\n\n\n
You might want to change the Position<\/em> if you want a different alignment.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nSwitch to the Advanced<\/em> tab then under Visibility<\/em>, set the Breakpoint<\/em> to \"Large & Medium Devices Only\". This will hide the image from mobile browsers.<\/p>\n\n\n\nBe sure to save the page.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nThe image loads as expected on Desktop.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nThe image is hidden from the content on mobile. The image is no longer loaded in the browser.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nHow to stop WPBakery Page Builder loading a hidden image on mobile<\/h2>\n\n\n\n The steps for preventing a hidden image loading in WPBakery Page Builder are pretty much the same as for Beaver Builder and Elementor.<\/p>\n\n\n\n
We'll start by adding a Row.<\/p>\n\n\n\n
Click \"Add Element\".<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nSelect Row<\/em>.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nI'll change the Row Layout<\/em> to two columns, to stay consistent with the other examples, but you do whatever layout works best for your design.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nClick the grey \"plus\" button to add an element inside one of the columns.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nWe're looking for the Empty Space<\/em> element. You can find it under All<\/em> or under Content<\/em>.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nSet the height to 300px. This will be the height of the image in your design.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nChoose the Design Options<\/em> tab, then click the box for background images.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nOnce you've chosen your image, change the background from \"Theme defaults\" to \"Contain\".<\/p>\n\n\n\n
Save changes and close the popup.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nHover over the image and click the pencil icon next to Columns<\/em> to bring up Column Settings<\/em>.<\/p>\n\n\n\nSwitch to the Responsive Options<\/em> tab, then check the box for Hide on device<\/em> for mobile. You can hide it on other sizes too if you need.<\/p>\n\n\n\nSave changes, then update the page.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nIf you go to the page, you'll see the image looking as it should.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nThe image will be hidden on mobile and the browser will no longer load the image.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nHow to stop Divi loading a hidden image on mobile<\/h2>\n\n\n\n Unfortunately, stopping Divi from loading a hidden image is a little more complicated than for the page builders I discussed above.<\/p>\n\n\n\n
The problem is that Divi applies the responsive hiding to the same div<\/em> as it applies the background image.<\/p>\n\n\n\nWe still have to use a Divider<\/em> module, rather than an Image<\/em> module.<\/p>\n\n\n\nRead more about what we're doing and why in Principles, above<\/a>.<\/p>\n\n\n\nStart by inserting a two-column row.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nInsert a Divider<\/em> module.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nTurn the divider line off by switching Show Divider<\/em> to \"NO\".<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nOpen the Background<\/em> tab, choose the image<\/em> background and click the plus<\/em> icon to add a background image.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nOnce you have your background image, change the Background Image Size<\/em> to \"Fit\". Otherwise it will look strange like in the circled section.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nStill in the Divider Settings<\/em>, switch to the Design<\/em> tab and change the Height<\/em> to 300px.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nSwitch to the Advanced<\/em> tab and add a class for your hidden images in CSS Class<\/em>.<\/p>\n\n\n\nI've used \"iw-hidden-image\", but you can use anything that's not otherwise in use on your site.<\/p>\n\n\n\n
For classes like this, I like to use the initials of the site (in this case \"IW\" for \"Intelliwolf\"), followed by an easily recognizable description.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nStill on the Advanced<\/em> tab, open the Visibility<\/em> accordion.<\/p>\n\n\n\nCheck Disable on Phone<\/em>.<\/p>\n\n\n\nSave the settings and the page.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nThis is where the steps for Divi diverge from the other examples.<\/p>\n\n\n\n
If you pull up the page on mobile, the image isn't displayed, but it's still being loaded.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nTo fix this, we'll need to add some custom CSS to Divi.<\/p>\n\n\n\n
In the WordPress Admin area, go to Divi -> Theme Options<\/em>.<\/p>\n\n\n\nScroll all the way to the bottom of the General<\/em> tab (which should be automatically selected) until you see Custom CSS<\/em>.<\/p>\n\n\n\nIn the Custom CSS box, add this code:<\/p>\n\n\n\n
@media only screen and (max-width: 767px) {\n .iw-hidden-image {\n background-image: none !important;\n }\n}<\/code><\/pre>\n\n\n\nChange .iw-hidden-image<\/em> to the class you chose for the Divider<\/em> above. Make sure to add the period at the start.<\/p>\n\n\n\nWhat this does is forcibly remove the background image on screens 767px wide or less.<\/p>\n\n\n\n
Because we used a class rather than an ID, you can apply this class to any other images you don't want displayed on mobile.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nNow when we pull up the page on mobile, the image is no longer loaded.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nBut it's still displaying correctly on desktop.<\/p>\n\n\n\n <\/figure>\n","protected":false},"excerpt":{"rendered":"One of our readers commented on the tutorial about responsively hiding elements in Elementor raising a great question: what if you don’t just want the element to be hidden – what if you wanted to prevent an image from even loading on mobile. With most methods of hiding elements for mobile, you’re just assigning this<\/p>\n","protected":false},"author":2,"featured_media":664,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"yoast_head":"\n
How To Stop A Hidden WordPress Image Loading On Mobile (Elementor, Divi, Beaver Builder, WPBakery)<\/title>\n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n \n \n \n\t \n\t \n\t \n