Archived topic
Does hide-on-mobile prevent an image from loading on a phone?
3 replies · Started by Bandara on April 22, 2021
Hello! I read the instructions here https://docs.generatepress.com/article/responsive-display/ but all the searching I do doesn't confirm if using hide-on-mobile will actually prevent the image from downloading to the device.
I'm using a large hero image on desktop (it's as small as I can get) but I was hoping to not load it at all on mobile. Will adding the hide-on-mobile prevent it from downloading? Right now I have the large version of the image classed as hide-on-mobile, hide-on-tablet and the smaller image classed as hide-on-desktop. As far as displaying the proper image, everything works fine.
Is there a better way to get the result I want? Or is this a browser specific thing? I'm guessing that all these websites with huge hero images must be doing something to speed up on mobile.
Hi there,
Will adding the hide-on-mobile prevent it from downloading?
No, It still loads but hide-on-mobile only does simple display:none; to specific viewports.
Is there a better way to get the result I want? Or is this a browser specific thing? I’m guessing that all these websites with huge hero images must be doing something to speed up on mobile.
Use image optimization plugins to improve how the image is served.
Thanks!
No problem. :)
