html - 如何在style标签中提供webp、jp2等图片格式？

Question

实际上我正在使用类似的东西(非常简单的 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>

为用户提供最佳 SEO 结果图像。如果我在网站上有这样的部分:

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

我该怎么做？

Answer 1

据我所知，您必须使用 javascript 和一些 css。在我的网站上，我使用 JQuery。下面是我如何在我的网站上执行此操作的示例。

<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>

您还可以向 srcset 添加多个尺寸，如下所示，因此较小的图像将在较小的屏幕上使用。

   <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>