Image sizes and dimensions - fitting to elements

Greetings!

In the first screenshot is the view of two picture elements in the upfront editor. The second screenshot is the same two picture elements but on the live site. You can notice that the live site version (screenshot 2) display grainy/and or have pixelation of some sort.

I have this same issue with full width sliders and regular sliders too. Why do images display that way? How can I add images so that they are crisp and clear?

The images I have in the screenshots are definitely large enough for the element. Once they are entered into the element I resize them to fit the element but become distorted in some way. They are the proper ratios as well.

If I create the images to fit the size of the element exactly they are still distorted.

Hope you can help!

Much Love
Ciro Bey