Как предоставить webp, jp2 и другие форматы изображений в теге стиля? - PullRequest
Новая
       15

Как предоставить webp, jp2 и другие форматы изображений в теге стиля?

0 голосов
/ 18 мая 2019

На самом деле я использую что-то вроде (очень простой 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>

Как я могу сделать это там?

1 Ответ

0 голосов
/ 22 мая 2019

Насколько я знаю, вы должны использовать 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>
...