How to wait for images to load before taking a Percy snapshot?

Question

I have a suite of Cypress tests. Most of the tests use Percy to take snapshots. I fetch images from a CMS. Percy is taking the snapshots before the images render fully. The space of the images are displayed but no image.

All images load when using Cypress screenshot

it('/', function () {
  cy.visit('/')
  cy.screenshot('before')
  cy.get('img').each((img) => {
    cy.wrap(img)
    .scrollIntoView()
    .its('0.naturalWidth')
    .should('be.greaterThan', 0)
  })
  cy.screenshot('after')
})

But not all images fully render when using Percy snapshots

it('/', function () {
  cy.visit('/')
  cy.percySnapshot('before')
  cy.get('img').each((img) => {
    cy.wrap(img)
    .scrollIntoView()
    .its('0.naturalWidth')
    .should('be.greaterThan', 0)
  })
  cy.percySnapshot('after')
})