Create a responsive image with art direction (only one image)

[Illustrathor]

Hi,

I'm faced with a task that is a bit unusual. I have a single Image ( 3000x2000 ) from which should be shown a certain area at certain screen sizes ( Till 320, Till 1024, 2k+ ).
Usually I'd just take three different pictures but I have to use only that one image. Okay, I thought of placing it inside a div and use margins and overflow to art direct the image. But this will create two additional Problems:
1. At other Screen sizes the art directed area will change because of the fixed margins
2. the art directed areas are bigger than the screen sizes. The Segment that has to be shown at 320 is 600px wide, so ist would need to be scaled too
So this Option would Need me to scale the image and adjusted the margins accordingly and creates a mess in the process.

Now I ask myself, what possibilities do I have if I want a specific focal point that scales based in the viewport until a breakpoint at which point the focal point switches without needing three different Images.

As additional example:
Viewport between 320 and 1024 should display an area of the image with 1500x1000px that should scale with the device by keeping the ratio and art direction intact.

So, is there a way by which I can define a part as art directed area, for example the 1500x1000 section, that will scale with the device until a breakpoint switches to the next section?

 

Edit:
Added an image to make it perhaps more clear what I'm trying to do

 

Edited June 8, 2016 by Illustrathor

[Ingolme]

You cannot have an image as large as 3000x2000 on your page. The users would have to wait between 10 and 20 seconds for your page to load.

 

The average amount of time a user will wait for a page to load before giving up and leaving is 7 seconds.

 

There is no way around it, you have to make smaller versions of the image.

[Illustrathor]

Acctually, the real image is, after saving, only something about 70-80KB big, so I think the loading time isn't that huge of a big deal. Furthermore, if I could have chosen I would have chosen using separate images but yeah...

[Ingolme]

A combination of background-size and background-position may allow you to clip the image using the div. You can use media queries to change the values based on screen size.

 

Set negative background position values to offset the image to the left and up. Set the background size in absolute units, such as pixels, to have the most precise control over its size and position.

 

For that to work it has to be a background image, though. An image element can't be altered in the same way with CSS.