This might be basic but I'm getting lost in all the solutions I've managed to find on the web. I have a running website (www.webstalab.com) based on Twitter Bootstrap 3 but the image used (depicting two statues holding a ball) is quite big in size (around 900kb) therefore loads way too long on slower internet connections. The present photo is 1920 pixels wide, is responsive and it is not a background image. (I couldn't achieve the desired layout with the background image approach).
All I want to do is create 3 different size versions of the same photo (one around 800px wide, one around 1200px wide and keep the original at 1920px wide) and get the browser load the appropriate version of the image depending on what screen size and resolution is used to view the website. I also plan to cut the size of the original (1920 pixels wide) photo a bit so it loads a bit faster.
I suppose CSS3 media queries is the way to go with this? Will media queries also solve the retina display issue? Can anyone suggest a good article covering the basics? I'd prefer a solution without javascript (just in case the user has it switched off). The website is online so you can check the source code.
Thanx all!