Image losing quality

When I scale this jpg image I downloaded for responsiveness it loses quality and looks bigger than the normal size. This affects its ability to float accordingly beside the desired texts.
Any ideas how I can stop this from happening?

can you be more specific and ideally link to a live example (try Codepen)

I don’t know why the image is not floating properly to be together with the write-up.

This is the link

Try adding Bootstrap. Go to your css file on codepen (click on settings top left) - at the bottom of the settings under ’ Add External Stylesheets/Pens’ - type bootstrap in the search bar - twitter-bootstrap will come up. Select it.

and then to get your y back in flexibility: in your css file, change:
@media screen
and (min-width : 900px){
#body #tagline{
** width: change from 50% to 100%; ***

will make the y in flexiblity full again.

and then maybe also in your css file (if you use bootstrap)
@media screen
and (min-width : 900px){
#body .figure{
width: change 70% to 90 %

here is the fork: