Fix: optimize the loading of images

[RingoTC]

Description

comment: Optimize the loading of images which inlcudes:

• using next/image rather than img to optimize the image processing.(https://nextjs.org/docs/pages/building-your-application/optimizing/images).
• move images to stastic folder.
• add bundleanalyzer for future using.

Fixes # (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Screenshots

Before	After
"screenshot before"	"screenshot after"

How Has This Been Tested?

• Cypress integration
• Cypress component tests
• Jest unit tests

Checklist:

• [] I have performed a self-review of my own code
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• Any dependent changes have been merged and published in downstream modules