react-pwa-reference-storefront
react-pwa-reference-storefront copied to clipboard
elasticpath
[WIP] Image compression
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
@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
@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.
