9

I have started using webp images in my site with <picture> tag. all set except this

<section class="sec-bg" style="background: url('images/bg.jpg');">

I don't know, how to set the different background image format (png and webp) of the same image. please give a solution for this inline CSS in the section tag.

for other images, I'm using below code

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>
manoj v
  • 91
  • 1
  • 2
  • [This CSS tricks article](https://css-tricks.com/using-webp-images/#using-webp-images-in-css) suggests using [Modernizr](https://modernizr.com) to get either CSS class `webp` or `no-webp` added automatically to `html` element. Then you can style your elements like `.webp { ... url for webp }` and `.no-webp { ... url for png/jpg }`. – rslemos Dec 08 '20 at 22:25

4 Answers4

2

I would suggest you to use JS to handle that issue. For example you can find all elements with background or background-image style on a page and after that just replace your webp image to jpeg version. So your script will look like:

document.deepCss= function(who, css){
  if(!who || !who.style) return '';
  var sty= css.replace(/\-([a-z])/g, function(a, b){
    return b.toUpperCase();
  });
  if(who.currentStyle){
    return who.style[sty] || who.currentStyle[sty] || '';
  }
  var dv= document.defaultView || window;
  return who.style[sty] ||
      dv.getComputedStyle(who,"").getPropertyValue(css) || '';
};
var elms = document.getElementsByTagName('*');
for (var i=0;i<elms.length;i++) {
  var url = document.deepCss(elms[i], 'background-image');
  if (url) {
    url=/url\(['"]?([^")]+)/.exec(url);

    if (url && url[1]) {
      elms[i].style.backgroundImage = "url("+url.replace('.webp', '.jpeg')+")"
    }
  }
}

It would be much easier for you to store the same image in two formats with the same name, for example test.jepg and test.webp, in this case you can just replace image extension by using the script which I provided above.

Sergey Bondarenko
  • 82
  • 9
2

we can use image-set attr

.box {
  background-image: -webkit-image-set(
    url("large-balloons.avif") type("image/avif"),
    url("large-balloons.jpg") type("image/jpeg"));
  background-image: image-set(
    url("large-balloons.avif") type("image/avif"),
    url("large-balloons.jpg") type("image/jpeg"));
}

refer to it https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set#using_image-set_to_provide_alternative_image_formats

Badman37
  • 49
  • 3
1

If you don't want to use JavaScript to serve formats specific to the client consider using the <picture> tag with both sources and using CSS and position: absolute and z-index: -1 to push the image into the background.

To expand your example, here's how it would work:

HTML

<div class="sec-bg">
  <div class="sec-bg__image">
    <picture>
      <source srcset="img/awesomeWebPImage.webp" type="image/webp">
      <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
      <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
    </picture> 
  </div>
 
  <div class="sec-bg__content">
    <p>Your section content goes here!</p>
  </div>
</div>

CSS

.sec-bg
{
  position: relative;
  z-index: 0;
}

.sec-bg__image
{
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-indez: -1;
}
Maria LeRoux
  • 11
  • 2
-3

Have you tried the CSS rule below ?

background-image: url('img/image1.webp'), url('img/image1.jpg');

Considering that both images are the same, the second one will be used if the first one doesn't exist. This way, it acts like a "fallback image".

An inline solution can be 

<section class="sec-bg" style="background-image: url('img/image1.webp'), url('img/image1.jpg');">
Alex Mougenet
  • 213
  • 3
  • 20