Media Library - Front end showing broken image in case of images of a large size

System Information
  • Strapi Version: 4.24.5
  • Operating System:
  • Database:
  • Node Version: 18.5
  • NPM Version:
  • Yarn Version:

Hi Team,

I am able to upload images into strapi media library and able to render properly in frontend but if the image size is greater than 4000px resolution then images are breaking in frontend. I have added breakpoints and sizelimit as well in my strapi cms config/plugins.js file but still images are breaking in frontend. Please find the below plugin.js file code:

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: 'aws-s3',
      providerOptions: {
        s3Options: {
          credentials: {
            accessKeyId: env("AWS_ACCESS_KEY_ID"),
            secretAccessKey: env("AWS_ACCESS_SECRET"),
          },
          region: env("AWS_REGION"),
          endpoint: env("AWS_ENDPOINT"),
          params: {
            Bucket: env("AWS_BUCKET"),
          },
          httpOptions: {
            agent: new https.Agent({
              rejectUnauthorized: true,
              ca: certs
            })
          }
        },
      },
      sizeLimit: 52428800,
      breakpoints: {
        xlarge: 4000,
        large: 2000,
        medium: 1200,
        small: 800,
        xsmall: 300
      }
    },
  },

Any suggestions would be helpful. Thanks in advance.