Is there any way to configure the image quality to increase the upload speed?

Asked

Viewed 1,574 times

5

Is there any way to leave a particular image, through CSS, with a lower quality, to increase the page loading speed?

Example: First load a certain image with lower quality, then increase the quality of it when the user passes the mouse?

css html5

  • I think only with CSS would be difficult. You could use the hover to display a different image when the user hovers the mouse, but keep up this image after is that I do not know how to do (otherwise, when the user took the mouse would revert to the image of lower quality).

  • @mgibsonbr, I thought of something like this. I think the data jQuery would help. I just wasn’t willing to use the timthumb, but it’s a solution

  • Check it out: http://www.html5rocks.com/en/mobile/high-dpi/? redirect_from_locale=pt

  • Here’s more: http://blog.cloudfour.com/responsive-images-101-part-4-srcset-width-descriptors/

  • Thanks @Ivanferrer for the information

2 answers

3

Follow a method that works:

CSS

#div_whatever {
   position: whatever;
   background-repeat: no-repeat;
   background-position: whatever whatever; 
   background-image: url(dir/image.jpg);
   /* image.jpg is a low-resolution at 30% quality. */
}

#img_highQuality {
   display: none;
}

HTML

<img id="img_highQuality" src="dir/image.png">
<!-- img.png is a full-resolution image. -->

<div id="div_whatever"></div>

Jquery

$("#img_highQuality").off().on("load", function() {
    $("#div_whatever").css({
        "background-image" : "url(dir/image.png)"
    });
});

What happens

  1. A low resolution background version loads quickly.
  2. Meanwhile, the higher resolution version is loading as a hidden image.
  3. When the higher resolution version loads, jQuery swaps the div’s with low resolution images for high resolution images.

JS version

This example is for when many elements need to be changed.

CSS:

.hidden {
   display: none;
}

#div_whatever {
   position: whatever;
   background-repeat: no-repeat;
   background-position: whatever whatever; 
   background-image: url(dir/image.jpg);
   /* image.jpg is a low-resolution at 30% quality. */
}

HTML:

<div id="div_whatever"></div>
<img id="img_whatever" class="hidden" src="dir/image.png" onload="upgradeImage(this);">

JAVASCRIPT:

function upgradeImage(object) {
    var id = object.id;
    var target = "div_" + id.substring(4);

    document.getElementById(target).style.backgroundImage = "url(" + object.src + ")";
}

Source Here

0

Use the Hover property of css, example:

.imagem {
  background: url(imagem-com-baixa-qualidade.jpg);
  }

.imagem:hover {
  background: url(imagem-com-alta-qualidade.jpg);
  }

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.