Reduce image sizes to improve performance

[blahosyl]

Adding a higher resolution hero image lead to a drastic reduction of performance. Find a balance between a not too large file size and a good resolution.

[blahosyl]

The biggest culprit might not be the hero image, but rather, the grayscale pictures in the Problems & Solutions section.
Try to make images grayscale (possibly also tinted?) with an external tool rather than with CSS.

[blahosyl]

Commit nr. d54d599671c34b8090b805ba893018c3779985da solved the performance issue caused by using CSS filter to create grayscale pictures (score back to 98%).

[blahosyl]

Testing with a larger resolution hero image (commit) brought the score back down.

[blahosyl]

Created a 3rd, optimised sized image with TinyPNG. This works well on desktop, but not on mobile (score: 82).

I solved this by using the small image for mobiles and tablets, and the optimized one for desktops (commit).

This solved the issue, with a 96 Lighthouse score on mobile and 98 on desktop.

Further improvements suggested by Lighthouse involve eliminating the following from the page:

• FontAwsome
• Google Fonts
• YouTube

However, these are integral parts of the content and design, so they will not be eliminated.

[blahosyl]

Mentor suggestion: use image set instead of media query – media query might load both images.

MDN Mozilla best site for explanation

[blahosyl]

Mentor: performance is not an issue for this project