One to remember, even if it is a complex one..Show for every breakpoint an other image.. Ideal for showing big pictures en change them for smaller devices.
Tablet (a piece has been cropped)
First make 2 imagestyles (default ones, not responsive) I call them replace big and small. The only effect you need to apply is 'replace image'. Of course one can add more effects...
It looks like that now.
Now you need to add a new responsive image style.
You need to choose the breakpoints group. Every responsive theme has these breakpoints built in..I take those of the theme i'm working with, but you can take breakpoint of every active theme! Mind the pixels for the breakpoints. Choose the styles according the size of the screen.
Let's take a look at the Bartik breakpoints.. I repeat you don't need to choose the breakpoints of you default theme..
I took those.. Mind the differences..
I make the smartphone display the default image display. When the screen is bigger i replace the images. You can do otherwise..
Now we need to make 3 image fields in the content type.
Small and big will be set invisible in the display mode. The image field needs the replace settings.
For the other styles you do nothing
The display mode..
Don't forget to set the response image style you made.