Image resize

[Lynnzer]

I seem to be stuck at the very first hurdle. I want a responsive site that will be based on several picture galleries to replace my site at www.motherofthebrideoutfits.co which was created with **** Web Designer Pro.
My problem is the picture sizes. I want to build the site with the mobile phone size then make breakpoints to flip it to larger sizes.
When I use a picture of an appropriate size for a cellphone sized browser it isn't large enough for the larger browser windows. Obviously I need to keep picture file size to a minimum for a cellphone.
If instead I make the site for a larger site size, and use a larger picture it doesn't reduce in file size for the transition to a cellphone.
In fact that picture is so large it doesn't even display in full on the cellphone site, being clipped back to a small portion of the picture.

How do I put different file size pictures on each responsive breakpoint transition without it affecting the other transitions?

[Pablo]

You can use the 'Picture' object to use different image sizes for breakpoints.
http://wysiwygwebbuilder.com/picture.html

[Lynnzer]

Is there a tutorial for this?

[Pablo]

http://wysiwygwebbuilder.com/picture.html

[crispy68]

Why not use the photo gallery? it is responsive in breakpoints and using it in a layout grid it will scale.

The size of the image should be only as large as you need it in the default view. The key is to make sure you optimize your photos. A free tool to use is this: https://tinypng.com

[etcbbu]

Also, just want to second the " tinypng.com " suggestion--that site is a life-saver~

--etcbbu