diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss
index 6255df646..11fec68f2 100644
--- a/app/assets/stylesheets/views/article.scss
+++ b/app/assets/stylesheets/views/article.scss
@@ -26,6 +26,15 @@
       object-fit: scale-down;
       width: 100%;
       height: 100%;
+
+      &__feed {
+        padding-top: 0;
+        padding-bottom: 0;
+        height: 100%;
+        width: 100%;
+        aspect-ratio: auto 650 / 275;
+        object-fit: scale-down;
+      }
     }
   }
 
diff --git a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
index b9f4e2fc7..e1c1427ee 100644
--- a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
+++ b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
@@ -20,18 +20,23 @@ Object {
         <div
           role="presentation"
         >
-          <a
-            class="crayons-story__cover"
-            href="/some-post/path"
-            style="background-image: url(/images/10.png);"
-            title="Unbranded Home Loan Account"
+          <div
+            class="crayons-article__cover crayons-article__cover__image__feed"
           >
-            <span
-              class="hidden"
+            <a
+              class="crayons-article__cover__image__feed crayons-story__cover__image"
+              href="/some-post/path"
+              title="Unbranded Home Loan Account"
             >
-              Unbranded Home Loan Account
-            </span>
-          </a>
+              <img
+                alt="Unbranded Home Loan Account"
+                class="crayons-article__cover__image__feed"
+                height="275"
+                src="/images/10.png"
+                width="650"
+              />
+            </a>
+          </div>
           <div
             class="crayons-story__body"
           >
@@ -270,18 +275,23 @@ Object {
       <div
         role="presentation"
       >
-        <a
-          class="crayons-story__cover"
-          href="/some-post/path"
-          style="background-image: url(/images/10.png);"
-          title="Unbranded Home Loan Account"
+        <div
+          class="crayons-article__cover crayons-article__cover__image__feed"
         >
-          <span
-            class="hidden"
+          <a
+            class="crayons-article__cover__image__feed crayons-story__cover__image"
+            href="/some-post/path"
+            title="Unbranded Home Loan Account"
           >
-            Unbranded Home Loan Account
-          </span>
-        </a>
+            <img
+              alt="Unbranded Home Loan Account"
+              class="crayons-article__cover__image__feed"
+              height="275"
+              src="/images/10.png"
+              width="650"
+            />
+          </a>
+        </div>
         <div
           class="crayons-story__body"
         >
diff --git a/app/javascript/articles/components/ArticleCoverImage.jsx b/app/javascript/articles/components/ArticleCoverImage.jsx
index 40f08ffbf..ca3269113 100644
--- a/app/javascript/articles/components/ArticleCoverImage.jsx
+++ b/app/javascript/articles/components/ArticleCoverImage.jsx
@@ -3,14 +3,24 @@ import { articlePropTypes } from '../../common-prop-types';
 
 export const ArticleCoverImage = ({ article }) => {
   return (
-    <a
-      href={article.path}
-      className="crayons-story__cover"
-      title={article.title}
-      style={{ backgroundImage: `url(${article.main_image})` }}
-    >
-      <span class="hidden">{article.title}</span>
-    </a>
+    <div className="crayons-article__cover crayons-article__cover__image__feed">
+      <a
+        href={article.path}
+        className="crayons-article__cover__image__feed crayons-story__cover__image"
+        title={article.title}
+      >
+        <img
+          className="crayons-article__cover__image__feed"
+          src={article.main_image}
+          width="650"
+          height="275"
+          alt={article.title}
+          style={{
+            backgroundColor: `${article.main_image_background_hex_color}`,
+          }}
+        />
+      </a>
+    </div>
   );
 };
 
diff --git a/app/views/articles/_single_story.html.erb b/app/views/articles/_single_story.html.erb
index c90711183..cddde25b5 100644
--- a/app/views/articles/_single_story.html.erb
+++ b/app/views/articles/_single_story.html.erb
@@ -4,11 +4,11 @@
     <div id="featured-story-marker" data-featured-article="articles-<%= story.id %>"></div>
   <% end %>
   <% if featured == true || (feed_style_preference == "rich" && story.main_image.present?) %>
-    <a href="<%= story.path %>" title="<%= story.title %>" aria-label="article"
-      style="background-color: <%= story.main_image_background_hex_color %>; background-image: url(<%= cloud_cover_url(story.main_image) %>);"
-      class="crayons-story__cover crayons-story__cover__image">
-      <span class="hidden"><%= story.title %></span>
-    </a>
+    <div class="crayons-article__cover crayons-article__cover__image__feed">
+      <a href="<%= story.path %>" title="<%= story.title %>" aria-label="article" class="crayons-article__cover__image__feed crayons-story__cover__image">
+        <img src="<%= cloud_cover_url(story.main_image) %>" width="650" height="275" style="background-color:<%= story.main_image_background_hex_color %>;" class="crayons-article__cover__image__feed" alt="Cover image for <%= story.title %>">
+      </a>
+    </div>
   <% end %>
 
   <% if story.video.present? && story.video_thumbnail_url.present? %>
diff --git a/app/views/stories/feeds/show.json.jbuilder b/app/views/stories/feeds/show.json.jbuilder
index 409a666fb..9ba1b6570 100644
--- a/app/views/stories/feeds/show.json.jbuilder
+++ b/app/views/stories/feeds/show.json.jbuilder
@@ -6,7 +6,7 @@ article_attributes_to_include = %i[
 article_methods_to_include = %i[
   readable_publish_date flare_tag class_name
   cloudinary_video_url video_duration_in_minutes published_at_int
-  published_timestamp
+  published_timestamp main_image_background_hex_color
 ]
 
 json.array!(@stories) do |article|
diff --git a/spec/requests/stories_index_spec.rb b/spec/requests/stories_index_spec.rb
index efdef9996..4c29a2adf 100644
--- a/spec/requests/stories_index_spec.rb
+++ b/spec/requests/stories_index_spec.rb
@@ -174,7 +174,7 @@ RSpec.describe "StoriesIndex", type: :request do
 
       allow(Settings::UserExperience).to receive(:feed_style).and_return("basic")
       get "/"
-      expect(response.body.scan(/(?=class="crayons-story__cover crayons-story__cover__image)/).count).to be 1
+      expect(response.body.scan(/(?=class="crayons-article__cover crayons-article__cover__image__feed)/).count).to be 1
     end
 
     it "shows multiple cover images if rich feed style" do
@@ -182,7 +182,9 @@ RSpec.describe "StoriesIndex", type: :request do
 
       allow(Settings::UserExperience).to receive(:feed_style).and_return("rich")
       get "/"
-      expect(response.body.scan(/(?=class="crayons-story__cover crayons-story__cover__image)/).count).to be > 1
+      # rubocop:disable Layout/LineLength
+      expect(response.body.scan(/(?=class="crayons-article__cover crayons-article__cover__image__feed)/).count).to be > 1
+      # rubocop:enable Layout/LineLength
     end
 
     context "with campaign hero" do