Why Do All Advertisement Images Load

[Chris027]

I'm using the built-in advertisements now and noticed that all three versions of an ad are pulled down even when only one size is shown. In the screenshot below you can see the Large, Medium, and Small images are pulled form the server. This increases  load time for no apparent reason. Google page speed also says these are off screen images that should lazy load. 

Question: Is this normal that all three sizes load when only one is shown?

Question: Wouldn't is be better to just load the largest one and resize it with CSS because it's going to load anyway?

 

[Bluto]

It's probably going to need the smaller image when someone is viewing the site on smaller devices.

[Chris027]

1 minute ago, Bluto said:

It's probably going to need the smaller image when someone is viewing the site on smaller devices.

It certainly shows the right sized image for each size device, but I don't get why it has to download all sizes to each client device when it only shows one. When viewed on mobile, it shows the Small banner, but downloads and hides the Large and Medium banners. This is a hit to bandwidth and speed.

I also noticed that a block I use in the sidebar using both ipsResponsive_hidePhone and ipsResponsive_hideTablet, downloads to all mobile and tablet clients, but it just doesn't display on those devices. For some reason I thought these classes meant the blocks and files weren't even downloaded. Thus, saving bandwidth and speeding up the load time.

[Bluto]

The script doesn't think.  Meaning, it's not going... this guys on a mobile device let's only download the small image. 

What if I expand my desktop browser to really large or shrink it down small?  Does the page reload every time I make my page smaller or larger so it can download the correct image?  No it doesn't because that would take even more time.

 

[Chris027]

3 minutes ago, Bluto said:

The script doesn't think.  Meaning, it's not going... this guys on a mobile device let's only download the small image. 

What if I expand my desktop browser to really large or shrink it down small?  Does the page reload every time I make my page smaller or larger so it can download the correct image?  No it doesn't because that would take even more time.

 

I certainly hear you, but resize events are few and far between compared to downloading all images on every page load. 

I guess I can dream for a smart script like Google Ad Manager that only send the single ad for a specific device. 

[Chris027]

I'm trying a workaround. 

I added some images to a block and I'm using data-ipsLazyLoad etc... to never have them load on mobile. Because the block is hidden with ipsResponsive_hidePhone ipsResponsive_hideTablet, the lazyloading images never load. It works great, but I would have to do all my advertisements as HTML to make this work with those. 

[Chris027]

OK, so I just thought of something that it seems like IPS should've done for its coding of advertisements. 

If it put a class of data-ipsLazyLoad and used something like this <img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src="/images/image.png" alt="image">, then the only banner that would be downloaded is the banner that's the correct size because the advertisements code already has the screen size built into it with ipsResponsive_showDesktop etc... The hidden banners would never load because they are hidden.

 

[Chris027]

Hi @Rikki, does this sound reasonable ^

[Rikki]

On the face of it that should work, yes.

[The Old Man]

Hi guys,

I was actually looking into this yesterday, not to do with ads though that's a worthy requirement, but because I thinking it would be nice to resolve the issue of larger user profile photos being resized in CSS. I found some interesting articles on the idea of giving the user's browser the choice of different sized images and letting it choose the most suitable one by using srcset and img-set, to get around the issue of images starting to load whilst the CSS and JS loads, so the information needed to choose the image isn't available to prevent all images downloading as the OP noticed above.

Browser support has obviously improved since 2015 but Firefox seems to be lagging behind on imgset, which is a bit odd because it a Mozilla article that led me to these evangelist's articles in the first place!

if you fancy a read for some inspiration, Jason Grigsby has a great 10 page article here:

https://cloudfour.com/thinks/responsive-images-101-part-8-css-images/

CSS Tricks

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Mozilla's article that linked to them:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Combining lazyload with the concept of letting the browser choose the image to download sounds like a good solution. 

 

 

[bfarber]

The problem then becomes creating and storing multiple different size copies of every user's profile photo. Each different size would need to be cached by the browser separately (and thus transferred to the browser separately via HTTP), so you can end up consuming more bandwidth and using more storage space.

There's a very real balance to maintain.