CODEWITHSUNDEEP
htmlcssimage-scaling
BBog
BBog

Reputation: 3650

Is there a performance difference between upscaling or downscaling an image with CSS?

In the case of responsive css design, let's assume you have a couple of different-sized versions of an image and you reach a point where you have a screen width of 900 pixels.

What's the best thing to do in this case? Case a) downscale an 950 pixels image or case b) upscale an 850 pixels image (these values are of course fictive, I'm not talking about a particular case)

From where I standing, each one has its own advantages and disadvantages:

Using downscaling, as a PRO the image should have a better quality (at least I think so, I don't know that much about the different browser's downscaling algorithm). As a CON, the image would take longer to download, something important if you're also targeting mobile.

Using upscaling, you gain download speed, but you lose quality.

Of course, you won't upscale a 500 pixels image to fill 1000 pixels width, just as much as you wont downscale a 2000 pixels image for obvious reasons, assuming you have a choice. But in cases where you have similar values is there a sort of rule of thumb that might help you make a decision or it doesn't really make a difference and it's up to the developer?

Or, at least, is there a factor that would weight more? For example, by using upscaling you could get a much larger benefit from the download time decrease then from the decrease in quality and viceversa.

Upvotes: 1

Views: 2015

Answers (1)

Bram Vanroy
Bram Vanroy

Reputation: 28437

I think you could look at it in different ways. Also, you should ask yourself some questions:

  • What audience are you trying to reach (Mobile (say up to max-width of 640px) or desktop (anything wider than 640px) orientated)
  • What is the largest image you will use (in width and height)
  • Are your images needed on your mobile website (i.e. can you make a simplified mobile version of your website, without losing too much of its contents?)

When your focus lies on a desktop environment as defined as above I would not bother too much about your problem. Of course larger images will take some time to load, but don't forget that most mobile browsers have two very neat features: 1. data that is retrieved by the device has first been compressed by servers (think Blackberry, Opera ...) and 2. most of the time browsers allow options for the quality of images (low, normal, high). So users can still choose what kind of quality they want, without you needing to decide for them!

I think that when you focus on a mobile audience, it is best to upscale. I don't think that your website is mobile-only though, and you want to keep your website to look good on wide-screen devices as well so I would go for downscaling! Also, don't forget to optimize your images (JPG compression with 80% should reduce the size a lot, but shouldn't hurt the quality too much).

EDIT: So I've been thinking about this and there is something else you can do: work with two different images. I can hear you thinking: but that doesn't sound logical, how can the browser detect the image that needs to be changed when it is not loaded yet (would be stupid to load two images). Well, here you go. (Credits go to jAndy in this question)

jQuery code (note that I linked to my own webspace. This fiddle will thus not keep working for eternity!)

$(document).ready(function() {
    $("#jsDisabledMessage").hide(); // HIDES MESSAGE THAT TELLS USER TO ENABLE JS

    if ($(window).width() < 480) {
            $("img").attr('src', function(index, src) {
       return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute('data-path') + "-mobile.jpg"; // FOR MOBILE DEVICES
        });
    }
    else {
        $("img").attr('src', function(index, src) {
       return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute('data-path') + "-not-mobile.jpg"; // FOR DESKTOP
        });
    }

   $("img").show();
});

So, what happens:

  • Browser reads HTML
  • Browser is not tempted to find image (and images are hidden by CSS anyway)
  • jQuery finds the appropriate URL (depending on screen size) and adjusts HTML accordingly
  • jQuery shows the images
  • When JS is disabled, a message will be displayed telling the user, the requested images cannot be displayed.

I hope that this is something in the right direction.

Upvotes: 2

Related Questions