2

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.

Improve this question
3
  • 1
    Using CSS does not reduce file size. It shrinks the displayed image in the browser, after the file has already been downloaded. For "adaptive images", you may want a server-side solution. Commented Mar 4, 2015 at 20:12
  • 1
    I believe the suggestion is to not use HTML/CSS to resize it, but to actually serve up a pre-resized image. As in have say 3 images, one is 100x200, second is 200x400, third is 400x800. You should serve up the smaller one instead of serving up the third and using CSS to resize it as 100x200 anyway. Commented Mar 4, 2015 at 20:14
  • I THINK I understand why the question got downvoted. Perhaps a rephrasing of the question to something like, "I don't understand the difference between scaling image size in the context of the browser using CSS/HTML vs scaling an image's size in the context of its natural dimensions to achieve a smaller file size"... except that the way I just phrased it indicates that I already know the answer. So... I'm tempted to say this is a valid question as it really is asking, "what's the difference between "File size" and "Display size". Commented Mar 4, 2015 at 20:41

3 Answers 3

Reset to default
3

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!

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

See the answer below for a couple other image compression resize options, as they probably are good. Again, I've never used them.
2

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.

Improve this answer

2 Comments

While absolutely right, this should probably be a comment on the original question, as the substance of the answer is the link to two tools with no explanation of the claim "Scaling the image with HTML or CSS will not give better loading speeds at all."
@JoshBurgess Thanks for the heads up, I'm pretty new to helping people on Stackoverflow. Added a little explanation to my answer :)
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.