If you want a big graphic to appear only on desktop PCs, you could just put that on the page and set VISIBILITY to LG and perhaps MD (tablets), and then you could have a smaller graphic for SM and XS breakpoints. But consider the case of a Desktop PC user who decides to narrow the width of their browser window across breakpoints. They would end up being served BOTH images – the LG/MD version and then the SM/XS version too!
Also bear in mind that if you have a really huge graphic, it will be a large file size even for a 1x image. For some photographic images, I suppose a 1x image on a 2x screen wouldn’t be too blurry, but you would lose the Retina Display effect. That’s why I tend to chose 2x images too and just keep the physical size of my images reasonable.
Background images with text and other things overplayed are a different matter altogether. A much lower resolution and a higher compression would still look nice, I think.
Lastly, please understand that the new feature we are voting on would only not be written to the HTML file in the event you killed visibility on ALL BREAKPOINTS. That is something very different from making an image display only one 1 or more breakpoints.
So what happens if you have a big graphic set to be visible only on LG and your web visitors only use iPhones? Well, assuming you have a separate graphic set to display only on SM and XS, then they would see only that image. They would not see the image set to be visible only on LG.
I built the top page graphic on my KIRAMEK website to change via breakpoint. Test the following page on a desktop PC and slowly reduce the browser window width and you will see the graphic be changed out at each breakpoint.
I did it that way because the left side of my graphic on LG is sharp and in-focus while the right side is blurry on purpose so the little hand and pouch are brought into more clear view. To retain that clarity across all breakpoints required me to redesign my graphic for each breakpoint. That is something a CDN will NOT do for you.
I DO understand wich images would be seen or not seen by visitors depending on their device.
My question ist about the LOADING of the images in the background. So my question is about needless loading of data that is NOT visible.
The way I understand it, and someone more savvy about browsers than me can chime in if they think I am wrong here, is that a browser (desktop PC or mobile) will only LOAD visible images. Any images referenced in the HTML yet set to NOT DISPLAY will of course NOT LOAD. But of course, if you view the page HTML code, you will see REFERENCES to those images stored on your web server.
Setting images to hidden will not give you a performance hit, if that is what you are worried about.
So why then should we vote for content to NOT be written to the HTML file at all when visibility is displayed across ALL breakpoints? Because it has zero meaning for one, and because it is CODE-BLOAT for two. You might have a very complex set of rows and columns and textual data that is set to NOT be visible on any breakpoint, but that code remains in your HTML page and requires time to download. And if you have a lot of objects on your page set to be invisible across all breakpoints, all that totally unused code sits in your HTML file taking up space for no good reason at all.
But again, that is a different matter than what you are talking about. You are talking about images that are displayed in some breakpoints and not others, and I think I just answered how the browser treats those. The code must be downloaded as a part of your HTML file, but the image itself will only load in the browser if it’s visibility is enabled for the current breakpoint displayed on your screen.
Hi @JDW
Sorry for the delay,
for me, the main issue is about the loading time of your fonts…
You responded to me they are already handled from your server, so i don’t know how you can improve further actually.
About the “hover” mode disabled on mobiles, i’m not even sure if that can affect your performance.
As mentionned before, the use of a CDN might be a solution.
Perhaps, but our company cannot afford to pay more for web site hosting than we pay now. Corona has had a rather devastating impact on many businesses across Japan, and our company is no exception.
I was hoping to hear speculation on why fonts are taking so long to load off our own server, seeing that graphics load fast. That part doesn’t make sense to me.
