I only know that in order to improve the site speed, I should have images in PNG format.
This isn’t really true and depends on what types of images your saving out. PNGs are a lossless format (as opposed to JPGs which are lossy) and only really benefit in size/quality when colors are limited.
The 1X/2X/etc your seeing represents pixel density and can be used to ensure images are crisp on high resolution displays. I know Webflow allows you to select whether an image is HiDPI (which will render it at half the size to account for higher resolutions) however I’ve found that most of the time this just leads to larger image sizes.
My preference is to prioritize lower file sizes, and if possible, utilize Webflow’s built-in responsive images to ensure larger image sizes are only served for larger displays. You can read more about that feature here, but just keep in mind that this is the default behavior for image elements anyway.