CODEWITHSUNDEEP
javascriptajaximagegoogle-chromeload
Aaron
Aaron

Reputation: 2500

Down-Sized Images are Slow in Chrome

I'm working on a script and have an issue with Chrome.

Here's what I'm doing: 1. Loading large images into a DIV. 2. Scaling the images to fit the size of the DIV. 3. When the browser is resized, the image is scaled up and down with the browser.

Everything is working 100% in all browsers except Chrome.

I've checked the profiler in Chrome and don't see anything unusual. These are large images, however are working just fine (even live) in all other browsers.

I've read a ton of places that have noted this issue when using down-sized images in Chrome...but not solution.

Nothing special going on, just using a 

var img=new Image();
$(img).load(function(){ .... {);

Does anyone know of a workaround or solution that will work in Chrome? Thanks!

Upvotes: 1

Views: 2380

Answers (4)

Jirka Mayer
Jirka Mayer

Reputation: 241

I had exactly the same problem, but recently solved it. Huge amounth of performance takes up chrome's anti-aliasing, because it recalculates the entire image whenever you resize it.

So to solve it you just add this line to the css if your image:

#myImage
{
     image-rendering: -webkit-optimize-contrast;
}

You can turn it off by javascript when the image is still.

More about anti-aliasing: Disable antialising when scaling images

Upvotes: 4

addyo
addyo

Reputation: 2938

When you're profiling issues with image resizes and decodes in Chrome, it's best to use the Developer Tools Timeline for this as it can give you relatively accurate stats on exactly what took a long time to be decoded.

Downsizing (or re-sizing) involves Chrome having to both decode the image (JPEG/PNG/GIF) you're sending down the line and then do extra work to resize that image into the container (div) that you would like to display it in. Where possible, the advice from the Chrome team is to prescale your images to the correct width/height needed.

Now you might be wondering: well, surely this issue is just down to desktop Chrome sucking, right? It's not as clear-cut as that. Particularly on mobile devices where browsers have less access to a powerful GPU/CPU, it's going to be costly to perform those resize operations there as well. So in short: yes, rescaling large images can be slow in Chrome sometimes. Try to prescale where possible and these performance bottlenecks should disappear.

Upvotes: 1

Aaron
Aaron

Reputation: 2500

So it appears that Chrome just sucks when it comes to handling large images and even images that aren't large, but just scaled down. I've searched around endlessly only to find similar questions without resolutions.

Still not sure why all other browsers (even IE 7 and 8) can handle large images (tested with 7mb scaled-down PNGs), but Chrome can't even manage to do a 700kb scaled-down JPG without lagging.

So, I'm answering this question with: in this instance, Chrome sucks.

Upvotes: 4

user1558249
user1558249

Reputation:

How are you resizing the images? Using height/width or CSS transforms? The latter might result in better performance.

Some info: Improving the Performance of your HTML5 App

Upvotes: 0

Related Questions