[WIP] Image compression

[dusanradovanovic]

Description:

I've converted all home-page images to jpeg format and compressed them without changing resolution. I was able to reduce their file size 8x~10x without losing visual fidelity. Here is the comparison of the Lighthouse report:

Linting:

• No linting errors

Tests:

• E2E tests (npm test run with e2e)
• Manual tests

Documentation:

• Requires documentation updates

[shaunmaharaj]

We shouldn't need to rename the file extension. ImageContainer should be fetching the allowed image types from the config, and displaying the fall-back filetypes if the preceding doesn't exist.

[aChanEP]

If we do decide to go with jpgs though our fallback imgs should be changed to jpgs

[dusanradovanovic]

I agree, this was more of a POC to demo different image compression ratios.

[shaunmaharaj]

leftover config

[shaunmaharaj]

@dusanradovanovic moving to lossy JPEG is not going to be ideal for us as the quality of these images will suffer 😞 This is why we've been keeping png thus far, and compressing any new images with https://tinypng.com/.

Comparing a few of the converted images with their compressed png counterparts, there's a noticeable degradation of quality during compression (example: b2c-product-3.jpg, b2c-product-6.png).

Some options:

• We could convert certain images to JPEG that we don't need to be scaled at higher resolutions (smaller marketing spots, etc).
• Continue work with showing selective images at various breakpoints (srcset) and have different sized images for each breakpoint.

FYI @BonnieEP

[aChanEP]

@dusanradovanovic moving to lossy JPEG is not going to be ideal for us as the quality of these images will suffer 😞 This is why we've been keeping png thus far, and compressing any new images with https://tinypng.com/.

Comparing a few of the converted images with their compressed png counterparts, there's a noticeable degradation of quality during compression (example: b2c-product-3.jpg, b2c-product-6.png).

Some options:

• We could convert certain images to JPEG that we don't need to be scaled at higher resolutions (smaller marketing spots, etc).
• Continue work with showing selective images at various breakpoints (srcset) and have different sized images for each breakpoint.

FYI @BonnieEP

@dusanradovanovic moving to lossy JPEG is not going to be ideal for us as the quality of these images will suffer 😞 This is why we've been keeping png thus far, and compressing any new images with https://tinypng.com/.

Comparing a few of the converted images with their compressed png counterparts, there's a noticeable degradation of quality during compression (example: b2c-product-3.jpg, b2c-product-6.png).

Some options:

• We could convert certain images to JPEG that we don't need to be scaled at higher resolutions (smaller marketing spots, etc).
• Continue work with showing selective images at various breakpoints (srcset) and have different sized images for each breakpoint.

FYI @BonnieEP

I am not seeing a huge difference between the png's beside the jpg's. From what ive been reading Jpgs are meant for photographic images where as pngs are more meant for graphical images where you need solid crisp borders. I agree with Shaun though that if the degredation is not acceptable we should change some of our less important and smaller images to be jpg.