Hi, what is the best way to describe this and category? make a really small served image size for images | Webflow Wishlist
Thoughts?
Best,
Nathan
thatās not how media queries for responsive images workā¦ that means to do this Webflow will need to implement custom code.
@samliew I understand that is not how media queries perspectiveā¦I still did not get the answer I was looking for is specific wording on how to best state what I am specifically Iām trying to say such that Webflow understands what I am trying to say and others on the forum see the value.
Iām not sure what yourāre point is about āwebflow will need to implement customer codeāā¦so what?..theyāve got custom code all over the place. Iām not sure media queries have to do with anythingā¦if itās doable, then itās doable.
How do I state it in such a way Webflow sees the value in the custom code and has enough go with which understand it is I am saying? Like many people on here I understand some basic concepts and have learned a lot using Webflow, but I am not a developer
If they were to implement such a feature, it would benefit the website owner (SEO) and the end user (UZ) due to a decrease page load timeā¦the juice is definitely worth the squeeze on this feature.
I think it should be as simple as this:
<script>
$('img:hidden').attr('src', '');
</script>
This will unset the source attribute if the image is hidden.
This will make an actual image to not be loaded if it is hidden, saving traffic. At least thatās what I think it does.
1 Like
to all images that are hidden. If you hide the div, for example, that contains the image, it wonāt work I guess.
edit: basically what this code does is injecting empty space where image source is, effectively making it not point anywhere, hence nothing is loaded.
No, it does work.
See :hidden Selector | jQuery API Documentation
An element is assumed to be hidden if it or any of its parents consumes no space in the document.
1 Like
Thatās awesome then!
edit: one caveat is that if the hidden object is hidden dynamically (with interaction for example), it will stay hidden even if you āunhideā it 
Hmmā¦I think weāre on the right path @samilem and @dram with a few things to think about. On the iPad, normal website width is used and on the portrait, the iPad view is usedā¦Iāve tested it first hand. So what that means is that if one opens the website in portrait view and then turns it, then one wouldnāt see the image.
Also, I do have some interactions that on display none initially before loading based on certain actions. I suppose I could re-engineer/rework those, but Iād rather not if it can be helped.
Ideally, it would be awesome to not have the images be requested on the mobile portrait and landscape views while also allowing it to be pulled the images from the iPad view even though they arenāt being shown, and allow for display non-interactions. The display non-interactions can be worked around I guess. Anyway it would be cool if I could find a way to have my cake and eat it too 
I really appreciate the help @samliew
Best,
Nathan
I implemented it, but I I donāt think itās working. When I load the page on a very collapsed browser view like that of a mobile phone and then expand the browser, I am still able to to see the images that were hidden at mobile. If it was truly working, would I not be able to see the images when I expand the window since the images should have never been called during that more condensed view? @samliew @dram
Best,
Nathan
It works for me though. You need to put the script into the āBefore </body> tagā section of the custom code.
Yeah custom code always goes at the bottom.