There is a block with large pictures that are not needed on the mobile at all. If you hide through @media .nomob{display:none} , then the pictures will still eat traffic.

I understand that a JS script will help here with comparing the screen size:

  function screen_check(){ if ($(window).width() <= 992) { $('.nomob').?????????; } ; } screen_check(); $(window).on('resize', function(){ screen_check(); });

Please no jQuery.

    3 answers 3

    It is better to determine the device on the server by User-Agent: in Headers . And depending on the device, send a mobile or desktop version. Then you don't need to load the front-end unnecessary scripts.

    The behavior here will depend on the browser, in most browsers the images are hidden display: none pre-loaded, as well as specifying the media query (both in the CSS file and in <link rel="stylesheet" media='screen and (min-width: Xpx)... ). The only scenario in which the image is not loaded: this is a hidden parent element, where the children are set as backgrounds . So if you want to do with CSS, replace the images with blocks with a background.

      Another option: You can use the <picture> element, but it is not yet supported by all browsers.

      An example for a border of 1024 pixels of display area width:

      css: hide div with image

       @media only screen and (max-width: 1024px) { #n2 { display: none; } }

      html: in the source media query shows a large image with a display area width of 1025 pixels or more, otherwise a small image (preview) is shown from the img , which is not visible due to the css rule.

       <div id="n1"> <img src="http://jpegshare.net/thumbs/fc/39/fc390b2cebab53f54a4d41e5145a7322.jpg"> </div> <div id="n2"> <picture> <source media="(min-width: 1025px)" srcset="http://jpegshare.net/images/fc/39/fc390b2cebab53f54a4d41e5145a7322.png"> <img src="http://jpegshare.net/thumbs/fc/39/fc390b2cebab53f54a4d41e5145a7322.jpg"> </picture> </div>

      PS In browsers that do not support <picture> , only previews will be shown.

      • one
        <picture> with srcset is a balm for the souls of the front. - romeo