{"id":609,"date":"2019-02-12T14:56:54","date_gmt":"2019-02-12T06:56:54","guid":{"rendered":"https:\/\/www.intelliwolf.com\/?p=609"},"modified":"2019-08-27T14:19:33","modified_gmt":"2019-08-27T06:19:33","slug":"stop-hidden-wordpress-image-loading-on-mobile","status":"publish","type":"post","link":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/","title":{"rendered":"How To Stop A Hidden WordPress Image Loading On Mobile"},"content":{"rendered":"\n<p>One of our readers commented on the tutorial about <a rel=\"noreferrer noopener\" aria-label=\"responsively hiding elements in Elementor (opens in a new tab)\" href=\"https:\/\/intelliwolf.com\/responsively-hide-elements-elementor\/\" target=\"_blank\">responsively hiding elements in Elementor<\/a> 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.<\/p>\n\n\n\n<p>With most methods of hiding elements for mobile, you're just assigning this code to the element:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>display: none;<\/code><\/pre>\n\n\n\n<p>That literally only stops the browser from displaying the element.<\/p>\n\n\n\n<p>The problem comes if you have a large image that you're trying to hide.<\/p>\n\n\n\n<p>The browser will still load the image. It just won't be seen. But it adds to the \"weight\" of the page and will negatively impact the page load speed.<\/p>\n\n\n\n<p>Here's what I mean:<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"575\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_mobile-hide-image-example-600x575.png\" alt=\"\" class=\"wp-image-625\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_mobile-hide-image-example-600x575.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_mobile-hide-image-example-300x288.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_mobile-hide-image-example-768x736.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_mobile-hide-image-example.png 869w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>See how the image above is not visible on a mobile size? I've circled where it appears on larger browser sizes.<\/p>\n\n\n\n<p>Now look at the bottom of the graphic where the files that are loaded are listed. That png is what's hidden.<\/p>\n\n\n\n<p>If you're just talking about a couple of kilobytes, that's no big deal.<\/p>\n\n\n\n<p>But if the hidden image is a megabyte or more, you probably shouldn't be loading that on mobile.<\/p>\n\n\n\n<p>Unfortunately, browser technology still has a way to go.<\/p>\n\n\n\n<p>To stop a hidden image loading on mobile (or any specific screen size), we need to get a little creative.<\/p>\n\n\n\n<p>Thankfully it's usually not too difficult to do in most <a href=\"https:\/\/intelliwolf.com\/resources\/page-builders\/\">page builders<\/a>.<\/p>\n\n\n\n<p><strong>How to prevent a hidden WordPress image from loading on mobile:<\/strong><\/p>\n\n\n\n<ol><li>Create an area to hold the image<\/li><li>Set the image as a background image of that area<\/li><li>Set a parent of that area to \"display: none;\" on mobile<\/li><\/ol>\n\n\n\n<p>See below for the steps in various page builders.<\/p>\n\n\n\n<ul><li><a href=\"#elementor-hidden-image\">Elementor<\/a><\/li><li><a href=\"#beaver-builder-hidden-image\">Beaver Builder<\/a><\/li><li><a href=\"#wpbakery-hidden-image\">WPBakery Page Builder<\/a><\/li><li><a href=\"#divi-hidden-image\">Divi<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"principle\">What's the principle behind preventing the downloading of a hidden image on mobile?<\/h2>\n\n\n\n<p>Ordinarily, we bring in images using the &lt;img&gt; tag. Even if the display is set to \"none\", the browser will still try to download the image.<\/p>\n\n\n\n<p>Instead, we create a box and set the image as the background.<\/p>\n\n\n\n<p>If you set a <em>parent<\/em> of that box to <em>display:&nbsp;none;<\/em> then the browser won't try to load the image.<\/p>\n\n\n\n<p>It's a bit hacky, but it's the best we've got in the circumstances.<\/p>\n\n\n\n<p>If you're doing this without a page builder, you're probably better off setting a class on the box, then responsively setting the <em>background-image<\/em> to \"none\".<\/p>\n\n\n\n<p>That's what we'll have to do in the example with Divi.<\/p>\n\n\n\n<p>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<h2 class=\"wp-block-heading\" id=\"elementor-hidden-image\">How to stop Elementor loading a hidden image on mobile<\/h2>\n\n\n\n<p>First we need to create an area to hold the image.<\/p>\n\n\n\n<p>Maybe a little counterintuitively, we're not going to use the <em>image<\/em> widget for this.<\/p>\n\n\n\n<p>We're going to use the spacer, so we can control the height of the image.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"411\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-01-600x411.png\" alt=\"\" class=\"wp-image-613\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-01-600x411.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-01-300x205.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-01-768x526.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-01.png 958w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Set the height to 300px, or whatever height you want the image to be.<\/p>\n\n\n\n<p>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<p>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<p>If the image ends up not looking right, come back to this step and adjust the height.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"535\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-02-600x535.png\" alt=\"\" class=\"wp-image-614\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-02-600x535.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-02-300x268.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-02-768x685.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-02.png 781w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Switch to the <em>Advanced<\/em> tab, open the <em>Background<\/em> accordion and click the paintbrush icon.<\/p>\n\n\n\n<p>This will open the <em>Image<\/em> block. Click that.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"600\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-04-600x600.png\" alt=\"\" class=\"wp-image-616\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-04-600x600.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-04-150x150.png 150w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-04-300x300.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-04.png 631w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Choose your image for the background.<\/p>\n\n\n\n<p>You'll return to something looking like this.<\/p>\n\n\n\n<p>Notice the image is zoomed all the way in on the right? We'll fix that next.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"474\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-05-600x474.png\" alt=\"\" class=\"wp-image-617\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-05-600x474.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-05-300x237.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-05-768x607.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-05.png 802w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Set <em>Position<\/em> to \"Centre Centre\", <em>Repeat<\/em> to \"No-Repeat\" and <em>Size<\/em> to \"Contain\".<\/p>\n\n\n\n<p>Contain 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<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"455\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-06-600x455.png\" alt=\"\" class=\"wp-image-618\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-06-600x455.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-06-300x227.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-06-768x582.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-06.png 789w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>If you want a left-aligned image, change the <em>Position<\/em> to \"Centre Left\". Change it to \"Centre Right\" for a right-aligned image.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"365\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-07-600x365.png\" alt=\"\" class=\"wp-image-619\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-07-600x365.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-07-300x182.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-07-768x467.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-07.png 879w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>The last step is to open the <em>Responsive<\/em> accordion and choose \"Hide On Mobile\". Then click \"Update\" to save.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"377\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-08-600x377.png\" alt=\"\" class=\"wp-image-620\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-08-600x377.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-08-300x188.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-08-768x482.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-08.png 903w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>On the front end, our image still loads the way we want on desktop.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"389\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-09-600x389.png\" alt=\"\" class=\"wp-image-621\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-09-600x389.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-09-300x194.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-09-768x498.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-09.png 969w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>When we switch the size to mobile and reload the page, the image is hidden from the content.<\/p>\n\n\n\n<p>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<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"600\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-10-600x600.png\" alt=\"\" class=\"wp-image-622\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-10-600x600.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-10-150x150.png 150w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-10-300x300.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-10-768x768.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-10.png 861w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>It still looks the way we want on a Tablet, and is still being loaded.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"569\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-11-600x569.png\" alt=\"\" class=\"wp-image-623\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-11-600x569.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-11-300x284.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-11-768x728.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_elementor-hide-images-11.png 923w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"beaver-builder-hidden-image\">How to stop Beaver Builder loading a hidden image on mobile<\/h2>\n\n\n\n<p>It's even easier to stop Beaver Builder loading a hidden image on mobile that we did with Elementor.<\/p>\n\n\n\n<p>This is because Beaver Builder has the ability to easily set the column height.<\/p>\n\n\n\n<p>Let's load up our columns.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"306\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-01-600x306.png\" alt=\"\" class=\"wp-image-626\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-01-600x306.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-01-300x153.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-01-768x392.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-01.png 1262w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Hover over the column where you want the image.<\/p>\n\n\n\n<p>Click <em>Edit&nbsp;Column<\/em>, then <em>Column&nbsp;Settings<\/em>.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"442\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-02-600x442.png\" alt=\"\" class=\"wp-image-627\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-02-600x442.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-02-300x221.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-02.png 603w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Set the height to 300px or whatever height you want the image to be.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"457\" height=\"600\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-03-457x600.png\" alt=\"\" class=\"wp-image-628\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-03-457x600.png 457w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-03-228x300.png 228w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-03.png 543w\" sizes=\"(max-width: 457px) 100vw, 457px\" \/><\/figure><\/div>\n\n\n\n<p>Scrolling down, set the <em>Background&nbsp;Type<\/em> to \"Photo\".<\/p>\n\n\n\n<p>Click \"Select Photo\" to choose the image.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"463\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-04.png\" alt=\"\" class=\"wp-image-629\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-04.png 432w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-04-280x300.png 280w\" sizes=\"(max-width: 432px) 100vw, 432px\" \/><\/figure><\/div>\n\n\n\n<p>You can set a different size (I did <em>Medium<\/em> for this) if it works better.<\/p>\n\n\n\n<p>Change the <em>Scale<\/em> to \"Fit\". This is the same as \"Contain\" in Elementor.<\/p>\n\n\n\n<p>The other settings you can leave as default.<\/p>\n\n\n\n<p>You might want to change the <em>Position<\/em> if you want a different alignment.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"517\" height=\"600\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-05-517x600.png\" alt=\"\" class=\"wp-image-630\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-05-517x600.png 517w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-05-259x300.png 259w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-05.png 663w\" sizes=\"(max-width: 517px) 100vw, 517px\" \/><\/figure><\/div>\n\n\n\n<p>Switch to the <em>Advanced<\/em> tab then under <em>Visibility<\/em>, set the <em>Breakpoint<\/em> to \"Large &amp; Medium Devices Only\". This will hide the image from mobile browsers.<\/p>\n\n\n\n<p>Be sure to save the page.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"600\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-06-570x600.png\" alt=\"\" class=\"wp-image-631\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-06-570x600.png 570w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-06-285x300.png 285w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-06.png 679w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/figure><\/div>\n\n\n\n<p>The image loads as expected on Desktop.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"580\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-07-600x580.png\" alt=\"\" class=\"wp-image-632\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-07-600x580.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-07-300x290.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-07-768x743.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-07.png 853w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>The image is hidden from the content on mobile. The image is no longer loaded in the browser.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"559\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-08-600x559.png\" alt=\"\" class=\"wp-image-633\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-08-600x559.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-08-300x279.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-08-768x715.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_bb-hide-images-08.png 885w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wpbakery-hidden-image\">How to stop WPBakery Page Builder loading a hidden image on mobile<\/h2>\n\n\n\n<p>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<p>We'll start by adding a Row.<\/p>\n\n\n\n<p>Click \"Add Element\".<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"401\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-01-600x401.png\" alt=\"\" class=\"wp-image-636\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-01-600x401.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-01-300x201.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-01-768x514.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-01.png 1263w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Select <em>Row<\/em>.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"485\" height=\"373\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-02.png\" alt=\"\" class=\"wp-image-637\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-02.png 485w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-02-300x231.png 300w\" sizes=\"(max-width: 485px) 100vw, 485px\" \/><\/figure><\/div>\n\n\n\n<p>I'll change the <em>Row&nbsp;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<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"311\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-03-600x311.png\" alt=\"\" class=\"wp-image-638\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-03-600x311.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-03-300x155.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-03-768x397.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-03.png 1113w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Click the grey \"plus\" button to add an element inside one of the columns.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"515\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-04-600x515.png\" alt=\"\" class=\"wp-image-639\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-04-600x515.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-04-300x258.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-04.png 623w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>We're looking for the <em>Empty&nbsp;Space<\/em> element. You can find it under <em>All<\/em> or under <em>Content<\/em>.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"500\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-05-600x500.png\" alt=\"\" class=\"wp-image-640\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-05-600x500.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-05-300x250.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-05.png 764w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Set the height to 300px. This will be the height of the image in your design.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"394\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-07-600x394.png\" alt=\"\" class=\"wp-image-641\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-07-600x394.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-07-300x197.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-07-768x505.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-07.png 1012w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Choose the <em>Design&nbsp;Options<\/em> tab, then click the box for background images.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"600\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-08-548x600.png\" alt=\"\" class=\"wp-image-642\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-08-548x600.png 548w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-08-274x300.png 274w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-08.png 667w\" sizes=\"(max-width: 548px) 100vw, 548px\" \/><\/figure><\/div>\n\n\n\n<p>Once you've chosen your image, change the background from \"Theme defaults\" to \"Contain\".<\/p>\n\n\n\n<p>Save changes and close the popup.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"487\" height=\"600\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-09-487x600.png\" alt=\"\" class=\"wp-image-643\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-09-487x600.png 487w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-09-244x300.png 244w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-09.png 558w\" sizes=\"(max-width: 487px) 100vw, 487px\" \/><\/figure><\/div>\n\n\n\n<p>Hover over the image and click the pencil icon next to <em>Columns<\/em> to bring up <em>Column&nbsp;Settings<\/em>.<\/p>\n\n\n\n<p>Switch to the <em>Responsive&nbsp;Options<\/em> tab, then check the box for <em>Hide&nbsp;on&nbsp;device<\/em> for mobile. You can hide it on other sizes too if you need.<\/p>\n\n\n\n<p>Save changes, then update the page.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"405\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-10-600x405.png\" alt=\"\" class=\"wp-image-644\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-10-600x405.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-10-300x203.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-10-768x518.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-10.png 1200w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>If you go to the page, you'll see the image looking as it should.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"553\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-12-600x553.png\" alt=\"\" class=\"wp-image-646\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-12-600x553.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-12-300x276.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-12-768x708.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-12.png 890w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>The image will be hidden on mobile and the browser will no longer load the image.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"566\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-11-600x566.png\" alt=\"\" class=\"wp-image-645\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-11-600x566.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-11-300x283.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-11-768x725.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_wpbakery-hide-images-11.png 885w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"divi-hidden-image\">How to stop Divi loading a hidden image on mobile<\/h2>\n\n\n\n<p>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<p>The problem is that Divi applies the responsive hiding to the same <em>div<\/em> as it applies the background image.<\/p>\n\n\n\n<p>We still have to use a <em>Divider<\/em> module, rather than an <em>Image<\/em> module.<\/p>\n\n\n\n<p>Read more about what we're doing and why in Principles, <a href=\"#principles\">above<\/a>.<\/p>\n\n\n\n<p>Start by inserting a two-column row.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"298\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-01-600x298.png\" alt=\"\" class=\"wp-image-648\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-01-600x298.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-01-300x149.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-01-768x381.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-01.png 1091w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Insert a <em>Divider<\/em> module.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"569\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-02-600x569.png\" alt=\"\" class=\"wp-image-649\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-02-600x569.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-02-300x285.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-02.png 688w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Turn the divider line off by switching <em>Show&nbsp;Divider<\/em> to \"NO\".<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"592\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-03-600x592.png\" alt=\"\" class=\"wp-image-650\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-03-600x592.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-03-300x296.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-03.png 662w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Open the <em>Background<\/em> tab, choose the <em>image<\/em> background and click the <em>plus<\/em> icon to add a background image.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"600\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-04-430x600.png\" alt=\"\" class=\"wp-image-651\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-04-430x600.png 430w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-04-215x300.png 215w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-04.png 584w\" sizes=\"(max-width: 430px) 100vw, 430px\" \/><\/figure><\/div>\n\n\n\n<p>Once you have your background image, change the <em>Background&nbsp;Image&nbsp;Size<\/em> to \"Fit\". Otherwise it will look strange like in the circled section.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"552\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-05-600x552.png\" alt=\"\" class=\"wp-image-652\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-05-600x552.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-05-300x276.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-05-768x706.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-05.png 983w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Still in the <em>Divider&nbsp;Settings<\/em>, switch to the <em>Design<\/em> tab and change the <em>Height<\/em> to 300px.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"383\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-06-600x383.png\" alt=\"\" class=\"wp-image-653\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-06-600x383.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-06-300x192.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-06-768x490.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-06.png 1012w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Switch to the <em>Advanced<\/em> tab and add a class for your hidden images in <em>CSS&nbsp;Class<\/em>.<\/p>\n\n\n\n<p>I've used \"iw-hidden-image\", but you can use anything that's not otherwise in use on your site.<\/p>\n\n\n\n<p>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<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"399\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-07-600x399.png\" alt=\"\" class=\"wp-image-654\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-07-600x399.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-07-300x199.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-07-768x511.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-07.png 997w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Still on the <em>Advanced<\/em> tab, open the <em>Visibility<\/em> accordion.<\/p>\n\n\n\n<p>Check <em>Disable&nbsp;on&nbsp;Phone<\/em>.<\/p>\n\n\n\n<p>Save the settings and the page.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"600\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-08-479x600.png\" alt=\"\" class=\"wp-image-655\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-08-479x600.png 479w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-08-239x300.png 239w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-08.png 720w\" sizes=\"(max-width: 479px) 100vw, 479px\" \/><\/figure><\/div>\n\n\n\n<p>This is where the steps for Divi diverge from the other examples.<\/p>\n\n\n\n<p>If you pull up the page on mobile, the image isn't displayed, but it's still being loaded.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"569\" height=\"600\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-09-569x600.png\" alt=\"\" class=\"wp-image-656\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-09-569x600.png 569w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-09-284x300.png 284w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-09-768x810.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-09.png 818w\" sizes=\"(max-width: 569px) 100vw, 569px\" \/><\/figure><\/div>\n\n\n\n<p>To fix this, we'll need to add some custom CSS to Divi.<\/p>\n\n\n\n<p>In the WordPress Admin area, go to <em>Divi&nbsp;-&gt;&nbsp;Theme&nbsp;Options<\/em>.<\/p>\n\n\n\n<p>Scroll all the way to the bottom of the <em>General<\/em> tab (which should be automatically selected) until you see <em>Custom&nbsp;CSS<\/em>.<\/p>\n\n\n\n<p>In the Custom CSS box, add this code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media only screen and (max-width: 767px) {\n  .iw-hidden-image {\n    background-image: none !important;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Change <em>.iw-hidden-image<\/em> to the class you chose for the <em>Divider<\/em> above. Make sure to add the period at the start.<\/p>\n\n\n\n<p>What this does is forcibly remove the background image on screens 767px wide or less.<\/p>\n\n\n\n<p>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<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"329\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-10-600x329.png\" alt=\"\" class=\"wp-image-657\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-10-600x329.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-10-300x165.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-10-768x422.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-10.png 1177w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>Now when we pull up the page on mobile, the image is no longer loaded.<\/p>\n\n\n\n<div class=\"wp-block-image shadow\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"595\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-11-600x595.png\" alt=\"\" class=\"wp-image-658\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-11-600x595.png 600w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-11-150x150.png 150w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-11-300x298.png 300w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-11-768x762.png 768w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-11.png 892w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>But it's still displaying correctly on desktop.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"600\" src=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-12-542x600.png\" alt=\"\" class=\"wp-image-660\" srcset=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-12-542x600.png 542w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-12-271x300.png 271w, https:\/\/www.intelliwolf.com\/wp-content\/uploads\/2019-02-12_divi-hide-images-12.png 743w\" sizes=\"(max-width: 542px) 100vw, 542px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>One of our readers commented on the tutorial about responsively hiding elements in Elementor raising a great question: what if you don&#8217;t just want the element to be hidden &#8211; what if you wanted to prevent an image from even loading on mobile. With most methods of hiding elements for mobile, you&#8217;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<title>How To Stop A Hidden WordPress Image Loading On Mobile (Elementor, Divi, Beaver Builder, WPBakery)<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Stop A Hidden WordPress Image Loading On Mobile (Elementor, Divi, Beaver Builder, WPBakery)\" \/>\n<meta property=\"og:description\" content=\"One of our readers commented on the tutorial about responsively hiding elements in Elementor raising a great question: what if you don&#039;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&#039;re just assigning this\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/\" \/>\n<meta property=\"og:site_name\" content=\"Intelliwolf\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-12T06:56:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-27T06:19:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/stop-hidden-image-loading-in-wordpress.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mike Haydon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Haydon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/\"},\"author\":{\"name\":\"Mike Haydon\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343\"},\"headline\":\"How To Stop A Hidden WordPress Image Loading On Mobile\",\"datePublished\":\"2019-02-12T06:56:54+00:00\",\"dateModified\":\"2019-08-27T06:19:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/\"},\"wordCount\":1628,\"commentCount\":18,\"publisher\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/stop-hidden-image-loading-in-wordpress.png\",\"articleSection\":[\"Page Builders\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/\",\"url\":\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/\",\"name\":\"How To Stop A Hidden WordPress Image Loading On Mobile (Elementor, Divi, Beaver Builder, WPBakery)\",\"isPartOf\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/stop-hidden-image-loading-in-wordpress.png\",\"datePublished\":\"2019-02-12T06:56:54+00:00\",\"dateModified\":\"2019-08-27T06:19:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#primaryimage\",\"url\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/stop-hidden-image-loading-in-wordpress.png\",\"contentUrl\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/stop-hidden-image-loading-in-wordpress.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.intelliwolf.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Page Builders\",\"item\":\"https:\/\/www.intelliwolf.com\/category\/page-builders\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Stop A Hidden WordPress Image Loading On Mobile\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.intelliwolf.com\/#website\",\"url\":\"https:\/\/www.intelliwolf.com\/\",\"name\":\"Intelliwolf\",\"description\":\"WordPress, Web Design &amp; Coding Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.intelliwolf.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\",\"name\":\"Intelliwolf\",\"url\":\"https:\/\/www.intelliwolf.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png\",\"contentUrl\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png\",\"width\":300,\"height\":100,\"caption\":\"Intelliwolf\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343\",\"name\":\"Mike Haydon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g\",\"caption\":\"Mike Haydon\"},\"sameAs\":[\"https:\/\/intelliwolf.com\/about-mike-haydon\/\"]}]}<\/script>\n","yoast_head_json":{"title":"How To Stop A Hidden WordPress Image Loading On Mobile (Elementor, Divi, Beaver Builder, WPBakery)","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/","og_locale":"en_US","og_type":"article","og_title":"How To Stop A Hidden WordPress Image Loading On Mobile (Elementor, Divi, Beaver Builder, WPBakery)","og_description":"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","og_url":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/","og_site_name":"Intelliwolf","article_published_time":"2019-02-12T06:56:54+00:00","article_modified_time":"2019-08-27T06:19:33+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/stop-hidden-image-loading-in-wordpress.png","type":"image\/png"}],"author":"Mike Haydon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mike Haydon","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#article","isPartOf":{"@id":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/"},"author":{"name":"Mike Haydon","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343"},"headline":"How To Stop A Hidden WordPress Image Loading On Mobile","datePublished":"2019-02-12T06:56:54+00:00","dateModified":"2019-08-27T06:19:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/"},"wordCount":1628,"commentCount":18,"publisher":{"@id":"https:\/\/www.intelliwolf.com\/#organization"},"image":{"@id":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#primaryimage"},"thumbnailUrl":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/stop-hidden-image-loading-in-wordpress.png","articleSection":["Page Builders"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/","url":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/","name":"How To Stop A Hidden WordPress Image Loading On Mobile (Elementor, Divi, Beaver Builder, WPBakery)","isPartOf":{"@id":"https:\/\/www.intelliwolf.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#primaryimage"},"image":{"@id":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#primaryimage"},"thumbnailUrl":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/stop-hidden-image-loading-in-wordpress.png","datePublished":"2019-02-12T06:56:54+00:00","dateModified":"2019-08-27T06:19:33+00:00","breadcrumb":{"@id":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#primaryimage","url":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/stop-hidden-image-loading-in-wordpress.png","contentUrl":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/stop-hidden-image-loading-in-wordpress.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.intelliwolf.com\/stop-hidden-wordpress-image-loading-on-mobile\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.intelliwolf.com\/"},{"@type":"ListItem","position":2,"name":"Page Builders","item":"https:\/\/www.intelliwolf.com\/category\/page-builders\/"},{"@type":"ListItem","position":3,"name":"How To Stop A Hidden WordPress Image Loading On Mobile"}]},{"@type":"WebSite","@id":"https:\/\/www.intelliwolf.com\/#website","url":"https:\/\/www.intelliwolf.com\/","name":"Intelliwolf","description":"WordPress, Web Design &amp; Coding Tutorials","publisher":{"@id":"https:\/\/www.intelliwolf.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.intelliwolf.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.intelliwolf.com\/#organization","name":"Intelliwolf","url":"https:\/\/www.intelliwolf.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png","contentUrl":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png","width":300,"height":100,"caption":"Intelliwolf"},"image":{"@id":"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343","name":"Mike Haydon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g","caption":"Mike Haydon"},"sameAs":["https:\/\/intelliwolf.com\/about-mike-haydon\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts\/609"}],"collection":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/comments?post=609"}],"version-history":[{"count":0,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts\/609\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/media\/664"}],"wp:attachment":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/media?parent=609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/categories?post=609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/tags?post=609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}