Menu
Hi!
I am optimizing our site by adding AVIF and WEBP versions of our images. Things are going well but there is something that is puzzling me and I have no idea what is causing it. One of the DIVs of our home page has a background image and I resolved it this way:
**HTML:
`<div id=”searchbox” style=”–aspect-ratio: 16/9;background-size: cover; max-width:1132px;” class=”searchboxbg” ></div>
**CSS:
“`
.searchboxbg {
background-image: -webkit-image-set(url(/skins/default/images/tile_main_no_plate.avif) 1x, url(/skins/default/images/tile_main_no_plate.webp) 1x, url(/skins/default/images/tile_main_no_plate.jpg) 1x);
}
When I test it in Chrome using the “desktop mode” everything works fine and it loads the image version AVIF for the background of the DIV (that’s the expected). However if I test it in “mobile mode” (F12 and then ctrl-shift-M to toggle mobile) it will ALWAYS skip AVIF and WEBP and load the JPG.
For testing purposes I made the following change in my CSS:
**CSS:
“`
/* forcing AVIF format */
.searchboxbg {
background-image: url(/skins/default/images/tile_main_no_plate.avif);
}
Doing this it DOES load the AVIF file no problem in mobile so the problem is not with the formats.
Does anyone know what may be causing it (and of course how to fix it)?
Thanks in advance!