The reason your generated size have larger size than the original image, is how the compression works.
If you for example upload a low quality image that is 50kb is size, but your WordPress has JPG quality set to 100, then the thumbnails will size larger than the original image, since WordPress is not compressing them. This can be change by using the jpeg_quality filter:
add_filter('jpeg_quality', function($arg){ return 90; });
You can decrease the value (that also reduces quality) to save more space. I’m not aware of any hooks for PNG files, but there are plugins that can manually compress these files for you, such as Compress PNG & JPG images or Compress PNG for WP.
You can manually generate your own responsive images, if you are familiar with how srcset works. Look at this example:
<img
src="https://wordpress.stackexchange.com/questions/271310/<?php get_the_post_thumbnail_url( $post_id,"thumbnail' ); ?>"
srcset="
https://wordpress.stackexchange.com/<?php the_post_thumbnail_url( 'medium' ); ?> 700w,
https://wordpress.stackexchange.com/<?php the_post_thumbnail_url( 'large' );?> 1600w"
sizes="
(max-width:700px) 700px,
(min-width:701px) 1600px"
alt="<?php the_title(); ?>"
/>
This way you can fully control your images and their behavior based on your theme.
Also, when it comes to responsiveness, you might want to make sure that you have defined a width for your content, so WordPress can decide the breakpoints. This is done by a global value called $content_width:
if(!isset($content_width)) {
$content_width = 700;
}
Which can be set via your theme’s functions.php file.