First of all, I take a bit of umbrage at the author’s constant reference to “website size” without defining what this means until you dig into the FAQ. Just blithely referring to everything as “size” is a bit misleading, since I imagine most people would immediately assume size on disk which obviously makes no sense from a web browsing perspective. And indeed, they actually mean total data transferred on a page load.
Also, basically all this does is punish sites that use images. I run an ecommerce website (and no, I’m not telling you lunatics which one) and mine absolutely would qualify handily, except… I have to provide product images. If I didn’t, my site would technically still “work” in a broad and objective sense, but my customers would stage a riot.
A home page load on our site is just a shade over 2 megabytes transferred, the vast majority of which is product images. You can go ahead and run an online store that actually doesn’t present your customers any products on the landing page if you want to, and let me know how that works out for you.
I don’t use any frameworks or external libraries or jQuery or any of that kind of bullshit that has to be pulled down on page load. Everything else is a paltry (these days) 115.33 kB. I’mna go ahead and point out that this is actually less to transfer than jabroni has got on his own landing page, which is 199.31 kB. That’s code and content only for both metrics, also not including his sole image — which is his favicon, and that is for some inexplicable reason given the circumstances a 512x512 .png. (I used the Firefox network profiler to generate these numbers.)
Do you actually have to provide the image? Couldn’t you provide a pointer to the image? Like those thumbnails that are just links on the backends but appear as images when loaded
If you’re going to display pixels on the user’s screen, you have to send those pixels to the user. Magic still doesn’t exist. HTML img tags are indeed a “pointer,” but once the user’s browser has the path to that image file it will download the entire thing.
That said, there’s no reason to send an image that’s any bigger than it needs to be. Sending a scaled down thumbnail if you know it will be displayed small is sensible. Sending the entire 1200px wide or whatever image it is and just squashing it into a 100px wide box in the user’s browser is not.
First of all, I take a bit of umbrage at the author’s constant reference to “website size” without defining what this means until you dig into the FAQ. Just blithely referring to everything as “size” is a bit misleading, since I imagine most people would immediately assume size on disk which obviously makes no sense from a web browsing perspective. And indeed, they actually mean total data transferred on a page load.
Also, basically all this does is punish sites that use images. I run an ecommerce website (and no, I’m not telling you lunatics which one) and mine absolutely would qualify handily, except… I have to provide product images. If I didn’t, my site would technically still “work” in a broad and objective sense, but my customers would stage a riot.
A home page load on our site is just a shade over 2 megabytes transferred, the vast majority of which is product images. You can go ahead and run an online store that actually doesn’t present your customers any products on the landing page if you want to, and let me know how that works out for you.
I don’t use any frameworks or external libraries or jQuery or any of that kind of bullshit that has to be pulled down on page load. Everything else is a paltry (these days) 115.33 kB. I’mna go ahead and point out that this is actually less to transfer than jabroni has got on his own landing page, which is 199.31 kB. That’s code and content only for both metrics, also not including his sole image — which is his favicon, and that is for some inexplicable reason given the circumstances a 512x512 .png. (I used the Firefox network profiler to generate these numbers.)
Do you actually have to provide the image? Couldn’t you provide a pointer to the image? Like those thumbnails that are just links on the backends but appear as images when loaded
If you’re going to display pixels on the user’s screen, you have to send those pixels to the user. Magic still doesn’t exist. HTML img tags are indeed a “pointer,” but once the user’s browser has the path to that image file it will download the entire thing.
That said, there’s no reason to send an image that’s any bigger than it needs to be. Sending a scaled down thumbnail if you know it will be displayed small is sensible. Sending the entire 1200px wide or whatever image it is and just squashing it into a 100px wide box in the user’s browser is not.