Image in front page and single page

My website has huge image size.The reason is that the single page has featured image of 1200800 and same image size is displayed by compression using css on frame of 291185 on front page.How can I upload one two image and display front page image a small one and single page image a big one.Is there any solution?

A better solution is using a service like Cloudinary that allows you to create different images at breakpoints. That way you’re only delivering that file size and display for that breakpoint.

Its more work to get the images right but offers better performance and user experience.