Responsive full-screen images without loss of quality, possible?

Hallo community of stackoverflow, I hope you're having a nice day :)

Straight to the point : I've started 开发者_如何学Goto plan on a new portfolio of mine (I am an art director bytheway). And my original idea was not to only make a portfolio responsive (I am thinking 1024x768px all the way up to 2560x1600px), but also have some nice work preview via full-browser-screen images.

And as you might expect I've encautered a problem. Image designed to fully fit 2560x1600px won't resize to lets say 1440x900px without loosing quality or being distorted.

So I could really use your help and experience guys... Is there a "perfect" image size that would resize beautifully to the following resolutions : 1024x768px, 1280x800px, 1280x1024px, 1440x900px, 1920x1080px, 2560x1600px. Is it even possible to do that ?

I really appreciate your help. Thanks in advance :)

Rather than trying to scale the entire image to all those different resolutions, consider preserving the aspect ratio (width : height) while scaling as close to (but larger than) the required resolution, and then cropping the image.

Scaling an image and changing the aspect ratio always causes distortion.

No, there is no such thing as an image that will scale perfectly to all those different sizes because they represent several different shapes or aspect ratios. Scaling an image a different amount in width vs. height results in the image being distorted and generally does not look good.

The options are as follows:

1. Scale the image (proportionally) as much as it can be scaled so that it fills one dimension of the screen and doesn't quite fill the other dimension. This is the largest uncropped image that can be displayed.
2. Scale the image (proportionally) until it just completely fills the screen. If the screen is not exactly the same shape as the image, then the image will need to be overscaled in order to fill the screen. Displaying the image will crop part of the image along one direction. This is the normal way that an image is scaled to completely "fill" the screen. If the image is created with some "extra" and unimportant space around the edges than cropping some of that off because of the oversize scaling to fill will not result in any problem.
3. Scale the image as in option #1 and use a coordinated background color to fill any area of the screen not covered by the image.
4. Create a container or frame that is exactly the same shape as your image and scale the image to fill that.
5. Scale the image non-proportionally to exactly fill the whole screen. This will stretch the image in one direction more than the other and the image will be distorted some, but nothing will be cropped and the entire screen will be covered. Round things will be elliptical and other shapes will be distorted.

In all cases, you want to analyze the likely display sizes and pick a source image that is closest in shape to as many target screen sizes as possible.

You can prepare many images using photoshop or any other software, then using responsive design you would be able to display the adequate image for different screen sizes.

Here is a nice and simple tip with only css/html:

Ingredients

• Transparent PNG image with the desired ratio (transparent-ratio-conserver.png)

• tag

• Different images for different view-ports (retina.jpg, desktop.jpg, tablet.jpg...)

The idea is to open an tag and to assign to it a transparent image (with our desired ratio). We also add class="responsive-image" that's all in HTML.

<img src="img/transparent-ratio-conserver.png" class="responsive-image">

In the CSS, we set background-size to fit the and we choose the width of our image.

.responsive-image{
    width: 100%;
    background-size: 100% 100%;
} 

and finally, we serve for every view-port the right image:

/* Retina display */
@media screen and (min-width: 1024px){
    .responsive-image{
        background-image: url('../img/retina.jpg');
    }
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-image{
        background-image: url('../img/desktop.jpg');
    }
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-image{
        background-image: url('../img/tablet.jpg');
    }
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-image{
        background-image: url('../img/mobile-hd.jpg');
    }
}
/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-image{
        background-image: url('../img/mobile-ld.jpg');
    }
} 

You can download the demo from here.