<picture> tag and resolving images in my hero section
I'm trying to increase the performance of my site, so I've got 3 different jpg hero image sizes, and 3 different webp sizes:
If I'm importing those 6 images at the top of my module (I'm using webpack) does that have an impact on browser performance? I know that it should only serve the image that matches the supported source type, but I just wanted to make sure I wasn't unwittingly making a mistake, as I'm pretty new to using the picture element 🙂
10 Replies
You can check which image was loaded in the Network tab of the DevTools.
If the browser has already loaded a larger image it will not fetch the smaller, so test from small to big and clear cache before the next test.
Also keep in mind, that those numbers you put in are not absolute, the browser takes the one it thinks appropriate and that can change depending on the device pixel ratio (DPR, see screenshot)
Hi Wolle, which numbers? In the srcset? I was under the impression those were the image sizes IRL, rather than the display sizes?
But yeah, that's the approach I was going to try, I guess I've just confused importing images and serving images RE performance. So I could require something like this:
const massiveImage = require('pathTo8kImage');
and as long as it isn't chosen by the browser it should have no noticeable effect on the site's performance?I meant those numbers in srcset. I was confused the first time I used it, because i thought them to be like media queries. So an image with 100px would get used if the element is 100px or larger and below the browser would use the next smaller, but it switches somewhere between.
Yeah, the numbers in srcset are the actual image widths, rather than the rendered width, right?
As far as I understand yes.
Nice. Do you know about the impact of when I require the images?
I mean I've compressed/converted/cropped images to webp and am using the picture tag, the browser is retriving the right images, yet my performance score has gone down from 90 to 84 :/
what is the size difference between your small, medium, and large webp files?
are you really saving that much that 3 different versions is worth the effort?
196/106/35 for the jpg, 119/72/27 for webp. There's an argument for not bothering with the middle webp I guess.
yeah and looking at that, your webp sizes aren't really saving you much on the low end, and arguably even on the medium size, which is odd. But with these small differences in size, I would probably just stick with jpg for those lower 2 entirely
also what reduction setting are you using on your webp? I usually go with 75 quality, and get at least a 50% reduction in size relative to jpg. You might experiment and find more savings if you are really going for the leanest possible sizes
maybe because I converted the file from the compressed jpg? tbf the original file size was 560kb, so it's not doing too badly 😄
anyway it's interesting to know that I can do better size-wise, and something I can definitely experiment with like you suggest, but for the time being what i'm really concerned about is when I should be requiring/importing the image files?
if there are 6 image files (say 3 jpg, 3 webp) imported at the top of the module will that slow my site down? i don't think it will, because the browser should just return the relevant image size (which it is doing), and the images aren't being inlined so it won't increase the bundle size, but i'm surprised that my performance score is the same (eg on desktop) with a 119kb file vs the 560kb file I had before compression. Especially given I've 3 files of that size! :/