been trying to fix this all day now, but I don't seem to progress anymore. I've minified all resources, moved them to the bottom, async loaded javascript, compressed images... but still the desktop score is only 83/100 and it's all because of the images.
The mobile page scores 100/100 while using the same images. The images on my website are optimized using ImageOptim (for Mac) and I've connected Kraken.io to optimize all images using their tool. Kraken.io gives the best results (most kb saved) but still, the desktop won't go up from 83/100.
The only way to get the score up is to choose a 10% quality (93/100) or to use less images (85/100) on the homepage.
I've ran out of options.. the page I'm talking about is https://pendo.nl if anyone wants to see the results.
Thanks in advance.
You answered your question in your title - crucial part is "same images". Take this image for example. You are using it in 320x270px in Desktop version while original image is 800x600px (resized by CSS).
Google Page Insights sees that as loading additional bytes without the need to do so, and as suggest that improvement in the report (other than physically optimizing image). What basically you should do is use ~320x270 original image for desktop version.
There is a CSS resize margin that GPI allows and i think that margin is around 20% (i never tested it but it usualy works for me, if you have 100px width original image, you can resize it with CSS up/down to 120/80px in width). Thats why the warning is "Compressing and resizing" when you do a report and not just "Compressing".
There are few ways you can deal with that.