I - Figure

Learn about usage of figure element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure Add several images to the article page inside of the article's content. Use figure element and provide a figcaption. Add styles to the image and caption to look good by your own taste.

II - Responsive images

Read this article to learn about the available tools to make responsive images: https://freshman.tech/responsive-images [Optional] https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Img + srcset

Update your images in the article so that they use now srcset and sizes attributes to display appropriate image sizes for desktop, tablet, mobile (use the same media breakpoints you used before in CSS stylesheets).

Prepare different images with sizes of 718px (for small mobile, <= 359px), 1,142px (mobile, <= 571px), 1,408px (tablet, <= 704px), 2,280px (desktop, >= 1140px).

It's better to use different images so that you could see what image is used by the browser (just to simplify the debugging process).

Picture

Build a hero-image component for your article. It's a full-width main image inside of article above the headline text. It should take 100vw on all screens. For it use picture element. Provide different sources for desktop, tablet, mobile. It can be a different image for each device type or the same image but optimized for that specific screen (Art direction technique)