Archived topic
Loading different page hero background images for desktop and mobile
3 replies · Started by Bernhard on November 2, 2021
Hello,
I use a css like this to define different page hero background images on desktop and mobile.
@media (max-width: 768px) {
.page-hero {
background-image: url( 'https://test.tourist-in-rom.com/wp-content/uploads/2020/06/Tourist-in-Rom-Piazza-del-Popolo-100518-300x154.jpg' ) !important;It was suggested to me here and as far as I remember, it worked.
Now I detected, that on mobile are two images loaded, Tourist-in-Rom-Piazza-del-Popolo-100518-300x154.jpg and the bigger version Tourist-in-Rom-Piazza-del-Popolo-100518.jpg
I'm wondering why this happens. Has something changed in GPP or did I miss that before?
Hi there,
Not sure if I understand the question.
I just viewed the linked page and the correct (mobile image with CSS) is indeed loading:
https://www.screencast.com/t/28F5Mhck
Hi Leo,
in the waterfall I see two images loading for mobile.
Item 31. Tourist-in-Rom-Piazza-del-Popolo-100518.jpg (the large file for desktop)
Item 38. Tourist-in-Rom-Piazza-del-Popolo-100518-300×154.jpg (the version for mobile)
How can I suppress the loading of the large image?
That is the way the CSS code works unfortunately.
The original image is still loaded - and the mobile CSS code overwrites the desktop image.
The best solution is to use an image that works in both mobile and desktop.
