1485 sujets

Web Mobile et responsive web design

[Résolu] Bg image

bonjour,
en html, on peut, en utilisant la balise picture, placer une img webp avec une img de secours en jpg

        <picture>
            <source srcset="image.webp" type="image/webp">
            <source srcset="image.jpg" type="image/jpg">
                      <img src="image.jpg">
        </picture>


est-t'il possible ou pas de faire la même chose (webp+jpg) sur une bg-img css ?

.div {
background-image:url(image.webp)
}
Bonsoir. A priori, non. Mais : le webP étant assez récent, il faudrait trouver une règle CSS supportée récemment par les navigateurs et de manière concomitante à webP. En passant cette règle comme paramètre pour @supports on pourrait imaginer ainsi une règle conditionnelle pour le nouveau background...
.el {
  background-image: url(image.webp);
}

@supports not (display: grid) {
  .el {
    background-image: url(image.jpg);
  }
}

Modifié par Olivier C (03 Jan 2023 - 08:14)
Modérateur
Bonsoir,

Il y a aussi la méthode brute en passant les deux images en paramètres :
.div {
background-image:url(image.webp), url(image.jpg);
}


Si le webp ne s'affiche pas, l'autre sera vue, mais du coup, les deux seront chargées.

En jetant un œil sur https://caniuse.com/webp , on s'aperçoit que peu de navigateurs seraient concernés. Un compromis serait de mettre un jpg de qualité bien moindre en tant qu'image par défaut pour ces quelques navigateurs qui ne sauront pas afficher le webp, au pire, une couleur de fond pour marqué cet espace.

Cdt
Modifié par gcyrillus (02 Jan 2023 - 22:21)
Meilleure solution
Modérateur
Du coup tu as coché '[Résolu] ', mais quelle approche as tu choisie, mise en application ? Smiley smile
bah oui, on est curieux, reste tu sur un jpg progressif pour tous ou un webP + jpg mediocre a défaut?
Modifié par gcyrillus (02 Jan 2023 - 22:26)
ben ta solution de 2 images en bg avec un jpg léger mais acceptable est sympa.
je vais tester çà.
Modifié par drphilgood (04 Jan 2023 - 14:32)
merci g cyrillus, youpi çà fonctionne avec


background-image:url(image.webp), url(image.jpg);


et le webp est bien superposé au jpg.
Modifié par drphilgood (04 Jan 2023 - 15:25)
Prévenir un modérateur
Répondre au sujet
Aller à