[Resolved] Loading different page hero background images for desktop and mobile

[Bernhard]

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-300×154.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?

[Leo]

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

[Bernhard]

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?

[Leo]

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.

[Author]

Posts