CODEWITHSUNDEEP
htmlcssimagescalingimage-scaling
Kim Wist
Kim Wist

Reputation: 69

Scaling a background image with css and html

I have a hard time scaling my image correctly with css and html. The css looks like this: 

@media (max-width: 979px) {
.header-wrapper {
height: 388px;
background: url("../images/taikuri.jpg") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Then the html looks like this:

<header id="header" class="header">
<div class="header-wrapper"> <img src="./imag/taikuri.jpg"  
 alt="taikureita" width="2050" height="812"/>

I would like to scale the image somehow to get faster loading speed. GTmetrix page test gives me this advice: The following images are resized in HTML or CSS. Serving scaled images could save 49.1KiB (69% reduction).

I haven't been able to figure out the right way to do this so I have to ask for help.

Upvotes: 2

Views: 530

Answers (3)

Dave
Dave

Reputation: 5029

You could use javascript to load the image after the page loads, and put something like this before the < / body > tag.

 <script>
 var width = document.getElementById('header').clientWidth;
 if(width>=1000)
 {
     document.getElementById("imageid").src="./images/BigImage.jpg";
 }
 if(width>500 && width<1000)
 {
     document.getElementById("imageid").src="./images/MediumImage.jpg";
 }
 if(width<=500)
 {
     document.getElementById("imageid").src="../images/SmallImage.jpg";
 }
 </script>

Of course this would assume that the browser has javascript turned on.

Upvotes: 0

Bj&#248;rnar Hagen
Bj&#248;rnar Hagen

Reputation: 836

Scaling the image with CSS will not give better loading speeds. The reason for this is because your browser don't download the image at the size you specify in your CSS. The browser downloads the image at full size, and then show you the image at whatever size that you specified with your code.

You should have a look at tinypng.com or compressor.io for compressing of your image. This would help you with loading speeds. Compressing an image, makes it smaller in file size. It will take less space on the hard drive, and would also be less for the server to transfer to the user.

Upvotes: 2

Will Lanni
Will Lanni

Reputation: 921

What you're attempting to do is reduce the file size of the image so that it loads faster.

What your solution posted in your question is attempting to do is reduce the display width and height of the image, so it shows up on the screen as a smaller width and height. However, the same image, with all its massive file size, is still being loaded in. The browser is just shrinking the look of it for you.

And looking at your code, you're setting a background image to the same thing as the image that you've written into your html. This doesn't matter, as the image will cache, but just so you know you're basically embedding your image twice.

Think of it this way: I'm 200lbs. If I take a picture of myself and shrink it, I'm still 200lbs in real life. That's what you're trying to do. BUT... if I lose some weight, then I'm smaller in real life and won't hurt so much if I sit on you. That's what you're asking how to do. Make sense?

In this case, open the image up in photoshop, make a copy, resize it to a smaller width (you can do this from Image > Image size) with the contain aspect ratio control turned on. Upload that image and use it instead.

Another, better, option is to

  1. Delete your <img> out of your html, as it's duplicated and huge. You can recreate that scaling effect in css.
  2. Set up more media queries to use different images at different media widths.

I see you're already using this big image at a max-width of 979px. If that's the case, set up an image that is width 979px and use it in this media query. If you need to get bigger, create a larger image that has higher jpg compression and create a larger media query to handle it, something like the following code (note I renamed your image as examples of setting up different images):

@media (max-width: 979px) {
    .header-wrapper {
        height: 388px;
        background: url("../images/taikuri_979w.jpg") no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

Here's a second media query, with a larger image. Note I added a padding-top as a percentage with a min-height so that the top area would scale respectively to the width of the browser):

@media (min-width: 1000px) {
    .header-wrapper {
        height: auto;
        min-height:388px;
        background: url("../images/taikuri_really_big.jpg") no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        padding-top:35%;
    }
}

If you don't have photoshop, you can resize your image using a service like this: http://www.picresize.com/ I've never used this but it looks like it does what you want. Also, if you're on a Mac, the Preview app has an image resize. Not sure what might be on Windows or Linux, though, sorry!

Upvotes: 3

Related Questions