The blurriness sounds like a theme bug more than an image optimisation problem. It sounds like your theme is using the thumbnail image as the main image when clicked on. You'll want to make sure it's using the larger image version of the thumbnail.
Magento will automatically resize images to the size that it needs for different locations in the theme. So you don't have to worry about uploading the exact sizes in advance, especially as they're all the same aspect ratio.
Magento's resizing isn't "optimal" though, so more advanced solutions might completely replace the image system in magento, e.g. Cloudinary.
20kb sounds great in terms of size! If you manage to keep it that low you're doing really well. I'd use this as well as the total page weight and ensure those together are within a certain budget.
It's worth running through an image compression tool before upload but resizing for each type (image, small image, thumbnail) probably isn't worth the time unless you actually want to have different photo for the image in different places, not for performance. As Magento will already resize to the size it needs.
Use PageSpeed server extension to opimize your images on the fly - https://developers.google.com/speed/pagespeed/module/ . It does the job well.
You can try to achieve that with Google Page Speed Optimizer module. It will help to compress images with no loss in their quality as well as minify JS and CSS (you've asked about CSS in another thread as far as I remember).
As a result, the extension helps to speed up a Magento site.