How to provide webp, jp2 and other image formats in a style tag?

Question

Actually I'm using something like (very easy html):

<picture>
  <source srcset="img/image.webp" type="image/webp">
  <source srcset="img/image.jp2" type="image/jp2"> 
  <img src="img/image.jpg" alt="Alt Text!">
</picture>

to deliver for best SEO results the images to the users. If I have parts on the site like:

<div class="myclass" style="background-image: url(img/image.jpg)"></div>

How can I do it there?

Answer 1

As far as I know you have to use javascript then and some css. On my websites I use JQuery. Below a example on how I do it on my websites.

<style>
        .myclass {
            background-position: center;
            background-size: 100%;
            background-repeat: no-repeat;
            overflow: hidden;
            background-color: #222222;
        }
        /* Hide the image so only the background image will be vissible */
        .myclass img {
            opacity: 0;
        }
    </style>

    <div class="myclass">
        <picture>
            <source srcset="img/image.webp" type="image/webp">
            <source srcset="img/image.jp2" type="image/jp2">
            <img src="img/image.jpg" alt="Alt Text!">
        </picture>
    </div>

    <script>

        function setBackgroundIMG() {
            var $imgSection = $('.myclass');

            // Loop through all the myclass elements
            $imgSection.each(function () {
                // Find the image tag within the myclass
                var $img = $(this).find('img');

                // Get the image the browser will use in the picture tag
                var $srcSet = $img.prop('currentSrc') || $img.prop('src');

                // For debug purpose
                console.log($srcSet);

                // Set the myclass background 
                $(this).css({
                    'background-image': 'url(' + $srcSet + ')'
                });

            });
        }

        $(window).on('load resize', function () {
            setBackgroundIMG();
        });
    </script>

You can also add multiple sizes to the srcset like below, so smaller images will be used on smaller screens.

   <div class="img-container" style="">
        <picture>
            <source type="image/webp" srcset="views/images/200/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 200w, views/images/400/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 400w, views/images/500/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 500w, views/images/600/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 600w, views/images/767/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 767w, views/images/991/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 991w, views/images/1200/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 1200w, views/images/1500/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 1500w, views/images/1920/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 1920w, views/images/2400/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 2400w">
            <source srcset="views/images/200/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 200w, views/images/400/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 400w, views/images/500/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 500w, views/images/600/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 600w, views/images/767/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 767w, views/images/991/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 991w, views/images/1200/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 1200w, views/images/1500/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 1500w, views/images/1920/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 1920w, views/images/2400/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 2400w">
            <img src="views/images/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg" alt="" class="img-fluid"></picture>
    </div>