Dev Comms Lead at @Catchpoint, working on @RealWebPageTest™.
Toronto Web Performance, JAMstack TORONTO curator.
Conference speaker, consultant and organizer.
#DevsWhoRun.
As Julien mentioned, this could be tricky. Last I recall, you can / should be able to have multiple background images in css. So I would possible try listing the image URLs w/ the webp 1st, and jpg 2nd as a fall back. I would check on that to make sure but I believe that should work as long as you have format support. But there are some issues here. You have a potentially unnecessary request. In Julien's case, if you're using JS to swap, which is more JS to detect + swap just 1 image. Also, something potentially worth considering, if you're really after a small size: depending on how sharp you want to the bg image, you can add a super slight blur to a jpg image, and by design, the jpg will drop in size (jpg property).
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
As Julien mentioned, this could be tricky. Last I recall, you can / should be able to have multiple background images in css. So I would possible try listing the image URLs w/ the webp 1st, and jpg 2nd as a fall back. I would check on that to make sure but I believe that should work as long as you have format support. But there are some issues here. You have a potentially unnecessary request. In Julien's case, if you're using JS to swap, which is more JS to detect + swap just 1 image. Also, something potentially worth considering, if you're really after a small size: depending on how sharp you want to the bg image, you can add a super slight blur to a jpg image, and by design, the jpg will drop in size (jpg property).