Assuming there's not a ton of relatedArticles entries, and considering the fact that there's only one image per entry, the above might not make a huge impact on your performance. To take things a step further, you might consider eager loading the actual Asset field(s) as well as their transforms. There's a bit more code involved with this approach, though, as you can't query the entry.relatedArticles field directly, but will need to go through a craft.entries query using the relatedTo parameter. Also worth noting is the slightly different syntax when the Assets are eager loaded (article.bannerImage[0] instead of article.bannerImage.first()). Here's how it could look:

Assuming there's not a ton of relatedArticles entries, and considering the fact that there's only one image per entry, the above might not make a huge impact on your performance. To take things a step further, you might consider eager loading the actual Asset field(s) as well as their transforms. There's a couple of ways to do this – you could use the same approach as above, adding the eager loading criteria to the Entries field relatedArticles:

{% set relatedArticles = entry.relatedArticles.find({
  with: [
      ['bannerImage', {
          withTransforms: ['cardImage']
      }]
  ]
}) %}
{% for article in relatedArticles %}
    ...
    {% set bannerImage = article.bannerImage[0] ?? null %}
    {% if bannerImage %}
        <img src="{{ bannerImage.getUrl('cardImage') }}" />
    {% endif %}
{% endfor %}

...or you could use a more "traditional" eager loading approach, using craft.entries and the relatedTo parameter:

Your syntax is a bit off.

The withTransforms parameter is an Asset criteria, meaning it is only relevant when you're pulling Assets. Appending it to entry.relatedArticles (an Entries field, returning an ElementCriteriaModel) like you're currently attempting does nothing, but this does:

{% set assets = entry.someAssetsField({
    withTransforms: ['someTransform', 'someOtherTransform']
}) %}

This means your current code should probably be refactored to look something like this (simplified):

{% for article in entry.relatedArticles %}
    ...
    {% set bannerImage = article.bannerImage({
        withTransforms: ['cardImage']
    }).first() %}
    {% if bannerImage %}
        <img src="{{ bannerImage.getUrl('cardImage') }}" />
    {% endif %}
    ...
{% endfor %}

Assuming there's not a ton of relatedArticles entries, and considering the fact that there's only one image per entry, the above might not make a huge impact on your performance. To take things a step further, you might consider eager loading the actual Asset field(s) as well as their transforms. There's a bit more code involved with this approach, though, as you can't query the entry.relatedArticles field directly, but will need to go through a craft.entries query using the relatedTo parameter. Also worth noting is the slightly different syntax when the Assets are eager loaded (article.bannerImage[0] instead of article.bannerImage.first()). Here's how it could look:

{% for article in craft.entries({
    relatedTo: {
      sourceElement: entry,
      field: 'relatedArticles'
    },
    with: [
        ['bannerImage', {
            withTransforms: ['cardImage']
        }]
    ]
}) %}
    ...
    {% set bannerImage = article.bannerImage[0] ?? null %}
    {% if bannerImage %}
        <img src="{{ bannerImage.getUrl('cardImage') }}" />
    {% endif %}
    ...
{% endfor %}

With the above, assuming there's a fair amount of entries involved you'll probably see a decrease in the number of queries executed.

If you want to learn more about eager loading, I recommend taking a look at the official docs on the subject.

Your syntax is a bit off.

The withTransforms parameter is an Asset criteria, meaning it is only relevant when you're pulling Assets. Appending it to entry.relatedArticles (an Entries field, returning an ElementCriteriaModel) like you're currently attempting does nothing, but this does:

{% set assets = entry.someAssetsField.find({
    withTransforms: ['someTransform', 'someOtherTransform']
}) %}

This means your current code should probably be refactored to look something like this (simplified):

{% for article in entry.relatedArticles %}
    ...
    {% set bannerImage = article.bannerImage.find({
        withTransforms: ['cardImage']
    })[0] ?? null %}
    {% if bannerImage %}
        <img src="{{ bannerImage.getUrl('cardImage') }}" />
    {% endif %}
    ...
{% endfor %}

Assuming there's not a ton of relatedArticles entries, and considering the fact that there's only one image per entry, the above might not make a huge impact on your performance. To take things a step further, you might consider eager loading the actual Asset field(s) as well as their transforms. There's a bit more code involved with this approach, though, as you can't query the entry.relatedArticles field directly, but will need to go through a craft.entries query using the relatedTo parameter. Also worth noting is the slightly different syntax when the Assets are eager loaded (article.bannerImage[0] instead of article.bannerImage.first()). Here's how it could look:

{% for article in craft.entries({
    relatedTo: {
      sourceElement: entry,
      field: 'relatedArticles'
    },
    with: [
        ['bannerImage', {
            withTransforms: ['cardImage']
        }]
    ]
}) %}
    ...
    {% set bannerImage = article.bannerImage[0] ?? null %}
    {% if bannerImage %}
        <img src="{{ bannerImage.getUrl('cardImage') }}" />
    {% endif %}
    ...
{% endfor %}

With the above, assuming there's a fair amount of entries involved you'll probably see a decrease in the number of queries executed.

If you want to learn more about eager loading, I recommend taking a look at the official docs on the subject.